面料JS多邊形setCoords

Question

我有一個關於fabric.js和多邊形對象的問題。 我有我的問題的一個例子，這個小提琴： Click me

前4個fabric.Circle子對象稱爲linePoint繪製。

的linePoint對象具有一個額外的X（同左）和y（同上）的座標和參考哪個多邊形它們屬於：

fabric.LinePoint = fabric.util.createClass(fabric.Circle, 
{ 
    initialize: function (options) { 
     options || (options = {}); 
     this.callSuper('initialize', options); 
     options && 
     this.set('type', 'line_point'), 
     this.set('x', this.left), 
     this.set('y', this.top), 
     this.set('polygon', options.polygon) 
    }, 
    setPointCoordinates: function(new_left, new_top) { 
     this.set('x', new_left); 
     this.set('y', new_top); 
     this.set('left', new_left); 
     this.set('top', new_top); 

    } 

隨着現在給定的x和y座標有是在點之間繪製的多邊形。

問題是現在，當你移動的圓，多邊形正確地移動，但其邊界（或我不知道如何準確地稱呼它）將保持相同的小矩形，因爲它是。

我想太更新多邊形COORDS，我試過.setCoords（），但什麼都沒有發生。

也許你能幫助我。 ：） 謝謝！

Answer 1

在回答也是： https://groups.google.com/forum/#!topic/fabricjs/XN1u8E0EBiM

這是修改後的提琴： https://jsfiddle.net/wum5zvwk/2/

fabric.LinePoint = fabric.util.createClass(fabric.Circle, 
 
{ 
 
    initialize: function (options) { 
 
     options || (options = {}); 
 
     this.callSuper('initialize', options); 
 
     this.set('type', 'line_point'), 
 
     this.set('x', this.left), 
 
     this.set('y', this.top), 
 
     this.set('polygon', options.polygon) 
 
    }, 
 
    setPointCoordinates: function(new_left, new_top) { 
 
     this.set('x', new_left); 
 
     this.set('y', new_top); 
 
     this.set('left', new_left); 
 
     this.set('top', new_top); 
 

 
    } 
 
}); 
 

 
var canvas = new fabric.Canvas('canvas'); 
 

 
fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center'; 
 
document.getElementById("canvas").tabIndex = 1000; 
 
drawPolygonToCanvas(); 
 
canvas.on('object:moving', function(event) { 
 
    var object = event.target; 
 
    switch(object.type) { 
 
    case 'line_point': 
 
    //move polygon 
 
     object.setPointCoordinates(object.left, object.top); 
 
    \t object.polygon.setCoords(); 
 
     object.polygon.initialize(object.polygon.points); 
 
     object.polygon.top += object.polygon.height/2; 
 
     object.polygon.left += object.polygon.width/2; 
 
    \t canvas.renderAll(); 
 
    break; 
 
    } 
 
}); 
 

 

 
function drawPolygonToCanvas() 
 
{ 
 
    //creting end_points and set them 
 
     old_position = canvas.getPointer(event.e); 
 
     var end_point_1 = createLinePoint(100, 100); 
 
     var end_point_2 = createLinePoint(100, 150); 
 
     var end_point_3 = createLinePoint(150, 150); 
 
     var end_point_4 = createLinePoint(150, 100); 
 

 
     end_points_in_use = [end_point_1, end_point_2, end_point_3, end_point_4]; 
 

 
     canvas.add(end_point_1, end_point_2, end_point_3, end_point_4); 
 
     drawPoly(end_points_in_use); 
 
     canvas.deactivateAll(); 
 
     canvas.renderAll(); 
 

 
} 
 

 
function drawPoly(point_array) 
 
{ 
 
    var poly = new fabric.Polygon(point_array, { 
 
     left: (100 + ((150 - 100) /2)), 
 
     top: (100 + ((150 - 100) /2)), 
 
     fill: 'lightblue', 
 
     lockScalingX: true, 
 
     lockScalingY: true, 
 
     lockMovementX: true, 
 
     lockMovementY: true, 
 
     perPixelTargetFind: true, 
 
     opacity: 0.5, 
 
     type: 'polygon' 
 
    }); 
 
    
 
    for (var i = 0; i < point_array.length; i++) { 
 
     point_array[i].polygon = poly; 
 
    } 
 
    canvas.add(poly); 
 
    poly.sendToBack(); 
 
} 
 

 

 
function createLinePoint(left, top) { 
 
    return new fabric.LinePoint({ 
 
     left:   \t \t left, 
 
     top:    \t \t top, 
 
     strokeWidth:  \t \t 2, 
 
     radius:   \t \t 15, 
 
     fill:   \t \t '#fff', 
 
     stroke:   \t \t '#666', 
 
     related_poly_point: 0, 
 
     lockScalingX:  true, 
 
     lockScalingY:  true 
 
    }); 
 
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script> 
 
<div id="canvas-wrapper" style="position:relative;width:704px;float:left;"> 
 
    <canvas id="canvas" width="700" height="600" style="border:1px solid #000000;"></canvas> 
 
</div>

修改多邊形點是不夠的，有調整的邊界框。我能想到的easies事情是用新的點座標重新初始化多邊形。