Fabricjs: как получить начальную точку пути?

Question

Есть ли встроенный метод в fabricjs, который возвращает координаты начальной точки пути? Мне не нужны координаты ограничивающего прямоугольника.

Спасибо!

Answer 1

Оформить заказ на свойство Path.path. Это 2D-массив, содержащий элемент для каждой команды пути. Второй массив содержит команду в первом элементе, например. «M» для перемещения, следующие элементы содержат координаты.

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

Answer 2

Чтобы получить исходную точку, вы должны извлечь точку и рассчитать ее фактическое положение на холсте. В ткани 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) вычислить матрицу преобразования пути: needs: 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 вся логика находится в функции, вы можете просто запустить:

уаг матрицы = path.calcTransformMatrix(); а затем продолжить преобразование логики точки.