Verhindern Sie Zusammenstoß-oder Schnittpunkt der canvas-Objekte

Ich bin Zeichnung n Rechtecke auf eine Leinwand. Die Rechtecke sind ziehbar und skalierbar.
Ich möchte verhindern, dass Sie überlappen oder schneiden. Der beste Fall ist, wenn Sie nur snap auf einander.

Ich herausgefunden zu überprüfen, um die Kreuzung. In meinem Beispiel habe ich die Deckkraft von sich berührenden Objekten zu 0,1.

Zufällig in meinem Versuch, dieses problem zu lösen, meine Objekte nicht freigegeben, wenn Sie sich berühren, zu einem anderen Objekt. Sehen http://jsfiddle.net/gcollect/jZw7P/
Es ist, weil der Linie 91, wo der alert wird nicht ausgeführt. alert(math.abs(distx));

Eigentlich eine Art von Lösung, aber auf jeden Fall keine elegante.

Irgendwelche Ideen?

Hi. Alert wird nicht ausgeführt, weil die math-Funktion ist case sensitive. Bitte ersetzen Sie alert(math.abs(distx)); mit alert(Math.abs(distx)); " M " in Großbuchstaben...

InformationsquelleAutor gco | 2014-01-29

diese Lösungen sind ziemlich gut, aber nicht von Ihnen arbeiten mit gedrehten Objekten.
Ich kam mit dieser. Es ist zu verhindern Schnittmenge von Objekten..Auch gedreht.

Ich habe diese Geige. Überprüfen Sie es heraus.

