将对象的边缘彼此对齐并防止重叠 [英] Snap edges of objects to each other and prevent overlap

问题描述

我的目标是防止 FabricJS 画布内的两个或多个矩形重叠.

My goal is to prevent overlapping of two or more rectangles inside my FabricJS canvas.

想象一下，两个矩形都有位置和大小的信息，您可以在画布内拖放任何矩形.

Imagine two rectangles having info on position and size and you can drag and drop any rectangle inside the canvas.

如果矩形 A 与矩形 B 足够接近，则矩形 A 的位置应与矩形 B 的边缘对齐.这应该适用于矩形 B 的任何边缘.顶点不必匹配，导致矩形的大小矩形是可变的.

If rectangle A gets close enough to rectangle B, the position of rectangle A should snap to the edge of rectangle B. This should work for any edge of rectangle B. The vertices do not have to match, cause the sizes of the rectangles are variable.

我有一个用于在一维(x 轴)上进行捕捉的工作示例.

I have a working example for this snapping on one dimension (x-axes).

我最好的 jsfiddle 尝试

参见 jsfiddle.

但我需要它在两个维度上围绕矩形工作.我很确定，我的代码不足以管理这个.

But I need it to work around the rectangle on both dimensions. I am quite sure, that my code is not well enough to manage this.

可能有帮助的代码片段:

object.oCoords.tl.x //top-left corner x position. similar goes for top-right (tr), bottom-left (bl), bottom-right (br) and .y for y-position
mouse_pos = canvas.getPointer(e.e);
mouse_pos.x //pointer x.position
mouse_pos.y //pointer y.position
object.intersectsWithObject(targ) // object = dragged rectangle, targ = targeted rectangle

捕捉应该适用于无限数量的对象(不仅适用于两个矩形).

The snapping should work for an unlimited amount of objects (not only for two rectangles).

推荐答案

我自己解决了这个问题.见jsfiddle:http://jsfiddle.net/gcollect/FD53A/

I solved the problem on my own. See jsfiddle: http://jsfiddle.net/gcollect/FD53A/

这是代码:

this.canvas.on('object:moving', function (e) {
var obj = e.target;
obj.setCoords(); //Sets corner position coordinates based on current angle, width and height
canvas.forEachObject(function (targ) {
    var objects = this.canvas.getObjects(),
        i = objects.length;
    activeObject = canvas.getActiveObject();

    if (targ === activeObject) return;


    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;
    }
    if (activeObject.intersectsWithObject(targ) && targ.intersectsWithObject(activeObject)) {
        targ.strokeWidth = 10;
        targ.stroke = 'red';
    } else {
        targ.strokeWidth = 0;
        targ.stroke = false;
    }
    if (!activeObject.intersectsWithObject(targ)) {
        activeObject.strokeWidth = 0;
        activeObject.stroke = false;
    }
});

工作非常合法！干杯！

这篇关于将对象的边缘彼此对齐并防止重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！