Mein Ziel ist es, das Überlappen von zwei oder mehr Rechtecken in meiner FabricJS-Leinwand zu verhindern.

Stellen Sie sich zwei Rechtecke mit Informationen zu Position und Größe vor, und Sie können jedes Rechteck innerhalb der Leinwand ziehen und ablegen.

Wenn Rechteck A nahe genug an Rechteck B kommt, sollte die Position von Rechteck A an der Kante von Rechteck B einrasten. Dies sollte für jede Kante von Rechteck B funktionieren. Die Eckpunkte müssen nicht übereinstimmen, da die Größen der Rechtecke variabel sind .

Ich habe ein funktionierendes Beispiel für dieses Einrasten in einer Dimension (x-Achsen).

Mein bester Geigenversuch

Sehenjsfiddle.

Aber ich brauche es, um das Rechteck in beiden Dimensionen zu umgehen. Ich bin mir ziemlich sicher, dass mein Code nicht gut genug ist, um dies zu verwalten.

Code-Schnipsel, die helfen könnten:

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

Das Einrasten sollte für eine unbegrenzte Anzahl von Objekten funktionieren (nicht nur für zwei Rechtecke).