旋转后得到正确的左上角坐标

Question

我想显示在画布上绘制的对象的左上角。

删除按钮的左侧和顶部位置等于object.left + object.width，顶部等于object.top。

旋转对象后，删除按钮的left和top等于对象的原始位置。

有人能解释我如何获得右上角'真正'的XY坐标？

这是我的jsfiddle： http://jsfiddle.net/5KKQ2/304/

   delBtn.style.display = 'block';
    delBtn.style.left = activeEl.left + (activeEl.width * activeEl.scaleX / 2) - 25 + 'px';
    delBtn.style.top = activeEl.top - (activeEl.height * activeEl.scaleX / 2) - 15 + 'px';

Answer 1

一些三角函数会给你旋转的左上角点

这假设矩形围绕其中心点旋转

function rotatedTopLeft(x,y,width,height,rotationAngle){

    // get the center of the rectangle (==rotation point)
    var cx=x+width/2;
    var cy=y+height/2;

    // calc the angle of the unrotated TL corner vs the center point
    var dx=x-cx;
    var dy=y-cy;
    var originalTopLeftAngle=Math.atan2(dy,dx);

    // Add the unrotatedTL + rotationAngle to get total rotation
    var rotatedTopLeftAngle=originalTopLeftAngle+rotationAngle;

    // calc the radius of the rectangle (==diagonalLength/2)
    var radius=Math.sqrt(width*width+height*height)/2;

    // calc the rotated top & left corner
    var rx=cx+radius*Math.cos(rotatedTopLeftAngle);
    var ry=cy+radius*Math.sin(rotatedTopLeftAngle);

    // return the results
    return({left:rx,top:ry});
}

以下是示例代码和演示：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var PI=Math.PI;
var PI2=PI*2;

var x=125;
var y=132;
var width=50;
var height=36;

var rotationAngle=PI/6;

ctx.translate(x+width/2,y+height/2);
ctx.rotate(rotationAngle);

ctx.fillStyle='red';
ctx.strokeStyle='black';
ctx.lineWidth=5;
ctx.fillRect(-width/2,-height/2,width,height);
ctx.strokeRect(-width/2,-height/2,width,height);

ctx.rotate(-rotationAngle);
ctx.translate(-(x+width/2),-(y+height/2));

var rotatedTopLeft=rotatedTopLeft(x,y,width,height,rotationAngle);

dot(rotatedTopLeft.left,rotatedTopLeft.top,5,'gold');


function rotatedTopLeft(x,y,width,height,rotationAngle){

  // get the center of the rectangle (==rotation point)
  var cx=x+width/2;
  var cy=y+height/2;

  // calc the angle of the unrotated TL corner vs the center point
  var dx=x-cx;
  var dy=y-cy;
  var originalTopLeftAngle=Math.atan2(dy,dx);

  // Add the unrotatedTL + rotationAngle to get total rotation
  var rotatedTopLeftAngle=originalTopLeftAngle+rotationAngle;

  // calc the radius of the rectangle (==diagonalLength/2)
  var radius=Math.sqrt(width*width+height*height)/2;

  // calc the rotated top & left corner
  var rx=cx+radius*Math.cos(rotatedTopLeftAngle);
  var ry=cy+radius*Math.sin(rotatedTopLeftAngle);

  // return the results
  return({left:rx,top:ry});
}

function dot(x,y,radius,fill){
  ctx.beginPath();
  ctx.arc(x,y,radius,0,PI2);
  ctx.closePath();
  ctx.fillStyle=fill;
  ctx.fill();
}

body{ background-color: ivory; }
#canvas{border:1px solid red;}

<h4>Gold dot is at the rotated top-left corner</h4>
<canvas id="canvas" width=300 height=300></canvas>