Question

角落对齐
Edge snapping
对象可以重叠
对象完全包含在画布中
对象的大小不能超过画布区域

以下是代码：

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 });
        }
    });
});

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

动态捕捉。在初始捕捉后继续拖动对象将暂时禁用捕捉，直到对象停止移动。例如，如果我将一个框拖到另一个框旁边，一旦它们在范围内，它们就会对齐。但是，如果我继续移动第一个盒子，我可以将它“放”在一个位于捕捉范围内但不与另一个盒子对齐的位置。
显示引导线。目前我们在目标对象周围添加一个边框，但最好显示向外扩展的指南（可能是画布的边缘），以便更容易地显示目标对象的边界。

我也对其他功能建议持开放态度。基本上我正在寻求一个功能齐全的捕捉实现。

FabricJS中的高级对齐

0 个答案: