移动对象时检索象限名称(原点)-画布，Fabric.js [英] Retrieving quadrant name (origin) when moving an object - Canvas, Fabric.js

问题描述

感谢您花时间阅读，并可能对您有所帮助。所以我开始尝试画布和Fabric.js--什么体验都没有。

我遇到了一个绊脚石，那就是获取原点，或者更确切地说，是移动物体的位置。无论对象移动到何处，OriginX，OriginY似乎始终是相同的值。

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

我不明白的是，为什么OriginX和OriginY总是位于左侧，而位于顶部？我假设这是Offset？的控件的位置？

我希望他们的方法是内置的画布/织物方法，如果不是这样的话，你们中的任何人能给我指个正确的方向，试图输出物体被丢弃时的正确来源吗？

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

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

推荐答案

除非修改Fabricjs对象的原点，否则查询它的.originX和.originY永远不会返回 仅因为和顶部不指向而使和顶部之外的任何其他属性分别离开。

一个物体的原点指的是它自己的坐标空间，如果你想一想，它的意义就会变得更加明显 应用于实际对象的类似缩放的变换。

看一下下面的示例。左边正方形的原点在中心/中心，而右边正方形的原点在上/左。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

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>

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

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

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

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>

这篇关于移动对象时检索象限名称(原点)-画布，Fabric.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！