Canvas/fabricjs: 如何对项目进行分组？

Question

我在对元素进行分组时出错。该错误仅在圆圈上可见。圆是长方形。如何对项目进行分组？

var activegroup = canvas.getActiveGroup();
var objectsInGroup = activegroup.getObjects();
activegroup.clone(function (newgroup) {
    canvas.discardActiveGroup();
    objectsInGroup.forEach(function (object) {
        canvas.remove(object);
    });
    canvas.add(newgroup);
});

The full code

Video bug

Answer 1

您在创建圆形对象时遇到的问题是您输入的类型是 'rect'，替换为 'circle'。

} else if (position.drawingType == "circle") {
                var circle = new fabric.Circle({
                    id: position.i++,
                    type: "circle",
                    radius: Math.abs(position.firstClickPositionX < position.lastClickPositionX ? position.firstClickPositionX - position.lastClickPositionX : position.lastClickPositionX - position.firstClickPositionX) / 2,
                    fill: 'red',
                    left: position.firstClickPositionX < position.lastClickPositionX ? position.firstClickPositionX : position.lastClickPositionX,
                    top: position.firstClickPositionY < position.lastClickPositionY ? position.firstClickPositionY : position.lastClickPositionY,
                    scaleY: 1,
                    scaleX: 1
                });
                canvas.add(circle);

检查更新fiddle

Canvas/fabricjs: 如何对项目进行分组？

Canvas/fabricjs: How to group items?

html

javascript

canvas

fabricjs

web