HTML5用画布绘制，旋转线？

处理一个开源项目，我们有HTML5 canvas旋转工作的图像和文本 - 但我不明白什么是不同的形状。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，宽度，高度。

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

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

但是......我无法弄清楚如何用线条做到这一点。我已经阅读了其他相关的问题 - 但不了解如何调整形状的原点。

来源

2014-12-28 RoundSparrow hilltx

要旋转线围绕其中心点：

计算该行的边框：其minX，MINY，maxX的，美星
转换边界框中心点：翻译（其minX +（maxX的-其minX）/ 2，MINY +（MAXY-MINY）/ 2）
旋转所期望
先清空&然后翻译画布。

来源

2014-12-28 22:21:49 markE

HTML5用画布绘制，旋转线？

回答

相关问题