QML实现文字带光晕效果

漂亮的界面还是QML实现呀。本次实现的是文字带光晕的效果。利用QtGraphicalEffects中的Glow。

实现代码如下

Text {
          id : titleText
          font.family: "Helvetica"
          width: parent.width
          font.pointSize: titlefontsize
          font.bold: true
          wrapMode: Text.WordWrap
          color: titlecolor
          text: titlestr
          visible: titlevisble
      }
    Glow{
        source: titleText
        anchors.fill: titleText
        radius: 20
        samples: 16
        color: "green"
    }

实现方式2： 利用Canvas实现

效果如下

代码入下

 Rectangle{
        width: 600;
        height: 300;
        x : 20 ; y :30
        radius: 10
        color: "#0C1E32"
        border.color: "#F3F458"

        Column{
            spacing: 2
            Canvas {
                 id: mycanvas
                 width: 500
                 height: 100

                 onPaint: {
                     var ctx= getContext("2d");
                     ctx.font="50px Arial";
                     //ctx.fillRect(0,0,500,500);
                     //ctx.fillStyle="#00ff00";

                     ctx.shadowOffsetX=2;
                     ctx.shadowOffsetY=-12;
                     ctx.shadowColor = "#00ff00"
                     ctx.shadowBlur = 10;
                     ctx.strokeStyle="#F3F458";
                     ctx.lineWidth=3;
                     //ctx.shadowColor="#F3F458";
                     ctx.strokeText("Hello World",10,height/2);
                 }
             }

            Canvas {
                 id: mycanvas2
                 width: 500
                 height: 100
                 onPaint: {
                     var ctx= getContext("2d");
                     ctx.font="50px Arial";
                     //ctx.fillRect(0,0,500,500);
                     //ctx.fillStyle="#00ff00";

                     ctx.shadowOffsetX= 2;
                     ctx.shadowOffsetY= 10;
                     ctx.shadowColor = "#00ff00"
                     ctx.shadowBlur = 10;
                     ctx.strokeStyle="#F3F458";
                     ctx.lineWidth=3;
                     //ctx.shadowColor="#F3F458";
                     ctx.strokeText("Hello World",10,height/2);
                 }
             }

            Canvas {
                 id: mycanvas3
                 width: 500
                 height: 100
                 onPaint: {
                     var ctx= getContext("2d");
                     ctx.font="50px Arial";
                     //ctx.fillRect(0,0,500,500);
                     //ctx.fillStyle="#00ff00";

                     //ctx.shadowOffsetX= 2;
                     //ctx.shadowOffsetY= 10;
                     ctx.shadowColor = "#00ff00"
                     ctx.shadowBlur = 10;
                     ctx.strokeStyle="#F3F458";
                     ctx.lineWidth=3;
                     //ctx.shadowColor="#F3F458";
                     ctx.strokeText("Hello World",10,height/2);
                 }
             }
        }
    }