Question

我试图给页面的用户提供将他/她自己的多边形绘制到图像上的可能性。我使用了fabric.js（1.5.0），我从那里的例子中借了一些代码，但是，在我的例子中，创建的多边形的边界框与多边形不匹配。 FireBug显示多边形的点是局部的而不是全局的，我认为问题的原因是什么。我找到了关键的线条，但有点迷失......

See the jsfiddle below for my example

https://jsfiddle.net/y9kqjLhk/

有什么想法吗？

由于

Answer 1

几个月前我也讨厌同样的问题，因为我想用鼠标点击绘制一个动态多边形。我给你一个关于jsfiddle的例子，你可以完全按照你的需要做，唯一的区别是我使用的是以前版本的fabricjs。我希望它有所帮助，祝你好运。

这是代码，下面我给出了实时jsfiddle示例：

var roof = null;
var roofPoints = [];
var lines = [];
var lineCounter = 0;
var drawingObject = {};
drawingObject.type = "";
drawingObject.background = "";
drawingObject.border = "";

function Point(x, y) {
    this.x = x;
    this.y = y;
}


$("#btnRoof").click(function () {
    if (drawingObject.type == "roof") {
        drawingObject.type = "";
        lines.forEach(function(value, index, ar){
             canvas.remove(value);
        });
        //canvas.remove(lines[lineCounter - 1]);
        roof = makeRoof(roofPoints);
        canvas.add(roof);
        canvas.renderAll();
    } else {
        drawingObject.type = "roof"; // roof type
    }
});


// canvas Drawing
  var canvas = new fabric.Canvas('canvas',{backgroundColor : 'yellow'});
var x = 0;
var y = 0;

fabric.util.addListener(window,'dblclick', function(){ 
        drawingObject.type = "";
        lines.forEach(function(value, index, ar){
             canvas.remove(value);
        });
        //canvas.remove(lines[lineCounter - 1]);
        roof = makeRoof(roofPoints);
        canvas.add(roof);
        canvas.renderAll();

    console.log("double click");
    //clear arrays
     roofPoints = [];
     lines = [];
     lineCounter = 0;

});

canvas.on('mouse:down', function (options) {
    if (drawingObject.type == "roof") {
        canvas.selection = false;
        setStartingPoint(options); // set x,y
        roofPoints.push(new Point(x, y));
        var points = [x, y, x, y];
        lines.push(new fabric.Line(points, {
            strokeWidth: 1,
            selectable: false,
            stroke: 'red'
        }).setOriginX(x).setOriginY(y));
        canvas.add(lines[lineCounter]);
        lineCounter++;
        canvas.on('mouse:up', function (options) {
            canvas.selection = true;
        });
    }
});
canvas.on('mouse:move', function (options) {
    if (lines[0] !== null && lines[0] !== undefined && drawingObject.type == "roof") {
        setStartingPoint(options);
        lines[lineCounter - 1].set({
            x2: x,
            y2: y
        });
        canvas.renderAll();
    }
});

function setStartingPoint(options) {
    var offset = $('#canvas').offset();
    x = options.e.pageX - offset.left;
    y = options.e.pageY - offset.top;
}

function makeRoof(roofPoints) {

    var left = findLeftPaddingForRoof(roofPoints);
    var top = findTopPaddingForRoof(roofPoints);
    roofPoints.push(new Point(roofPoints[0].x,roofPoints[0].y))
    var roof = new fabric.Polyline(roofPoints, {
    fill: 'rgba(0,0,0,0)',
    stroke:'#7F7F7F'
    });
    roof.set({

        left: left,
        top: top,

    });


    return roof;
}

function findTopPaddingForRoof(roofPoints) {
    var result = 999999;
    for (var f = 0; f < lineCounter; f++) {
        if (roofPoints[f].y < result) {
            result = roofPoints[f].y;
        }
    }
    return Math.abs(result);
}

function findLeftPaddingForRoof(roofPoints) {
    var result = 999999;
    for (var i = 0; i < lineCounter; i++) {
        if (roofPoints[i].x < result) {
            result = roofPoints[i].x;
        }
    }
    return Math.abs(result);
}

jsfiddle：http://jsfiddle.net/tornado1979/svb3q6xL/1/

点击标签开始绘图并在鼠标双击，画布上的enywhere上停止绘图。

Fabric.js：无法获取边界框以匹配它的（动态）对象

1 个答案: