fabric js Polygon setCoords

Question

我对fabric.js和polygon-object有疑问。 我在这个小提琴中有一个问题的例子： 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/

＆＃13;

＆＃13;

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);
    	object.polygon.setCoords();
      object.polygon.initialize(object.polygon.points);
      object.polygon.top += object.polygon.height / 2;
      object.polygon.left += object.polygon.width / 2;
    	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:           		 left,
        top:            		 top,
        strokeWidth:    		 2,
        radius:         		 15,
        fill:           		 '#fff',
        stroke:         		 '#666',
        related_poly_point:  0,
        lockScalingX:        true,
        lockScalingY:        true
    });
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

修改多边形点不足以调整边界框。我能想到的最简单的事情就是用新的点坐标重新初始化多边形。