面料js多边形setCoords

Sophie D 发表于 Dev

苏菲·D

我有一个关于fabric.js和多边形对象的问题。在这个小提琴中，我有一个问题示例：单击我

首先绘制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（），但没有任何反应。

也许你可以帮我。：）谢谢！

安德里亚·博加齐（Andrea Bogazzi）

还回覆至：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);
    	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
    });
}

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。