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()
};

MATH恢复旋转坐标

1 个答案: