面料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事情是用新的点坐标重新初始化多边形。