javascript - HTML5 用 Canvas 绘图，旋转线？

Question

正在开发一个开源项目，我们可以对图像和文本进行 HTML5 Canvas 旋转 - 但我无法弄清楚形状有什么不同。

源文件:https://github.com/kageurufu/FaceMaker/blob/master/js/facemaker.render.js

第 239 行:

  case FM.ShapeTypes.square:
  case FM.ShapeTypes.line:
    //As far as I can tell, a line is just a rect, and a square is really a rect
    if (layer.shape_opt === 0) {
      c.fillRect(x, y, fm.parseInt(layer.width), fm.parseInt(layer.height));
    } else {
      c.strokeRect(x, y, fm.parseInt(layer.width), fm.parseInt(layer.height));
    }

这可以使用提供的变量绘制动态线宽:x，y，宽度，高度。

但是，我们有一个旋转变量，其值为 0..360，如果 > 0，则需要应用它。对于图像和字体，我们在第 298 行像这样旋转 Canvas :

c.save();
c.translate(x, y);
c.rotate(rotation * (Math.PI / 180));
// draw here
c.restore();

但是...我不知道如何用线条来做到这一点。我在这里阅读了其他相关问题 - 但不了解如何调整形状的原点。

Answer 1

绕其中心点旋转直线:

1. 计算直线的边界框:minX,minY,maxX,maxY

2. 平移到边界框中心点:translate( minX+(maxX-minX)/2, minY+(maxY-minY)/2 )

3. 根据需要旋转

4. 通过首先取消旋转然后取消平移 Canvas 来进行清理。