移动对象时检索象限名称（原点）- Canvas、Fabric.js

Question

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

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

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

我不明白的是为什么originX, originY总是左边, top？我假设这是偏移量控件的位置？

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

移动对象时尝试记录输出的一小段：

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 永远不会 return 除了 left 和 top 之外的任何其他内容只是因为这些属性 not 指的是它在屏幕上的位置.

一个物体的原点是指它自己的坐标space，如果你想一想它的意思就更明显了应用于实际对象的类似比例的变换。

看看下面的例子。左边正方形的原点在 center/center，而右边正方形的原点在 top/left。

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>

如果你想知道你的对象占据了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>

移动对象时检索象限名称（原点）- Canvas、Fabric.js

Retrieving quadrant name (origin) when moving an object - Canvas, Fabric.js

javascript

html5-canvas

fabricjs