首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在Fabric js中缩放或更改位置时,Fabric.Path对象的object.path不提供更新路径

在Fabric js中缩放或更改位置时,Fabric.Path对象的object.path不提供更新路径
EN

Stack Overflow用户
提问于 2022-08-30 04:06:00
回答 1查看 43关注 0票数 0

我正在使用面料js作为我的项目。

我有一个用例,在这个用例中,我希望一个对象沿着其他fabric对象的边界动画。类似于功率点中的运动路径。为了实现这一点,我创建了一个fabric.Path对象,并使用这个路径获取对象的所有边界点,并在这些点上动画对象。代码如下所示。

代码语言:javascript
运行
复制
<script src="./js/fabric.js"></script>
<canvas
  id="c"
  width="500"
  height="500"
  style="border: 1px solid #ccc"
></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script id="main">
  var canvas = new fabric.Canvas("c");
  var circle = new fabric.Circle({
    radius: 30,
    fill: "#f55"
  });

  canvas.add(circle);

  var line = new fabric.Path(
    "M 0 0 L 200 100 L 170 200 z",
    {
      fill: "",
      stroke: "black",
      objectCaching : true
    }
  );
  line.set({ name: "dummy" });
  canvas.add(line);

  var points = getPathValues("M 0 0 L 200 100 L 170 200 z", 1000);
   function getPathValues(path_val, samples) {
    var path = document.createElementNS(
      "http://www.w3.org/2000/svg",
      "path"
    );
    path.setAttribute("d", path_val);
    var points = [];
    var len = path.getTotalLength();
    var step = (step = len / samples);
    for (var i = 0; i <= len; i += step) {
      var p = path.getPointAtLength(i);
      points.push(p.x);
      points.push(p.y);
    }
    return points;
  }

  var i = 0;

  var interval = setInterval(function animate() {
      i = i + 2;
      if (i > points.length) {
        // clearInterval(interval);
        i = 0;
      }

      circle.left = line.left + points[i] - circle.radius;
      circle.top = line.top + points[i + 1] - circle.radius;
      canvas.renderAll();
    }, 10);

所有这些都很好,现在当我缩放或改变路径对象的位置时,我想采取改变的路径,得到更新的点,并沿这些点动画对象。现在的问题是,当缩放或更改位置时,如果path对象,则它的object.path不会自动更新。我无法得到生成边界点所需的更改路径值。

  1. 有获得Fabric.Path对象更新路径的任何方法吗?
  2. 有任何方法获取普通fabric对象的路径吗?
EN

回答 1

Stack Overflow用户

发布于 2022-08-31 18:24:27

事实上,路径数据被转换成相对于对象的平面。

您应该熟悉矩阵乘法的相关平面和基本知识,至少要熟悉这些概念。

这就是为什么比例尺等不影响它。

您需要将对象的转换矩阵(通过preTransform)应用于这些点。

我可以想象这太过分了。

这就是为什么我暴露了fabric.util.sendPointToPlane。看看这个,它会帮你省去很多头痛。

fabric.util.sendPointToPlane(point, from, to),在您的例子中,fabric.util.sendPointToPlane(point, object.calcTransformMatrix(), null)会将点发送到画布平面。

我写了一篇关于相对平面的文章,但我找不到,在织物讨论的某个地方

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/73537043

复制
相关文章

相似问题

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