如何计算画布中旋转形状的橡皮带坐标 - javascript

Question

我使用此片段绘制椭圆。

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）

的坐标

但我不知道怎么做？

Answer 1

这里是计算旋转椭圆的边界框所需的数学运算：

演示：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});
}