QML Canvas如何仅旋转ctx.fillText()绘制的文本而非整个画布？

当然可以实现！你完全不需要旋转整个Canvas，只需要借助Canvas上下文的状态管理和变换API，就能单独旋转这段绘制的文本，而且不会影响Canvas里的其他元素。下面是具体的实现思路和代码示例：

核心思路 #

Canvas上下文提供了save()和restore()方法来隔离绘制状态，配合translate()和rotate()就能实现局部文本的旋转：

1. 保存当前上下文状态：用ctx.save()把当前的绘制状态（比如平移、旋转、颜色等）保存起来，避免后续操作影响其他绘制内容。
2. 平移到旋转中心：因为Canvas的旋转是围绕坐标原点进行的，所以先把原点平移到你想要放置文本的位置（也就是旋转的中心点）。
3. 执行旋转：用ctx.rotate()传入旋转角度（注意是弧度值）。
4. 绘制文本：此时绘制的文本会以平移后的原点为中心旋转，绘制位置需要对应调整。
5. 恢复上下文状态：用ctx.restore()回到之前保存的状态，确保后续绘制不受这次旋转操作的影响。

完整QML代码示例 #

Canvas {
    width: 400
    height: 400
    onPaint: {
        const ctx = getContext("2d");
        ctx.clearRect(0, 0, width, height);
        
        // 绘制一个正常文本作为对比
        ctx.fillStyle = "#333";
        ctx.font = "16px Arial";
        ctx.fillText("未旋转的文本", 50, 100);
        
        // 开始处理旋转文本
        ctx.save(); // 保存当前上下文状态
        
        // 平移到旋转中心（这里设定为(220, 100)，即文本原本要显示的位置）
        ctx.translate(220, 100);
        // 旋转45度（转换为弧度：45 * π/180 = π/4）
        ctx.rotate(Math.PI / 4);
        // 绘制旋转后的文本，此时原点是平移后的位置，所以用(0, 0)
        ctx.fillStyle = "#e74c3c";
        ctx.fillText("旋转45度的文本", 0, 0);
        
        ctx.restore(); // 恢复上下文状态，不影响后续绘制
        
        // 再绘制一个正常文本，验证旋转操作没有影响它
        ctx.fillStyle = "#2980b9";
        ctx.fillText("不受旋转影响的文本", 50, 200);
    }
}

关键注意事项 #

• 角度单位：rotate()方法接受的是弧度值，如果习惯使用角度，可以自己写个转换函数：

  function degreesToRadians(degrees) {
      return degrees * Math.PI / 180;
  }
  

  之后就可以用ctx.rotate(degreesToRadians(30))来旋转30度。
• 文本对齐与基线：如果旋转后的文本位置不符合预期，可以调整ctx.textAlign和ctx.textBaseline属性。比如设置ctx.textBaseline = "middle"和ctx.textAlign = "center"，能让文本更精准地围绕中心点旋转。
• 状态成对管理：save()和restore()必须成对使用，否则上下文状态会混乱，导致后续绘制出现异常。

内容的提问来源于stack exchange，提问作者Santosh Parihar