Question

fabricjs中是否有任何内置方法返回路径起点的坐标？我不需要边界矩形的坐标。

谢谢！

Answer 1

要获得起点，您必须提取点并计算其在画布上的实际位置。从结构1.6.0开始，你可以使用所有功能，对于以前的版本，你需要更多的逻辑：

示例路径：

var myPath = new fabric.Path('M 25 0 L 300 100 L 200 300 z');

点：

var x = myPath.path[0][1];
var y = myPath.path[0][2];
var point = {x: x, y: y};

逻辑：

1）计算路径变换矩阵：需求：path.getCenterPoint（）; path.angle，path.scaleX，path.scaleY，path.skewX，path.skewY，path.flipX，path.flipY。

  var degreesToradians = fabric.util.degreesToradians,
      multiplyMatrices = fabric.util.multiplyTransformMatrices,
      center = this.getCenterPoint(),
      theta = degreesToRadians(path.angle),
      cos = Math.cos(theta),
      sin = Math.sin(theta),
      translateMatrix = [1, 0, 0, 1, center.x, center.y],
      rotateMatrix = [cos, sin, -sin, cos, 0, 0],
      skewMatrixX = [1, 0, Math.tan(degreesToRadians(path.skewX)), 1],
      skewMatrixY = [1, Math.tan(degreesToRadians(path.skewY)), 0, 1],
      scaleX = path.scaleX * (apth.flipX ? -1 : 1),
      scaleY = path.scaleY * (path.flipY ? -1 : 1),
      scaleMatrix = [path.scaleX, 0, 0, path.scaleY],
      matrix = path.group ? path.group.calcTransformMatrix() : [1, 0, 0, 1, 0, 0];
  matrix = multiplyMatrices(matrix, translateMatrix);
  matrix = multiplyMatrices(matrix, rotateMatrix);
  matrix = multiplyMatrices(matrix, scaleMatrix);
  matrix = multiplyMatrices(matrix , skewMatrixX);
  matrix = multiplyMatrices(matrix , skewMatrixY);

//此时你有变换矩阵。

现在进行渲染路径处理：

画布由矩阵转换，然后使用您可以在path.pathOffset.x和path.pathOffset.y中找到的偏移量绘制路径点。

所以拿第一点，减去偏移量。

point.x -= path.pathOffset.x;
point.y -= path.pathOffset.y;

然后

var finalpoint = fabric.util.transformPoint(point, matrix);

在新的结构1.6.0中，所有逻辑都在一个函数中，你可以运行：

var matrix = path.calcTransformMatrix（）;然后继续转换点逻辑。

Answer 2

签出Path.path属性。它是一个2D数组，包含每个路径命令的元素。第二个数组将命令保存在第一个元素中，例如＆＃39; M＆＃39;对于move，以下元素包含坐标。

var myPath = new fabric.Path('M 25 0 L 300 100 L 200 300 z');

var startX = myPath.path[0][1];
var startY = myPath.path[0][2];

Fabricjs：如何获得路径的起点？

2 个答案: