如何在canvas qml元素中使用FontLoader qml对象?

时间:2018-04-26 14:05:08

标签: javascript qt canvas qml

您好我想在Canvas元素中使用Fontloader qml对象的字体集,其中我有一个弯曲的文本。有可能吗?一般来说,改变画布文字的字体系列是可能的吗? 这是我的代码:

Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")


        FontLoader { id: webFont;name: "OpenSans"; source: "qrc:/OpenSans-Bold.ttf" }

        Canvas{

            property string nameFont: webFont.name

            function drawTextAlongArc(context, str, centerX, centerY, radius, angle)
            {

                context.save();
                context.translate(centerX, centerY);
                context.rotate(-1 * angle / 2);
                context.rotate(-1 * (angle / str.length) / 2);
                for (var n = 0; n < str.length; n++) {
                    context.rotate(angle / str.length);
                    context.save();
                    context.translate(0, -1 * radius);
                    var char1 = str[n];
                    context.fillText(char1, 0, 0);
                    context.restore();
                }
                context.restore();

            }


          anchors.fill: parent
          onPaint: {
              var ctx = getContext("2d");
              ctx.fillStyle = Qt.rgba(1, 1, 1, 1);
              ctx.fillRect(0, 0, width, height);

              ctx.font='50px OpenSans'
              ctx.textAlign = "center";

              var centerX = width / 2;
              var centerY = height/2; //height - 30;
              var angle   = Math.PI * 0.8; // radians
              var radius  = 180;
              ctx.fillStyle="#000000"
              drawTextAlongArc(ctx, "Hello World", centerX, centerY, radius, angle);
          }
        }
    }

我想用而不是Verdana字体,我用指令设置:

ctx.font = '50px Verdana'

设置的字体 FontLoader {id:webFont;来源:“qrc:/OpenSans-Bold.ttf”}

我怎么做?

1 个答案:

答案 0 :(得分:1)

正如你在评论中所说,问题确实是字体名称中的空格。

如上所述in the doc

  

注意:font-size和font-family属性是必需的,必须   按照上面显示的顺序排列。另外,还有一个字体系列   必须引用其名称中的空格。

因此,应该通过

加载字体来解决问题
def dialogOpen(self):
    self.sub = subDialog()

    if self.sub.exec_():
        check = str(self.sub.checkbox.isChecked())
        spin = str(self.sub.spinbox.value())

        self.label1.setText('spinbox value is ' + spin)
        self.label2.setText('Checkbox is ' + check)

并使用

FontLoader { id: webFont; source: "qrc:/OpenSans-Bold.ttf" }

甚至更好:

ctx.font='50px "Open Sans"'