[Fiddle](http://jsfiddle.net/m0jjc23v/9)

Erklärung:

Problemumgehung ist, dass Sie sparen müssen, in der letzten nicht-intersectiong top & Links-position, während sich bewegendes Objekt. Wenn der Objekt sich kreuzenden oder isContained mit einem anderen Objekt, verwenden Sie einfach die zuvor gespeicherten oberen & Links-position und positionieren Objekt. Es gibt eine Menge von Verbesserungen möglich. Fühlen Sie sich frei, um diesen code zu verwenden und Verbesserungen.

Code:

//handle moving object
this.canvas.on('object:moving', function(event) {
        var obj = event.target;
        intersectingCheck(obj);
});

function intersectingCheck(activeObject) {
    activeObject.setCoords();
    if(typeof activeObject.refreshLast != 'boolean') {
        activeObject.refreshLast = true
    };

    //loop canvas objects
    activeObject.canvas.forEachObject(function (targ) {
        if (targ === activeObject) return; //bypass self

        //check intersections with every object in canvas
        if (activeObject.intersectsWithObject(targ) 
            || activeObject.isContainedWithinObject(targ) 
            || targ.isContainedWithinObject(activeObject)) {
                //objects are intersecting - deny saving last non-intersection position and break loop
                if(typeof activeObject.lastLeft == 'number') {
                    activeObject.left = activeObject.lastLeft;
                    activeObject.top = activeObject.lastTop;
                    activeObject.refreshLast = false;
                    return;
                }
       }
       else {
           activeObject.refreshLast = true;
       }
   });

   if(activeObject.refreshLast) {
       //save last non-intersecting position if possible
       activeObject.lastLeft = activeObject.left
       activeObject.lastTop = activeObject.top;
   }
}

Fügen Sie keine links, aber Ihr code und Erklärungen darüber.
sowieso, es funktioniert. Aber bitte erklären Sie Ihren code. Es scheint ein wenig zu hinken für mich.

InformationsquelleAutor Frantisek

Diese basiert auf der gco Antwort, aktualisiert, um die Arbeit mit FabricJS 1.5.0, mit den folgenden Verbesserungen:

Formen nicht überschneiden.
Schnappen ist besser.
Formen enthalten sind, die innerhalb der Leinwand.

JS Fiddle: https://jsfiddle.net/aphillips8/31qbr0vn/1/

var canvas = new fabric.Canvas('canvas'),
canvasWidth = document.getElementById('canvas').width,
canvasHeight = document.getElementById('canvas').height,
counter = 0,
rectLeft = 0,
snap = 20; //Pixels to snap

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

function plusrect(top, left, width, height, fill) {
    var rect = new fabric.Rect({
        top: 300,
        name: 'rectangle ' + counter,
        left: 0 + rectLeft,
        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,
        maxWidth: canvasWidth,
        maxHeight: canvasHeight
    });

    rect.custom = {};
    rect.custom.counter = counter;

    canvas.add(rect);
    counter++;
    rectLeft += 200;
}

function findNewPos(distX, distY, target, obj) {
    //See whether to focus on X or Y axis
    if(Math.abs(distX) > Math.abs(distY)) {
        if (distX > 0) {
            target.setLeft(obj.getLeft() - target.getWidth());
        } else {
            target.setLeft(obj.getLeft() + obj.getWidth());
        }
    } else {
        if (distY > 0) {
            target.setTop(obj.getTop() - target.getHeight());
        } else {
            target.setTop(obj.getTop() + obj.getHeight());
        }
    }
}

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

    //Don't allow objects off the canvas
    if(options.target.getLeft() < snap) {
        options.target.setLeft(0);
    }

    if(options.target.getTop() < snap) {
        options.target.setTop(0);
    }

    if((options.target.getWidth() + options.target.getLeft()) > (canvasWidth - snap)) {
        options.target.setLeft(canvasWidth - options.target.getWidth());
    }

    if((options.target.getHeight() + options.target.getTop()) > (canvasHeight - snap)) {
        options.target.setTop(canvasHeight - options.target.getHeight());
    }

    //Loop through objects
    canvas.forEachObject(function (obj) {
        if (obj === options.target) return;

        //If objects intersect
        if (options.target.isContainedWithinObject(obj) || options.target.intersectsWithObject(obj) || obj.isContainedWithinObject(options.target)) {

            var distX = ((obj.getLeft() + obj.getWidth()) /2) - ((options.target.getLeft() + options.target.getWidth()) /2);
            var distY = ((obj.getTop() + obj.getHeight()) /2) - ((options.target.getTop() + options.target.getHeight()) /2);

            //Set new position
            findNewPos(distX, distY, options.target, obj);
        }

        //Snap objects to each other horizontally

        //If bottom points are on same Y axis
        if(Math.abs((options.target.getTop() + options.target.getHeight()) - (obj.getTop() + obj.getHeight())) < snap) {
            //Snap target BL to object BR
            if(Math.abs(options.target.getLeft() - (obj.getLeft() + obj.getWidth())) < snap) {
                options.target.setLeft(obj.getLeft() + obj.getWidth());
                options.target.setTop(obj.getTop() + obj.getHeight() - options.target.getHeight());
            }

            //Snap target BR to object BL
            if(Math.abs((options.target.getLeft() + options.target.getWidth()) - obj.getLeft()) < snap) {
                options.target.setLeft(obj.getLeft() - options.target.getWidth());
                options.target.setTop(obj.getTop() + obj.getHeight() - options.target.getHeight());
            }
        }

        //If top points are on same Y axis
        if(Math.abs(options.target.getTop() - obj.getTop()) < snap) {
            //Snap target TL to object TR
            if(Math.abs(options.target.getLeft() - (obj.getLeft() + obj.getWidth())) < snap) {
                options.target.setLeft(obj.getLeft() + obj.getWidth());
                options.target.setTop(obj.getTop());
            }

            //Snap target TR to object TL
            if(Math.abs((options.target.getLeft() + options.target.getWidth()) - obj.getLeft()) < snap) {
                options.target.setLeft(obj.getLeft() - options.target.getWidth());
                options.target.setTop(obj.getTop());
            }
        }

        //Snap objects to each other vertically

        //If right points are on same X axis
        if(Math.abs((options.target.getLeft() + options.target.getWidth()) - (obj.getLeft() + obj.getWidth())) < snap) {
            //Snap target TR to object BR
            if(Math.abs(options.target.getTop() - (obj.getTop() + obj.getHeight())) < snap) {
                options.target.setLeft(obj.getLeft() + obj.getWidth() - options.target.getWidth());
                options.target.setTop(obj.getTop() + obj.getHeight());
            }

            //Snap target BR to object TR
            if(Math.abs((options.target.getTop() + options.target.getHeight()) - obj.getTop()) < snap) {
                options.target.setLeft(obj.getLeft() + obj.getWidth() - options.target.getWidth());
                options.target.setTop(obj.getTop() - options.target.getHeight());
            }
        }

        //If left points are on same X axis
        if(Math.abs(options.target.getLeft() - obj.getLeft()) < snap) {
            //Snap target TL to object BL
            if(Math.abs(options.target.getTop() - (obj.getTop() + obj.getHeight())) < snap) {
                options.target.setLeft(obj.getLeft());
                options.target.setTop(obj.getTop() + obj.getHeight());
            }

            //Snap target BL to object TL
            if(Math.abs((options.target.getTop() + options.target.getHeight()) - obj.getTop()) < snap) {
                options.target.setLeft(obj.getLeft());
                options.target.setTop(obj.getTop() - options.target.getHeight());
            }
        }
    });

    options.target.setCoords();

    //If objects still overlap

    var outerAreaLeft = null,
    outerAreaTop = null,
    outerAreaRight = null,
    outerAreaBottom = null;

    canvas.forEachObject(function (obj) {
        if (obj === options.target) return;

        if (options.target.isContainedWithinObject(obj) || options.target.intersectsWithObject(obj) || obj.isContainedWithinObject(options.target)) {

            var intersectLeft = null,
            intersectTop = null,
            intersectWidth = null,
            intersectHeight = null,
            intersectSize = null,
            targetLeft = options.target.getLeft(),
            targetRight = targetLeft + options.target.getWidth(),
            targetTop = options.target.getTop(),
            targetBottom = targetTop + options.target.getHeight(),
            objectLeft = obj.getLeft(),
            objectRight = objectLeft + obj.getWidth(),
            objectTop = obj.getTop(),
            objectBottom = objectTop + obj.getHeight();

            //Find intersect information for X axis
            if(targetLeft >= objectLeft && targetLeft <= objectRight) {
                intersectLeft = targetLeft;
                intersectWidth = obj.getWidth() - (intersectLeft - objectLeft);

            } else if(objectLeft >= targetLeft && objectLeft <= targetRight) {
                intersectLeft = objectLeft;
                intersectWidth = options.target.getWidth() - (intersectLeft - targetLeft);
            }

            //Find intersect information for Y axis
            if(targetTop >= objectTop && targetTop <= objectBottom) {
                intersectTop = targetTop;
                intersectHeight = obj.getHeight() - (intersectTop - objectTop);

            } else if(objectTop >= targetTop && objectTop <= targetBottom) {
                intersectTop = objectTop;
                intersectHeight = options.target.getHeight() - (intersectTop - targetTop);
            }

            //Find intersect size (this will be 0 if objects are touching but not overlapping)
            if(intersectWidth > 0 && intersectHeight > 0) {
                intersectSize = intersectWidth * intersectHeight;
            }

            //Set outer snapping area
            if(obj.getLeft() < outerAreaLeft || outerAreaLeft == null) {
                outerAreaLeft = obj.getLeft();
            }

            if(obj.getTop() < outerAreaTop || outerAreaTop == null) {
                outerAreaTop = obj.getTop();
            }

            if((obj.getLeft() + obj.getWidth()) > outerAreaRight || outerAreaRight == null) {
                outerAreaRight = obj.getLeft() + obj.getWidth();
            }

            if((obj.getTop() + obj.getHeight()) > outerAreaBottom || outerAreaBottom == null) {
                outerAreaBottom = obj.getTop() + obj.getHeight();
            }

            //If objects are intersecting, reposition outside all shapes which touch
            if(intersectSize) {
                var distX = (outerAreaRight /2) - ((options.target.getLeft() + options.target.getWidth()) /2);
                var distY = (outerAreaBottom /2) - ((options.target.getTop() + options.target.getHeight()) /2);

                //Set new position
                findNewPos(distX, distY, options.target, obj);
            }
        }
    });
});

