Question

我不明白问题究竟在哪里。最有可能是在OOP中。

所以我创建了自己的类来通过FabricJS使用canvas，并创建添加门的方法（我只是做橱柜）。此方法创建fabric.Rect。我把这种方法称为3次，并且应该是3门（rects）。但是当我尝试选择其中一个时，canvas返回的只是最后一个。

查看示例jsfiddle，尝试选择前两个门中的一个。

    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是一个数字，并且您将其作为字符串传递。您可以查看文档：{{3}}和更新的小提琴：http://fabricjs.com/docs/fabric.Rect.html#strokeWidth

在函数内创建FabricJS对象

1 个答案: