移动对象时检索象限名称(原点)-画布，Fabric.js-前端问题

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

本文介绍了移动对象时检索象限名称(原点)-画布，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>