CODEWITHSUNDEEP
qtqml
James
James

Reputation: 2834

QT5/QML Blur a Canvas Element

I have an QT5/QML quarter-circle arc that I want to add a glow effect to. The issue is I want the arc to have a gradient, and for the glow to match the color of the arc that it's closest to.

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();
  }
}

The closest I've gotten is: 

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

I've tried pointing a FastBlur element at the Canvas but it's not working and I'm not sure if that a supported operation.

Another way I could describe this is I would like the glow effect from here: http://doc.qt.io/qt-5/qml-qtgraphicaleffects-glow.html

But instead of it being a uniform white or green, for it to be orange where the butterfly wing is orange and blue where the butterfly wing is blue.

Upvotes: 0

Views: 736

Answers (1)

derM
derM

Reputation: 13691

I don't know what your problem is with the FastBlur - for me it works, but has too weak an effect.

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
}

Maybe you are more happy with a GaussianBlur with a larger deviation and enough samples.

Remember to not make the Effect a child of its source.

Upvotes: 3

Related Questions