[英]How to calculate x and y coordinates of a rotated 3D cube in JavaScript?
[英]how Calculate the rubberband coordinates of a rotated shape in canvas - javascript
我使用此代码段绘制椭圆。
var context = document.getElementById('canvas').getContext('2d');
function ellipse(ctx,params){
var step=(params.a > params.b) ? 1/params.a: 1/params.b,
I = 0;
ctx.save();
ctx.translate(params.centerx,params.centery);
if (params.angle) {
var radian = (params.angle * Math.PI) / 180;
ctx.rotate(radian);
}
ctx.beginPath ();
ctx.moveTo (0, params.b);
for(I+=step; I <2 * Math.PI; I+=step) ctx.lineTo (params.a * Math.sin (I), params.b * Math.cos (I));
ctx.closePath ();
ctx.fill();
ctx.restore();
}
var params = {centerx:100, centery:150, a:100, b:40, angle: -45};
ellipse(context,params);
现在在旋转45度绘制椭圆后,我有这个:
现在我想计算(x1,y1)和(x2,y2)的坐标
但我不知道怎么办?
这是计算旋转椭圆的边界框所需的数学公式:
演示: http : //jsfiddle.net/m1erickson/5yMUQ/
数学:
function rotatedEllipseBB(params){
// cache param values
var cx=params.centerx;
var cy=params.centery;
var r=params.angle*Math.PI/180;
var a=params.a;
var b=params.b;
// calc rotated ellipse width/height
var cos=Math.cos(r);
var sin=Math.sin(r);
var t1=Math.atan(-b*Math.tan(r)/a);
var t2=Math.atan(b*(cos/sin)/a);
var w= 2*(a*Math.cos(t1)*cos-b*Math.sin(t1)*sin);
var h= -2*(b*Math.sin(t2)*cos+a*Math.cos(t2)*sin);
// calc rotated ellipse TL & BR
var x1=cx-w/2;
var y1=cy-h/2;
var x2=cx+w/2;
var y2=cy+h/2;
// return results
return({x1:x1,y1:y1,x2:x2,y2:y2,width:w,height:h});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.