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用畫布繪製，旋轉線？

回答

相關問題