Question

我试图在kineticjs中获得旋转元素的角落。我找到了一个类似于fabricjs的线程，想知道是否有类似的kineticjs解决方案。

Find the coordinates of the corners of a rotated object in fabricjs

我有一个图像，图像中有一个负偏移，因此原点位于中心。图层获得旋转。

var layer = new Kinetic.Layer({rotationDeg: 45});
var image = new Kinetic.Image({width: 100, height: 100, offsetX: -50, offsetY: -50});
layer.add(Image);

谢谢

Answer 1

你可以使用一些三角函数：

function findRotatedCornerXY(rectX,rectY,rectWidth,rectHeight,degreeAngle,
                             originalCornerX,originalCornerY){

    // calc rotation centerpoint
    var cx=rectX+rectWidth/2;
    var cy=rectY+rectHeight/2;

    // calc length from rect center to any rect corner
    var r=Math.sqrt(rectWidth/2*rectWidth/2+rectHeight/2*rectHeight/2);

    // calc unrotated angle from center to corner
    var dx=originalCornerX-cx;
    var dy=originalCornerY-cy;
    var originalAngle=Math.atan2(dy,dx);

    // calc new angle of rotated corner
    var radianAngle=degreeAngle*Math.PI/180;
    var newAngle=originalAngle+radianAngle;

    // calc XY of rotated corner
    var rx = cx + r * Math.cos(newAngle);
    var ry = cy + r * Math.sin(newAngle);

    // return the results
    return({x:rx,y:ry});
}

如何获得旋转元素角的坐标？

1 个答案: