QT5/QML 캔버스 요소를 흐리게 처리합니다.

Question

광선 효과를 추가하려는 QT5/QML 1/4 원호가 있습니다. 문제는 아크에 그래디언트가 있고, 그 글로가 가장 가까운 아크의 컬러와 일치하기를 원합니다.

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 요소를 가리키는 시도했지만 제대로 동작하지 않습니다와 나는 경우 지원되는 운영 모르겠어요. 그것의 http://doc.qt.io/qt-5/qml-qtgraphicaleffects-glow.html

하지만 그 대신 그것을 오렌지로의 나비 날개 오렌지 어디 파란색이고, 균일 한 흰색 또는 녹색 인 : 내가 설명 할 수

또 다른 방법이 여기에서 광선 효과를 좋아하는 것입니다 나비 날개는 파란색입니다.

Answer 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이 아니란 점을 기억하십시오.