Я использую PieSeries в QML как способ создания временной маски.
У меня есть круговой анимированный GIF и поверх него я добавил PieSeries.
PieSeries имеет 3 PieSlices. 2 из них являются «черными», по существу блокируя соответствующие части gif. Оставшийся PieSlice прозрачен.
Это прекрасно работает, но я бы хотел, чтобы у 2 черных кусочков пирога был градиент, чтобы их кромка была не столь очевидна (прозрачность градиента).
Я пытался использовать LinearGradient с OpacityMask, как описано здесь , но это не имело никакого эффекта при использовании на PieSlice.
Любые предложения будут оценены:)
Вот мой код:
import QtQuick 2.0
import QtCharts 2.2
import QtGraphicalEffects 1.0
Item {
anchors.fill: parent //Fill the gif area
ChartView {
id: chart
anchors.centerIn: parent
height: parent.height+200
width: parent.width
legend.visible: false
antialiasing: false
backgroundColor: "transparent"
PieSeries {
id: pieOuter
size: 1.5
holeSize: 0.2
PieSlice { id: black1; value: 1; color: "black"; borderColor: "transparent" }
PieSlice { id: valSlice; value: d.val; color: "transparent"; borderColor: "transparent" }
PieSlice { id: black2; value: 1 - d.val; color: "black"; borderColor: "transparent" }
}
}
OpacityMask{
source: mask
maskSource: black1
}
LinearGradient {
id: mask
anchors.fill: black1
gradient: Gradient {
GradientStop { position: 0.2; color: "transparent"}
GradientStop { position: 0.5; color: "white" }
}
}
}
Примечание: d.val здесь содержит значение от 0 до 1
Редактировать
Некоторые изображения, которые помогут визуализировать то, чего я пытаюсь достичь:
GIF, с которого я начинаю ( source - исходный файл слишком велик для прикрепления):
Снимок оригинального Gif
Вот так выглядит анимация:
Низкий d.val
Выше d.val
Макс. День.
Вот как я хочу, чтобы это действительно выглядело (изображено здесь для d.val):
Высшее значение d.val с градиентом