在函数内部创建 FabricJS 对象

Question

我不明白问题到底出在哪里。很可能它在 OOP 中。

所以我创建了自己的 class 通过 FabricJS 与 canvas 一起工作，并创建了添加门的方法（我只是做橱柜）。此方法创建 fabric.Rect。我调用了这个方法 3 次，得到了 3 个门（矩形），这是应该的。但是当我尝试 select 其中之一时 canvas returns 只有最后一个。

看例子jsfiddle，尝试select前两扇门中的一扇。

    function Dveri_kupe(options){
    var defaultOptions = {
        doorWidth: 200,
        doorHeight: 400,
        doorDivisionWidth: 5,
        totalWidth: 735,
        totalHeight: 500,
        startOffsetTop: 50,
        startOffsetLeft: 50,
        strokeColor: "#aaa",
        fillStyle: "#ccc",
        lineWidth: "5"
    }
    for(var option in defaultOptions) this[option] = options && options[option]!==undefined ? options[option] : defaultOptions[option];

    var this_ = this;
    this.doorArr = []

    canvas = this._canvas = new fabric.Canvas(options.canvasID);
    canvas.on('mouse:down', function(options) {
        if (options.target) {
            console.log('Object. ID = ' + options.target.id + " ", options.target);
        }
    });

    this.addDoor = function(options){
        var doorQuan = this.doorArr.length;

        console.log("Door add: id = dver" + doorQuan)

        this.doorArr[doorQuan] = new fabric.Rect({
            left: this.startOffsetLeft + this.doorWidth * doorQuan,
            top: this.startOffsetTop,
            fill: this.fillStyle,
            width: this.doorWidth,
            height: this.doorHeight,
            strokeWidth: this.lineWidth,
            stroke: this.strokeColor,
            id: "dver" + doorQuan
        });

        canvas.add(this.doorArr[doorQuan]);

        return doorQuan;
    }

    this.tellMeAStory = function(){
        console.log(canvas)
        console.log(this.doorArr)
    }
};

var dveri_kupe;
window.onload = function(){
    dveri_kupe = new Dveri_kupe({canvasID : "shkaf"});
    var doorQuan = 3;
    for(var i = 0; i < doorQuan; i++){
        // console.log(dveri_kupe.addDoor())
        dveri_kupe.addDoor()
    }
}

谢谢

Answer 1

稍作更正：

var defaultOptions = {
    doorWidth: 200,
    doorHeight: 400,
    doorDivisionWidth: 5,
    totalWidth: 735,
    totalHeight: 500,
    startOffsetTop: 50,
    startOffsetLeft: 50,
    strokeColor: "#aaa",
    fillStyle: "#ccc",
    lineWidth: 5
}

Fabric.js 期望 strokeWidth 是一个数字，而您将其作为字符串传递。您可以查看文档：http://fabricjs.com/docs/fabric.Rect.html#strokeWidth and the updated fiddle: https://jsfiddle.net/w2e17803/2/

在函数内部创建 FabricJS 对象

Creating FabricJS object inside function

javascript

oop

fabricjs