MATH 还原旋转坐标

Question

情况：

画布包含一个可以旋转、缩放和平移（移动）的图像。 该图像是一个 SVG 内部有许多路径，因此必须检索原始坐标以检查哪个路径封装了鼠标。

SVG 在画布上呈现。

      //calculates the distance between two points
      var distance = function(x1, y1, x2, y2) {
        return Math.sqrt(Math.pow(Math.abs(x1 - x2), 2),
            Math.pow(Math.abs(y1 - y2), 2));
      };

      //defines the center of the image
      //this is also the rotational point
      var center = {
        x : target.getWidth() / 2,
        y : target.getHeight() / 2
      };

      //defines the click location
      var click = {
        x : event.layerX / target.getScaleX() - target.getLeft(),
        y : event.layerY / target.getScaleY() - target.getTop()
      };

上面的代码确保x 和y 是路径中使用的正确值，前提是没有旋转。

所以基本上：假设用户已将图像旋转 45 度并点击图像：点击坐标需要向后旋转 45 度才能获得所需的坐标。但我已经有好几年没有做过这样的数学了……

图像的原点（旋转点）是它的中心。

Answer 1

您正在寻找toLocalPoint，它会为您完成大部分工作：http://fabricjs.com/docs/fabric.Object.html#toLocalPoint

你可以see in the source of the function，它不考虑缩放，但它会旋转和平移对象。

var p = canvas.getPointer(event);
var loc = target.toLocalPoint(new fabric.Point(p.x,p.y), "left", "top");

var pos_in_target = {
    x : loc.x / target.getScaleX(),
    y : loc.y / target.getScaleY()
};