QT5/QML 模糊画布元素答案

【问题标题】：QT5/QML Blur a Canvas ElementQT5/QML 模糊画布元素
【发布时间】：2017-10-26 16:00:09
【问题描述】：

我有一个 QT5/QML 四分之一圆弧，我想为其添加发光效果。问题是我希望弧线具有渐变效果，并且希望发光与最接近的弧线颜色相匹配。

Canvas {
  id: arc
  width: parent.width; height: parent.height

  onPaint: {
    var context = arc.getContext("2d");
    context.beginPath();
    context.lineWidth = 10
    var gradient = context.createLinearGradient(
        arc.width/2, 0,
        arc.width, arc.height/2);
    gradient.addColorStop(0, Qt.rgba(0, 0, 1, 1));
    gradient.addColorStop(1, Qt.rgba(1, 0, 0, 1));
    context.strokeStyle = gradient
    var radius = arc.width/2 - 20
    context.arc(arc.width/2, arc.height/2, radius, -Math.PI/2, 0, false);
    context.stroke();
  }
}

我得到的最接近的是：

context.shadowColor = Qt.rgba(0, 0, 1, 1);
context.shadowBlur = context.lineWidth*2;

我尝试将 FastBlur 元素指向 Canvas，但它不起作用，我不确定这是否受支持。

我可以用另一种方式来描述这一点，我想要这里的发光效果：http://doc.qt.io/qt-5/qml-qtgraphicaleffects-glow.html

但不是统一的白色或绿色，而是蝴蝶翅膀是橙色的橙色和蝴蝶翅膀蓝色的蓝色。

【问题讨论】：

标签： qt qml

【解决方案1】：

我不知道FastBlur 有什么问题 - 对我来说它有效，但效果太弱。

Canvas {
  id: arc
  width: parent.width; height: parent.height

  onPaint: {
    var context = arc.getContext("2d");
    context.beginPath();
    context.lineWidth = 10
    var gradient = context.createLinearGradient(
        arc.width/2, 0,
        arc.width, arc.height/2);
    gradient.addColorStop(0, Qt.rgba(0, 0, 1, 1));
    gradient.addColorStop(1, Qt.rgba(1, 0, 0, 1));
    context.strokeStyle = gradient
    var radius = arc.width/2 - 20
    context.arc(arc.width/2, arc.height/2, radius, -Math.PI/2, 0, false);
    context.stroke();
  }
  visible: false // I set it to false, so the effect is shown in it's full beauty.
}

FastBlur {
    anchors.fill: arc
    source: arc
    radius: 30
}

也许您更满意GaussianBlur 具有更大的偏差和足够的样本。

切记不要将Effect 设为source 的子代。

【讨论】：

好收获！我的问题是效果太弱了。