Vielen Dank für Ihre Arbeit, aber könnten Sie lassen Sie mich wissen, wie man Kreise?
Nein sorry, das klingt schwierig. Sie würden wahrscheinlich haben, um einige Berechnungen mit pi.

InformationsquelleAutor Anna Phillips

2

Für diejenigen, die immer noch daran interessiert, die Lösung: ich löste es hier: https://stackoverflow.com/a/22649022/3207478 Siehe jsfiddle: http://jsfiddle.net/gcollect/FD53A/

Arbeiten mit
```
.oCoords.tl .tr .bl. and .br solved it.
```
- könnte Sie arbeiten mit Polylinien -, Kreis -, oder auch Linien, Rechteck nicht?
InformationsquelleAutor gco

Habe ich es herausgefunden, wie um zu verhindern, dass die Kollision auf der x-Achse. Durch das hinzufügen der folgenden Zeilen:

canvas.forEachObject(function (obj) {
                if (obj === options.target) return;
                if (options.target.isContainedWithinObject(obj)||options.target.intersectsWithObject(obj)||obj.isContainedWithinObject(options.target)) {
                    var distx = ((obj.left + obj.width)/2) - ((options.target.left + options.target.width)/2);
                    var disty = ((obj.top + obj.height)/2) - ((options.target.top + options.target.height)/2);                  

                    if (distx > 0){
                        options.target.left = obj.left - options.target.width;
                    } else {
                        options.target.left = obj.left + obj.width;
                    }

Sehen JSFiddle.
Eigentlich ist es ziemlich kühl und die Objekte rasten auf einander auf der x-Achse. Störenfried ist jetzt die y-Achse. Ein Ansatz von oben oder unten bewegen Sie das Objekt an den linken oder rechten Rand... Wird die Arbeit an diesem Thema.

InformationsquelleAutor gco

0

Habe ich schon vor einem ähnlichen problem und ich + die Letzte Geige, die hier von @kangax. Könnte man auch mit dieser Art von Mechanismus zu tun, die Kollisionserkennung für Pfade, die sich, wenn man einen Pfad Kollision-Erkennung-Algorithmus, wie die polygon-Schnittpunkt-code finden Sie hier: http://www.kevlindev.com/geometry/2D/intersections/index.htm.

Aber was ich nicht mag, über das 'sticky' - Lösung ist, dass mir das Objekt sollte eigentlich die Folie entlang der Oberfläche auf, die für meine Anwendung stattdessen zwingen Sie den Benutzer zu 'deblockieren' das Objekt. Für diese Art von Effekt, erkannte ich, dass ein 2D-Physik-engine würde wahrscheinlich machen einen tollen job bei der Aktivierung dieser Art von Funktionalität, und einige Beispiel-Verwendungen von http://brm.io/matter-js/ demonstrieren Lösung des Problems und die Positionierung und rotation sollte sicherlich in der Lage sein, um anzeigen in fabric.js. Wenn jedoch festen rotation erforderlich ist, wie es aussieht, ist die Wahrscheinlichkeit des Erfolgs reduziert werden würde.

InformationsquelleAutor J. Barca

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.