移动对象时的象限名称（原点） - Canvas，Fabric.js

Question

感谢您花时间阅读，并可能提供帮助。所以我开始尝试使用 canvas 和 fabric.js - 从来没有这样的经验。

我遇到了一个绊脚石，那就是获取原点，或者更确切地说是移动物体的位置。看起来 originX, originY 总是相同的值，不管对象被移动到哪里。

对于视觉指示器，我创建了一个图像：

我不明白为什么 originX 和 originY 总是在左边，而在顶部？我假设这是偏移控件的位置？

我希望他们是一些内置的 canvas/fabric 方法，如果不能，你们中的任何人都可以指出我在尝试输出对象被丢弃时的正确来源的正确方向吗？

移动对象时尝试记录输出的小sn-p：

canvas.on('object:moving', e => {
     
      console.log("moving target, X: " + e.target.originX);
      console.log("moving target, Y: " + e.target.originY);

      console.log("moving active obj, X: " + canvas.getActiveObject().originX);
      console.log("moving active obj, Y: " + canvas.getActiveObject().originY);

      const coords = e.target.calcCoords();
      const trans = e.target.calcTransformMatrix();

      console.log(coords);
      console.log(trans);
      console.log(e.target.getOrigin());
  });

Answer 1

除非您修改了 fabricjs 对象的来源，否则查询它的 .originX 和 .originY 将永远不会返回 除了 left 和 top 之外的其他任何东西，仅仅是因为这些属性不指的是它在屏幕上的位置。

一个对象的原点是指它自己的坐标空间，如果你考虑一下它的含义就会变得更加明显 应用于实际对象的比例变换。

看看下面的例子。左侧正方形的原点位于中心/中心，而右侧正方形的原点位于顶部/左侧。

let canvas = new fabric.Canvas("c1");
let context = document.getElementById("c1").getContext("2d");
let rectA = new fabric.Rect({
  width: 50,
  height: 50,
  fill: "blue",
  left: 50,
  top: 50,
  originX: "center",
  originY: "center"
});
canvas.add(rectA);

let rectB = new fabric.Rect({
  width: 50,
  height: 50,
  fill: "blue",
  left: 150,
  top: 50,
  originX: "left",
  originY: "top"
});

canvas.add(rectB);

let scale = 1;
let a = 0;

function updateCanvas() {
  rectA.scale(scale);
  rectB.scale(scale);
  scale = 1 + Math.sin(a);
  a += 0.1;
  canvas.renderAll();

  context.beginPath();
  context.arc(50, 50, 2, 0, 2 * Math.PI, false);
  context.fillStyle = 'red';
  context.fill();
  context.lineWidth = 2;
  context.strokeStyle = 'red';
  context.stroke();

  context.beginPath();
  context.arc(150, 50, 2, 0, 2 * Math.PI, false);
  context.fill();
  context.stroke();
}

let interval = setInterval(updateCanvas, 100);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/451/fabric.min.js" integrity="sha512-qeu8RcLnpzoRnEotT3r1CxB17JtHrBqlfSTOm4MQzb7efBdkcL03t343gyRmI6OTUW6iI+hShiysszISQ/IahA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<canvas id="c1" width="400" height="200"></canvas>

如果你想知道你的对象占据了画布的哪个象限，你必须手动 根据对象的坐标进行计算。

这是另一个示例 - 尝试拖动圆圈。

var canvas = new fabric.Canvas('c1', {
  backgroundColor: "#cccccc"
});
canvas.add(new fabric.Circle({
  radius: 30,
  fill: '#f55',
  top: 100,
  left: 100
}));

canvas.on('object:moving', e => {
  if (e.target.left < canvas.width / 2) {
    if (e.target.top < canvas.height / 2) {
      console.log("TopLeft");
    } else {
      console.log("BottomLeft");
    }
  } else {
    if (e.target.top < canvas.height / 2) {
      console.log("TopRight");
    } else {
      console.log("BottomRight");
    }
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/451/fabric.min.js" integrity="sha512-qeu8RcLnpzoRnEotT3r1CxB17JtHrBqlfSTOm4MQzb7efBdkcL03t343gyRmI6OTUW6iI+hShiysszISQ/IahA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<canvas id="c1" width="400" height="200"></canvas>