Как сделать градиент непрозрачности на изображении? - PullRequest
Новая
       7

Как сделать градиент непрозрачности на изображении?

0 голосов
/ 21 января 2019

Я реализовал поток покрытия, похожий на Itunes.Но есть еще одна вещь, которую я не могу решить, даже после изучения и прочтения документации ... У меня есть следующий результат, но я хотел бы показать только половину отражения.enter image description here

Я обнаружил следующую запись StackOverflow: Как сделать непрозрачность градиента на изображении - QML , что очень похоже на то, что я хотел быдостигать.За исключением того, что мой фон представляет собой градиент, я не могу выбрать белый цвет (или любой простой цвет для последнего элемента GradientStop в коде решения, предложенном в качестве решения).

Вот мой код: 

Image {
    id: rectDelegate
    anchors.fill: parent
    source: images[index % images.length]
}
ShaderEffectSource {
    id: reflection
    sourceItem: rectDelegate

    y: sourceItem.height
    width: sourceItem.width
    height: sourceItem.height

    transform: [
        Rotation {
            origin.x: reflection.width / 2
            origin.y: reflection.height / 2
            axis.x: 1
            axis.y: 0
            axis.z: 0
            angle: 180
        }
    ]
    visible: reflection_visible
}


Rectangle {
    anchors.fill: reflection

    gradient: Gradient {
        GradientStop {
            position: 0.0
            color: "#55ffffff"
        }
        GradientStop {
            // This determines the point at which the reflection fades out.
            position: 1
            color: "#ffffff"
        }
    }
    visible: reflection_visible
}

Я попытался встроить элемент ShaderEffectSource в прозрачный прямоугольник, высота которого будет равна половине высоты отражения, и обрезать источник ShaderEffectSource внутри, но отражение не появится: /

Вот код: 

    Rectangle {
    anchors.top: rectDelegate.bottom
    color: "transparent"
    width: rectDelegate.width
    height: rectDelegate.height - 300
    visible: reflection_visible
    clip: true
    border.color: "yellow"
    ShaderEffectSource {
        id: reflection
        sourceItem: rectDelegate

        y: sourceItem.height
        width: sourceItem.width
        height: sourceItem.height

        transform: [
            Rotation {
                origin.x: reflection.width / 2
                origin.y: reflection.height / 2
                axis.x: 1
                axis.y: 0
                axis.z: 0
                angle: 180
            }
        ]
        visible: reflection_visible
    }
}

Любая идея приветствуется :) Я постарался сделать свой пост максимально понятным, но если что-то не хватает для понимания, пожалуйста, спросите:)

1 Ответ

0 голосов
/ 22 января 2019

прочитайте это сообщение: Как сделать непрозрачность градиента на изображении? - QML или вы можете использовать тип Canvas, чтобы нарисовать изображение с прозрачным градиентом, но правильный путь - первый.

...