fabric.js - 如果属性定义在新的 fabric.Circle() 括号之外，则圆圈不起作用

Question

当我在括号中创建一个带有属性的新圆对象时，当需要生成一个圆时没有出现问题。（旧方法）

function vanillaObjectFunc(type) {

    if (type === 'Rect') {
        var tObject = new fabric.Rect({
            width: 50,
            height: 50,
            opacity: 0.8,
            fill: 'black',
            left: canvasB.width / 2,
            top: canvasB.height / 2
        });
    } else {
        var tObject = new fabric.Circle({
            radius: 20,
            opacity: 0.8,
            fill: 'black',
            left: canvasB.width / 2,
            top: canvasB.height / 2
        });
    }

    canvasB.getObjects();
    canvasB.add(tObject);
    canvasB.selection = false;
    canvasB.renderAll();
    canvasB.calcOffset();
}

但现在在创建圆对象并在 canvas 上添加圆后定义所有属性的动态函数中，应该看起来像：（新方式）

function newObjectFunc(type) {

    var tObject = new fabric[type]({});

    tObject['opacity'] = 0.8;
    tObject['fill'] = 'black';
    tObject['left'] = canvasA.width / 2;
    tObject['top'] = canvasA.height / 2;


    if (type == 'Circle') {
        tObject['radius'] = 100;
    } else if (type == 'Rect') {
        tObject['width'] = 50;
        tObject['height'] = 50;
    }

    canvasA.getObjects();
    canvasA.add(tObject);
    canvasA.selection = false;
    canvasA.renderAll();
    canvasA.calcOffset();
}

看起来很简单，但是有一些奇怪的问题，因为圆没有生成，所以我没有找到原因。

属性相同。 Console.log 圆形对象（新方法）看起来也是正确的。

https://jsfiddle.net/Sascha/052jnLu6/2/

我在这里缺少什么？

Answer 1

在这种情况下，您应该避免直接属性赋值，而是使用 fabric.Object.set()：

tObject.set({
    opacity: 0.8,
    fill: 'black',
    left: canvasA.width / 2,
    top: canvasA.height / 2
});

if (type == 'Circle') {
    tObject.set('radius', 100);
} else if (type == 'Rect') {
    tObject.set({
        width: 50,
        height: 50
    });
}

您会找到更新的 fiddle here。

fabric.js - 如果属性定义在新的 fabric.Circle() 括号之外，则圆圈不起作用

fabric.js - Circle don't work if properties defined outside of new fabric.Circle() brackets

javascript

canvas

fabricjs