Как преобразующие точки с transformMatrix работают в fabricJS?

Question

Я пытаюсь разместить точки (сделанные через fabric.Circle) по углам fabric.Polygon. Многоугольник может перемещаться, масштабироваться или поворачиваться пользователем. Однако после каждой модификации я хочу, чтобы новые координаты полигона размещали мои круги.

В процессе углубления в эту тему я нашел this отличное объяснение трансформационных матриц. Я думал, что это идеальное решение для того, чего я хочу достичь. Но, как вы можете видеть в Fiddle, мои очки всегда удаляются от моего полигона.

Поскольку я не уверен в геометрической трансформации и т. Д. Я надеюсь, что кто-то найдет мою ошибку и скажет мне, что мне не хватает :) Спасибо.

var canvas = new fabric.Canvas("c", {selection: false}); 
 

 
var polygon = new fabric.Polygon([ 
 
    new fabric.Point(200, 50), 
 
    new fabric.Point(250, 150), 
 
    new fabric.Point(150, 150) 
 
]); 
 

 
polygon.on("modified", function() { 
 
    var matrix = this.calcTransformMatrix(); 
 
    var transformedPoints = this.get("points").map(function(p){ 
 
    return fabric.util.transformPoint(p, matrix); 
 
    }); 
 
    var circles = transformedPoints.map(function(p){ 
 
    return new fabric.Circle({ 
 
     left: p.x, 
 
     top: p.y, 
 
     radius: 3, 
 
     fill: "red", 
 
     originX: "center", 
 
     originY: "center", 
 
     hasControls: false, 
 
     hasBorders: false, 
 
     selectable: false 
 
    }); 
 
    }); 
 
    
 
    this.canvas.clear().add(this).add.apply(this.canvas, circles).setActiveObject(this).renderAll(); 
 
}); 
 

 
canvas.add(polygon).renderAll();

canvas { 
 
    border: 1px solid; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.js"></script> 
 
<p> 
 
Move, scale and rotate the polygon. The three red dots should match with the corners of the polygon after each modification. 
 
</p> 
 
<canvas id="c" width="600" height="400"></canvas>

---

Вопросы, относящиеся к SO:

• How to get polygon points in Fabric.js
• Truly rotate center of equilateral triangle in Fabric.js
• How do I transform a particular point which has been modified and update the points array of polygon?
• FabricJs and Polygon transformed coordinates
• How to multiply each point with object's transform matrix?
• How do i get point coordinates after object modified?

Answer 1

Не совсем геометрическая задача. Геометрическая часть была решена вами. Если вы посмотрите на внутреннем классе полигона от fabricjs можно заметить, что полигон в качестве функции calcDimension где каждая точка получает смещение: http://fabricjs.com/docs/fabric.Polygon.html

Чтобы вычислить положение холста вы должны добавить, что смещение обратно до трансформации.

var canvas = new fabric.Canvas("c", {selection: false}); 
 

 
var polygon = new fabric.Polygon([ 
 
    new fabric.Point(200, 50), 
 
    new fabric.Point(250, 150), 
 
    new fabric.Point(150, 150) 
 
]); 
 

 
polygon.on("modified", function() { 
 
    var matrix = this.calcTransformMatrix(); 
 
    var transformedPoints = this.get("points") 
 
    .map(function(p){ 
 
    return new fabric.Point(p.x - polygon.minX -polygon.width/2, p.y - polygon.minY - polygon.height/2); 
 
    }) 
 
    .map(function(p){ 
 
    return fabric.util.transformPoint(p, matrix); 
 
    }); 
 
    var circles = transformedPoints.map(function(p){ 
 
    return new fabric.Circle({ 
 
     left: p.x, 
 
     top: p.y, 
 
     radius: 3, 
 
     fill: "red", 
 
     originX: "center", 
 
     originY: "center", 
 
     hasControls: false, 
 
     hasBorders: false, 
 
     selectable: false 
 
    }); 
 
    }); 
 
    
 
    this.canvas.clear().add(this).add.apply(this.canvas, circles).setActiveObject(this).renderAll(); 
 
}); 
 

 
canvas.add(polygon).renderAll();

canvas { 
 
    border: 1px solid; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.js"></script> 
 
<p> 
 
Move, scale and rotate the polygon. The three red dots should match with the corners of the polygon after each modification. 
 
</p> 
 
<canvas id="c" width="600" height="400"></canvas>