首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Fabric JS:当直线在一个组中移动时计算线坐标

Fabric JS:当直线在一个组中移动时计算线坐标
EN

Stack Overflow用户
提问于 2020-02-26 14:31:06
回答 1查看 941关注 0票数 1

在这个jsFiddle中,我有一条面料线和一条直线。我的目标是得到直线坐标时,它自己移动或在一个组与rect。

如果您只选择这条线并移动它,坐标就会正确地显示出来(我从这里获得了这个函数)。

但是,如果同时选择行和rect,则函数不能工作。我使用e.target._objects[0]来获得这条线,这似乎很好。

当它在组中移动时,如何得到线坐标?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-03-02 21:00:51

组内的物体相对于组的位置,它们的坐标是相对于组的中心重新计算的。当它在组中移动时,应该考虑这些因素。

让我们做一个简单的例子,只有左上角坐标。这条线的绝对左上角坐标由这个公式给出:

代码语言:javascript
运行
复制
'Absolute Line TL X' = 'Group top X left value' + (('Group width' / 2) + 'Line top left X value') 
'Absolute Line TL Y' = 'Group top Y left value' + (('Group height' / 2) + 'Line top left Y value') 

请检查这个简化的CodeSandbox示例:https://codesandbox.io/s/stackoverflow-60416193-fabric-js-362-qpofr

代码语言:javascript
运行
复制
canvas.on("object:moving", function(e) {
  var target;
  var coords;

  if (e.target._objects) {
    target = e.target._objects[0];
    coords = calcLineCoords(target, e.target);
  } else {
    target = e.target;
    coords = calcLineCoords(target);
  }

  caption.text = coords + "";
});

function calcLineCoords(line, groupContainer) {
  const { tl } = line.calcCoords();
  let coordsStart = tl;

  if (!!groupContainer) {
    const groupCoordinates = groupContainer.calcCoords();
    let groupCoordsStart = groupCoordinates.tl;

    var lineTopLeftX =
      groupCoordsStart.x + (groupContainer.get("width") / 2 + coordsStart.x);
    var lineTopLeftY =
      groupCoordsStart.y + (groupContainer.get("height") / 2 + coordsStart.y);

    return [lineTopLeftX, lineTopLeftY];
  } else {
    return [coordsStart.x, coordsStart.y];
  }
}
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/60416193

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档