Canvas FabricJS中的高级捕捉

我是根据我的例子。它包括：

• 角捕捉
• 咬边
• 对象可以重叠
• 对象完全包含在画布中
• 对象的大小不能大于画布区域

代码如下：

window.canvas = new fabric.Canvas('fabriccanvas');
window.counter = 0;
var newleft = 0,
    edgedetection = 20, //pixels to snap
    canvasWidth = document.getElementById('fabriccanvas').width,
    canvasHeight = document.getElementById('fabriccanvas').height;

canvas.selection = false;
plusrect();
plusrect();
plusrect();

function plusrect(top, left, width, height, fill) {
    window.canvas.add(new fabric.Rect({
        top: 300,
        name: 'rectangle ' + window.counter,
        left: 0 + newleft,
        width: 100,
        height: 100,
        fill: 'rgba(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ', 0.75)',
        lockRotation: true,
        originX: 'left',
        originY: 'top',
        cornerSize: 15,
        hasRotatingPoint: false,
        perPixelTargetFind: true,
        minScaleLimit: 1,
        maxHeight: document.getElementById("fabriccanvas").height,
        maxWidth: document.getElementById("fabriccanvas").width,
    }));
    window.counter++;
    newleft += 200;
}

this.canvas.on('object:moving', function (e) {
    var obj = e.target;
    obj.setCoords(); //Sets corner position coordinates based on current angle, width and height

    // Prevent object from leaving canvas
    if(obj.getLeft() < edgedetection) obj.setLeft(0);
    if(obj.getTop() < edgedetection) obj.setTop(0);
    if((obj.getWidth() + obj.getLeft()) > (canvasWidth - edgedetection)) obj.setLeft(canvasWidth - obj.getWidth());
    if((obj.getHeight() + obj.getTop()) > (canvasHeight - edgedetection)) obj.setTop(canvasHeight - obj.getHeight());

    canvas.forEachObject(function (targ) {
        activeObject = canvas.getActiveObject();

        if(targ === activeObject) return;

        // Standard snapping when within range
        if(Math.abs(activeObject.oCoords.tr.x - targ.oCoords.tl.x) < edgedetection) {
            activeObject.left = targ.left - activeObject.currentWidth;
        }
        if(Math.abs(activeObject.oCoords.tl.x - targ.oCoords.tr.x) < edgedetection) {
            activeObject.left = targ.left + targ.currentWidth;
        }
        if(Math.abs(activeObject.oCoords.br.y - targ.oCoords.tr.y) < edgedetection) {
            activeObject.top = targ.top - activeObject.currentHeight;
        }
        if(Math.abs(targ.oCoords.br.y - activeObject.oCoords.tr.y) < edgedetection) {
            activeObject.top = targ.top + targ.currentHeight;
        }

        // Snap top/left together when moving up/down or side to side if within range
        if(Math.abs(activeObject.top - targ.top) < edgedetection) {
            activeObject.top = targ.top;
        }
        if(Math.abs(activeObject.left - targ.left) < edgedetection) {
            activeObject.left = targ.left;
        }

        if(activeObject.intersectsWithObject(targ) && targ.intersectsWithObject(activeObject)) {
            targ.set({ strokeWidth: 2, stroke: 'red' });
        } else {
            targ.set({ strokeWidth: 0, stroke: false });
        }

        if(!activeObject.intersectsWithObject(targ)) {
            activeObject.set({ strokeWidth: 0, stroke: false });
        }
    });
});

window.canvas=newfabric.canvas（'fabriccanvas'）；
window.counter=0；
var newleft=0，
edgedetection=20，//要捕捉的像素数
canvasWidth=document.getElementById（'fabriccanvas'）.width，
canvasHeight=document.getElementById（'fabriccanvas'）.height；
canvas.selection=false；
plusrect（）；
plusrect（）；
plusrect（）；
功能加减（顶部、左侧、宽度、高度、填充）{
window.canvas.add（new fabric.Rect({
排名：300，
名称：“矩形”+window.counter，
左：0+新左，
宽度：100，
身高：100，
填充：'rgba（+（Math.floor（Math.random（）*256））+'，'+（Math.floor（Math.random（）*256））+'，'+（Math.floor（Math.random（）*256））+'，0.75'，
是的，
原文：“左”，
原创：“top”，
尺寸：15，
hasRotatingPoint:false，
perPixelTargetFind：对，
最低限额：1，
maxHeight:document.getElementById（“fabriccanvas”）.height，
maxWidth:document.getElementById（“fabriccanvas”）.width，
}));
window.counter++；
newleft+=200；
}
this.canvas.on（'object:moving'，function（e）{
var obj=e.target；
obj.setCoords（）；//基于当前角度、宽度和高度设置角点位置坐标
//防止对象离开画布
if（obj.getLeft（）（canvasWidth-edgedetection））obj.setLeft（canvasWidth-obj.getWidth（））；
if（（obj.getHeight（）+obj.getTop（））>（canvasHeight-edgedetection））obj.setTop（canvasHeight-obj.getHeight（））；
canvas.forEachObject（函数（targ）{
activeObject=canvas.getActiveObject（）；
if（target==activeObject）返回；
//在范围内时的标准捕捉
if（Math.abs（activeObject.oCoords.tr.x-target.oCoords.tl.x）

我想知道的是，是否可以扩展此功能以添加以下功能：

• 动态捕捉。在初始捕捉后继续拖动对象将暂时禁用捕捉，直到对象停止移动。例如，如果我将一个长方体拖动到另一个长方体旁边，它们在范围内时将捕捉在一起。但是，如果继续移动第一个长方体，我可以将其“放置”在捕捉范围内但未与另一个长方体对齐的位置
• 当选定对象在另一个对象的范围内时，显示参考线。目前，我们在目标对象周围添加了一个边框，但是最好显示向外延伸（可能延伸到画布边缘）的指导方针，以便更容易地可视化目标对象的边界

我也愿意接受其他功能建议。本质上，我正在寻找一个功能齐全的快照实现