对Fabric.js对象进行分组和取消分组 [英] Grouping and Ungrouping Fabric.js objects
问题描述
我使用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...
我已经审查每个组/ ungroup相关fabric.js线程(这里/ there / everywhere)。没有似乎涵盖了我在这里的连接对象的类型。
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 use fabric grouping tool
您可以将对象分组和取消组合在一起,并在
同时操作
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();
}
});
请检查以下链接
这篇关于对Fabric.js对象进行分组和取消分组的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!