javascript - 我如何在 qml canvas 元素中创建弯曲文本?

标签 javascript qt text qml

我想在 qml 中创建弯曲文本,可以吗?是否有一个我可以导入的 JavaScript 库来做到这一点?

enter image description here

我的想法是,也许可以使用canvas元素,但我不知道如何做到这一点......这是一个好主意?

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


    Canvas{

      anchors.fill: parent

      onPaint: {
          var ctx = getContext("2d");
          ctx.fillStyle = Qt.rgba(1, 0, 0, 1);
          ctx.fillRect(0, 0, width, height);
          //how i can create curved text??? 

      }

    }
}

最佳答案

您好,我尝试将代码放入 @folibis 发布的链接中,工作完美! 这是代码:

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

    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 Verdana'

          //ctx.font = '30px Courier New'
          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);

      }
    }
} 

关于javascript - 我如何在 qml canvas 元素中创建弯曲文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50010671/

相关文章:

javascript - 指定来自不受信任主机的脚本的散列

java - Java中解析固定格式的文本文件

javascript - Raphael.js 文本值动画

Javascript 表单 AJAX 样式

c++ - Qt 调试 : I am implementing a Qt thread class that is not being recognized when used, 我做错了什么?

c++ - WPD 对象文件名在 '.' 处被截断

html - 如何将文本输入保存为 HTML 和 Django 中的文件

python - 一个足够的 MUD 风格和适用于 Python 的文本解析器的例子

javascript - 通过 DOM 动态添加 "selected"到 HTML 选项

c++ - Qt 与 Lua | lua文件放在哪里