Fabric.Path 对象的 object.path 在 Fabric js 中缩放或更改位置时不会给出更新的路径

Question

我的项目使用 Fabric js。

我有一个用例，我希望一个对象沿着其他结构对象的边界进行动画处理。类似于 Power Point 中的运动路径。为了实现这一点，我创建了一个fabric.Path对象并使用该路径，我获取了对象的所有边界点并沿着这些点对对象进行了动画处理。代码如下所示。

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

所有这些都运行良好，现在当我缩放或更改路径对象的位置时，我想采用更改后的路径，获取更新的点并沿着这些点对对象进行动画处理。现在的问题是，当缩放或更改路径对象的位置时，它的 object.path 不会自动更新。我无法获取生成边界点所需的更改路径值。

1. 有没有办法获取Fabric.Path对象的更新路径？
2. 有什么方法可以获取普通织物对象的路径吗？

Answer 1

事实上，路径数据已被转换，使其变得相对于对象的平面。

您应该熟悉相对平面和矩阵乘法的基础知识，至少是概念。

这就是为什么规模等不会影响它。

您需要将对象的变换矩阵（通过 preTransform）应用于点。

我可以想象这太多了。

这就是我曝光的原因

fabric.util.sendPointToPlane

。检查一下，它会帮你省去很多麻烦。

fabric.util.sendPointToPlane(point, from, to)

，在您的情况下，

fabric.util.sendPointToPlane(point, object.calcTransformMatrix(), null)

会将点发送到画布平面。

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

Answer 2

如果其他人遇到此问题：更改路径后执行以下操作：

this.object.path = /* New path */
this.object.dirty = true

它为我解决了