Question

开发一个开源项目，我们有HTML5画布旋转工作图像和文本 - 但我无法弄清楚形状有什么不同。

源文件：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，width，height。

但是，我们有一个0..360的旋转变量，如果＆gt; 0它需要应用。对于图像和字体，我们在第298行旋转画布：

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

然而......我无法弄清楚如何用线条做到这一点。我在这里阅读了其他相关问题 - 但没有理解如何调整形状的来源。

Answer 1

围绕其中心点旋转线条：

计算线条的边界框：minX，minY，maxX，maxY
转换为边界框中心点：translate（minX +（maxX-minX）/ 2，minY +（maxY-minY）/ 2）
根据需要旋转
首先解除旋转＆amp;然后翻译画布。

HTML5用画布绘图，旋转线？

1 个答案: