分组和取消分组 Fabric.js 对象

2022-01-17 00:00:00 canvas jquery javascript html5-canvas fabricjs

我使用 fabric.js 创建了一种多边形选择器"或多边形制造器".每次单击都会创建多边形的一个角，可以选择、移动等...双击原点关闭"多边形.在这一点上，我将构成多边形的所有圆/线分组并将它们分组.到目前为止一切顺利.

I've created a kind of 'polygon selector' or 'polygon maker' using fabric.js. Each click creates a corner of the polygon, which can be selected, moved, etc... double clicking the original point 'closes' the polygon. At this point I take all of the circles/lines that make up the polygons and group them. So far so good.

当双击这样的组时，我希望它取消组合并恢复为可移动节点(即移动圆圈会重塑多边形等)；但是发生了一些奇怪的事情 - 看看当你移动圆圈时会发生什么，某些线似乎没有加入"圆圈......

When such a group is double clicked, I would like it to ungroup and revert to movable nodes (i.e. moving the circles reshapes the polygon etc); but there's some strangeness going on - check out what happens when you move the circles, certain lines seem 'not joined' to the circles...

我已经查看了每个与组/取消组相关的 fabric.js 线程(此处/那里/任何地方).似乎没有一个涵盖我在这里拥有的连接"对象的类型.

I've already reviewed every group/ungroup related fabric.js thread (here/there/everywhere). None seem to cover the type of 'connected' objects I have here.

我放在一起用来展示问题的小提琴比我说的更好:http://jsfiddle.net/bhilleli/4v8mkw6q/

The fiddle I put together to show the problem says it better than I can: http://jsfiddle.net/bhilleli/4v8mkw6q/

损坏的代码是@:

       //dbl clicked a group so lets ungroup it!
        items = p._objects; // grab the items from the group you want to

        // translate the group-relative coordinates to canvas relative ones
        p._restoreObjectsState();
        // remove the original group and add all items back to the canvas
        canvas.remove(p);
        for (var i = items.length - 1; i >= 0; i--) {
            canvas.add(items[i]);
        }
        canvas.renderAll();

推荐答案

可以使用面料分组工具

您可以将对象组合在一起和取消组合，并在同一时间

You can group and ungroup objects together, and manipulate them at the same time

例如

 var canvas = new fabric.Canvas('paper',{
    isDrawingMode: true
    });
$("#select").click(function(){
    canvas.isDrawingMode = false;
});
$("#draw").click(function(){
    canvas.isDrawingMode = true;
});

$("#group").on('click', function() {
    var activegroup = canvas.getActiveGroup();
    var objectsInGroup = activegroup.getObjects();

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

    });
});

$("#ungroup").click(function(){
   var activeObject = canvas.getActiveObject();
    if(activeObject.type=="group"){
        var items = activeObject._objects;
        alert(items);
        activeObject._restoreObjectsState();
        canvas.remove(activeObject);
        for(var i = 0; i < items.length; i++) {
          canvas.add(items[i]);
          canvas.item(canvas.size()-1).hasControls = true;
        }

        canvas.renderAll();
    }
});

请查看以下链接

http://jsfiddle.net/softvar/NuE78/1/

相关文章