transformMatrixを使用した変換ポイントはfabricJSでどのように機能しますか？

Question

fabric.Polygonのコーナーにポイント（fabric.Circleで作成）を配置しようとしています。ポリゴンは、ユーザによって移動、拡大縮小または回転されてもよい。しかし、それぞれの修正の後、私はそこに私の円を配置するためにポリゴンの新しい座標を持っていたい。

このトピックの深いところを掘り下げながら、私はthis変換マトリックスの素晴らしい説明を見つけました。私はそれが私が達成したいもののための完璧な解決だと思った。しかし、あなたがフィドルで見ることができるように、私のポイントは常にポリゴンから離れています。

私は等の幾何学的変換にしっかりじゃないとして、私は誰かが私の誤りを見つけると私は:)感謝を欠けているものを私に伝えることができると思います。

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

ない幾何学的な問題。 幾何学的部分はあなたによって解決されました。 http://fabricjs.com/docs/fabric.Polygon.html

あなたがその転換の前に戻ってオフセットを追加する必要がキャンバスの位置を計算するには：あなたはあなたfabricjsから内部ポリゴンクラスを見たい場合は、すべての点がオフセットますcalcDimension機能としてそのポリゴンに気づくでしょう。

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>