用fabric.js绘制多边形时错误的边界坐标 [英] wrong border coords on draw a polygon with the fabric.js

问题描述

我尝试用鼠标绘制多边形，并且我在jsfiddle上找到了该示例: http://jsfiddle.net/Kienz/ujefxh7w/.

i try to draw a polygon with the mouse , and i have found that example on jsfiddle: http://jsfiddle.net/Kienz/ujefxh7w/.

问题在于，当我们完成绘制并尝试分离对象时，边界不在形状之内.

the problem is that when we finish the draw and try to selet the object, the borders are outside of the shape.

我们可以解决这个问题，或者是fabric.js错误吗?

can we fixe that or is it a fabric.js bug?

正如我们还在官方fabricjs.com/页面上看到的那样，在首页示例中，徒手画也超出了边框范围.

as we can also see on the official fabricjs.com/ page, on the front page examples, the free hand drawings are also out of the border frame.

  // initialize fabric canvas and assign to global windows object for debug
    var canvas = window._canvas = new fabric.Canvas('c');

   // Do some initializing stuff
fabric.Object.prototype.set({
    transparentCorners: false,
    cornerColor: 'rgba(102,153,255,0.5)',
    cornerSize: 12,
    padding: 7
});

// ADD YOUR CODE HERE
var mode = "add",
    currentShape;

canvas.observe("mouse:move", function (event) {
    var pos = canvas.getPointer(event.e);
    if (mode === "edit" && currentShape) {
        var points = currentShape.get("points");
        points[points.length - 1].x = pos.x - currentShape.get("left");
        points[points.length - 1].y = pos.y - currentShape.get("top");
        currentShape.set({
            points: points
        });
        canvas.renderAll();
    }
});

canvas.observe("mouse:down", function (event) {
    var pos = canvas.getPointer(event.e);
if (mode === "add") {
    var polygon = new fabric.Polygon([{
        x: pos.x,
        y: pos.y
    }, {
        x: pos.x + 0.5,
        y: pos.y + 0.5
    }], {
        fill: 'blue',
        opacity: 0.5,
        selectable: false
    });
    currentShape = polygon;
    canvas.add(currentShape);
    mode = "edit";
} else if (mode === "edit" && currentShape && currentShape.type === "polygon") {
    var points = currentShape.get("points");
    points.push({
        x: pos.x - currentShape.get("left"),
        y: pos.y - currentShape.get("top")
    });
    currentShape.set({
        points: points
    });
    canvas.renderAll();
}
});

fabric.util.addListener(window, 'keyup', function (e) {
    if (e.keyCode === 27) {
        if (mode === 'edit' || mode === 'add') {
            mode = 'normal';
            currentShape.set({
                selectable: true
            });
            currentShape._calcDimensions(false);
            currentShape.setCoords();
        } else {
            mode = 'add';
        }
        currentShape = null;
    }
     canvas.renderAll();
})

推荐答案

问题

_calcDimensions()计算多边形的宽度，高度，minX和minY，因此您可以通过此小提琴看到 http://jsfiddle.net/ujefxh7w/90/调用_calcDimensions()后，将更改多边形的中心点(使用宽度和高度计算)(在此之前，中心点的值等于顶部-左点，因为宽度和高度为零).

_calcDimensions() calculates width, height, minX and minY of the polygon, so as you can see with this fiddle http://jsfiddle.net/ujefxh7w/90/ the centerpoint of our polygon (that is calculated using width and height) will be changed after calling _calcDimensions() (before this, the centerpoint's value was equal to the top-left point because width and height were zero).

但是，我们通过减去多边形的所有左上角位置将所有点插入到多边形中，但是在调用_calcDimensions()之后，这些点将从新"(正确的)中心点开始渲染，如您所见小提琴.

However we inserted all points to the polygon by subtracting the left-top position to them, but after calling _calcDimensions() those points will be rendered by starting from the "new" (correct) centerpoint, as you can see from your fiddle.

此外，我们必须处理_calcDimensions()引入的minX和minY偏移量.如果我们不这样做，您可以设法绘制一些超出范围的形状. (例如，绘制一个坐标为[(100,100)，(150,50)，(200,200)]的三角形，第二个点将超出范围).

Moreover we have to handle minX and minY offsets introduced by _calcDimensions(). If we don't do this you can manage to draw some shapes with some area of out the bounds. (e.g. draw a triangle with those coordinates [(100,100),(150,50),(200,200)], the second point will be out of bound).

解决方案

我们必须

1. 将minX和minY偏移量添加到形状的左上角位置，并从新点的值中减去它们
2. 使用多边形的实际中心点和左上位置重新计算点的坐标

http://jsfiddle.net/ujefxh7w/115/

fabric.util.addListener(window, 'keyup', function (e) {
    if (e.keyCode === 27) {
        if (mode === 'edit' || mode === 'add') {
            mode = 'normal';

            // remove last useless point
            var points = currentShape.get("points");
            points.pop(); 
            currentShape.set({points: points});

            // call helpers
            currentShape._calcDimensions();
            currentShape.setCoords();

            // adjust shape position by using minX and minY offsets
            var minx = currentShape.get("minX");
            var miny = currentShape.get("minY");
            currentShape.set({
                left: currentShape.get("left") + minx,
                top: currentShape.get("top") + miny
            });

            // adjust points coordinates by 
            // 1- subtracting the center point coords 
            // 2- adding the left-top coords  
            // 3- subtracting minX and minY offsets
            var pCenter = currentShape.getCenterPoint();
            var l = currentShape.get("left");
            var t = currentShape.get("top");
            var adjPoints = currentShape.get("points").map(function(p) {
                return {
                    x: p.x - pCenter.x + l - minx,
                    y: p.y - pCenter.y + t - miny
                };
            });
            currentShape.set({
                points: adjPoints,
                selectable: true
            });

            canvas.setActiveObject(currentShape);

            canvas.renderAll();
        } else {
            mode = 'add';
        }
        currentShape = null;
    }
});

这篇关于用fabric.js绘制多边形时错误的边界坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！