Вопрос:
Этот вопрос, кажется, довольно распространен для других языков и фреймворков:
Как вы применяете градиент на границе прямоугольника? Мое решение до сих пор является настраиваемым компонентом, таким как:
Item { id: root property int borderWidth property alias borderGradient: border.gradient property alias gradient: fill.gradient property alias color: fill.color property int radius Rectangle { id: border anchors.fill: parent radius: root.radius Rectangle { id: fill anchors.fill: parent anchors.margins: root.borderWidth radius: root.radius * width / border.width / 2 } } }
Это, однако, не позволяет мне установить цвет прямоугольника на “прозрачный”, что печально, но я могу жить с ним. Тем не менее мне интересно, может ли быть более элегантный способ (помимо использования Context2D или QSG напрямую…)
Приветствую,
-т-
Лучший ответ:
Следуя предложению ddriver из комментариев, я собрал рабочий образец прямоугольника, где вы можете установить градиент для границы, используя OpacityMask. Я где-то слышал, что QtGraphicalEffects имеют плохую производительность, поэтому я могу попробовать один без, в будущем, но для тех, кого это не касается, это рабочий пример:
import QtQuick 2.0 import QtGraphicalEffects 1.0 Rectangle { id: root property Gradient borderGradient property int borderWidth: 0 Loader { id: loader active: borderGradient anchors.fill: parent sourceComponent: border } Component.onCompleted: console.log(loader.active) Component { id: border Item { Rectangle { id: borderFill radius: root.radius anchors.fill: parent gradient: root.borderGradient visible: false } Rectangle { id: mask radius: root.radius border.width: root.borderWidth anchors.fill: parent color: ‘transparent’ visible: false // otherwise a thin border might be seen. } OpacityMask { id: opM anchors.fill: parent source: borderFill maskSource: mask } } } }
При необходимости он будет использовать OpacityMask (когда установлен параметр borderGradient), иначе он будет вести себя как обычный прямоугольник.
Надеюсь, я помогу кому-нибудь, с этим.