如何獲取畫布上下文的框尺寸？

我碰到了一個障礙，我用路徑覆蓋圖像。當有人點擊路徑時，我可以使用isPointInPath的方法來知道哪個路徑已被點擊。

問題是我想重繪圖像放大到路徑的外邊框，但我看不到一種方法來檢索該信息。

ctx.beginPath(); 
ctx.arc(can.width/2, can.height/2, can.height/2.5, ((2 * Math.PI)/10) * 7, (2 * Math.PI)/10); 
ctx.lineTo(can.width/2, can.height/2); 
ctx.closePath();

在這個小提琴http://jsfiddle.net/JohnSReid/78PEX/，我畫了一個弧。如果我使用了上面代碼中繪製的點，那麼我將裁剪弧的外部點。

有沒有辦法抓住弧所用區域的尺寸？

來源

2014-01-17 John Reid

據我所知，你需要計算它。它不應該太難。在開始調整每個四邊的邊界之前，我需要一個包圍圓弧半徑相同的圓的邊界框。由於弧線穿過0°和90°，因此可以告訴您不需要調整頂部或右側。你只需要計算端點的座標，因爲180°和270°沒有通過，分別調整左側和底部。（使用'常規'角度） - 我忘記了畫布是'顛倒'的，即90°向下而不是向上 – enhzflep

演示：http://jsfiddle.net/m1erickson/9xgwY/

enter image description here

你可以得到這樣一個圓的圓周上任意點（或弧）：

function XYonCircle(cx,cy,radius,radians){ 
    var x=cx+radius*Math.cos(radians); 
    var y=cy+radius*Math.sin(radians); 
    return({x:x,y:y}); 
}

要獲得的邊界框您arc：

var cw=canvas.width; 
var ch=canvas.height; 
var PI2=Math.PI*2; 

var left=XYonCircle(cw/2,ch/2,ch/2.5,PI2/10*7).x; 
var top=XYonCircle(cw/2,ch/2,ch/2.5,PI2*.75).y; 
var right=XYonCircle(cw/2,ch/2,ch/2.5,0).x; 
var bottom=XYonCircle(cw/2,ch/2,ch/2.5,PI2/10).y;

如果你改變你的弧，一些邊界點將位於圓弧通過的任何角度：0，PI/2，PI & PI * 3/2。

其餘的邊界點將位於弧的起點和終點。

來源

2014-01-17 15:57:02 markE

這是驚人的 - 非常感謝。 –

如何獲取畫布上下文的框尺寸？

回答

相關問題