居中對齊HTML畫布內的多邊形

我使用此代碼動態地在畫布內繪製多邊形。（座標由用戶提供）居中對齊HTML畫布內的多邊形

https://stackoverflow.com/a/4841057/1667856

是否有可能已經創造了它之前之後/這個多邊形移動到畫布的中心？

我發現你可以使用畫布translate（）方法來移動形狀，但我似乎無法弄清楚如何重新計算座標，以便多邊形將自動出現在畫布的中間，而不是在其原始座標上。

來源

2014-02-26 user1667856

正如您可能已經發現的那樣，html canvas只是一個像素繪圖。

您在畫布上繪製的形狀就像乾漆一樣。他們不能被移動或重塑成另一種形狀。

「移動」形狀的典型方法是清除畫布並用不同的座標重繪相同的形狀。

您可以通過向所有多邊形座標添加offsetX和offsetY來創建這些座標。

或者（更簡單地），您可以轉換座標。

重要提示：context.translate不會移動多邊形的座標。它會更改每個座標的所有圖紙。

ctx.translate（50,50）「移動」畫布的原點爲50,50。這意味着如果你開始在5,5處繪製多邊形，你將在視覺上開始繪製50 + 5,50 + 5。

下面是示例代碼和演示：

： http://jsfiddle.net/m1erickson/2Gm73/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 
</style> 
<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 


    // calculate the middle of the canvas 
    var centerX=canvas.width/2; 
    var centerY=canvas.height/2; 

    // just for testing: draw crosshairs on center canvas 
    ctx.beginPath(); 
    ctx.moveTo(centerX,0); 
    ctx.lineTo(centerX,canvas.height); 
    ctx.moveTo(0,centerY); 
    ctx.lineTo(canvas.width,centerY); 
    ctx.stroke(); 

    // define some points for your polygon 
    var poly=[ 5,5, 100,50, 50,100, 10,90 ]; 

    // save the canvas context in its untranslated state 
    ctx.save(); 

    // translate the canvas 
    // the context now uses centerX,centerY as its 0,0 origin 
    ctx.translate(centerX,centerY); 

    // draw the polygon 
    ctx.beginPath(); 
    ctx.moveTo(poly[0], poly[1]); 
    for(var i=2;i<poly.length;i+=2){ 
     ctx.lineTo(poly[i] , poly[i+1]) 
    } 
    ctx.closePath(); 
    ctx.fillStyle = '#f00'; 
    ctx.fill(); 

    // restore the context to its untranslated state 
    // (otherwise all further drawings will be "moved" 
    // just like this polygon 
    ctx.restore(); 

}); // end $(function(){}); 
</script> 
</head> 
<body> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

如果你希望你的多邊形在畫布上進行視覺中心，也必須計算出你的多邊形本身的中心偏移

// calc the max values of x,y in the polygon and divide by 2 

var centerPolyX = 100/2; // max x comes from coordinate 100,50 
var centerPolyY = 100/2; // max y comes from coordinate 50,100

然後轉化爲中心的畫布減去多邊形中心：

// move to center canvas 
// but then move left and up by half the polygon's size 

ctx.translate(centerX-centerPolyX,centerY-centerPolyY);

來源

2014-02-26 17:30:14 markE

居中對齊HTML畫布內的多邊形

回答

相關問題