Ich habe 3-5 Themen über Maus-Offset gelesen, aber ich kann immer noch nicht herausfinden, wo das Chaos ist.
Bei mir funktioniert alles in 60%. In anderen 40% Maus ist versetzt. Demo hier .
Manchmal bezieht sich die Objektposition nicht auf das Mausverhalten. (IE & amp; Chrome haben das größte Chaos)
Ich habe versucht, Stylesheets und Eltern-Div zu bearbeiten, aber nichts. Das Schlimmste: Ich sehe keine Regelmäßigkeit. Ich werde für jede Hilfe dankbar sein.
Es ist unglaublich! Ich habe den Fehler behoben. Du wirst mir niemals glauben ...
Oben auf der Seite war Code wie:
%Vor% Dieser Code hat keine vernünftige Beziehung zur Zeichenfläche. Diese Klasse hat eine einfache CSS: {float: left; margin: 10px 0 0 0;}
Aber aus irgendeinem Grund hat dieser Code den Mausversatz in Canvas erzwungen. Ich habe diesen Code wie folgt neu erstellt:
%Vor%... und jetzt denkt alles gut zu funktionieren.
Ich sehe keine Korrelation zwischen diesen Ereignissen, aber die Tatsache ist die Tatsache. Das war ein verdammt harter Tag für mich ...
Sie können dies tun:
%Vor%Ich mache das nur, nachdem ich eine Leinwand erstellt habe. Dies ist ein Interimsaufruf, wenn es kein Größenänderungs-Ereignis gibt. Das ist, wenn ein Bug erscheint.
Aufgrund der Positionierung anderer Elemente auf der Seite kann sich der Canvas-Offset-Wert ändern.
Sie mussten nur canvas.calcOffset() aufrufen, nachdem Sie ein Element in der Zeichenfläche hinzugefügt haben, die das Problem verursacht hat, oder nachdem Sie die Methode canvas.renderAll() im Code aufgerufen haben.
Dieses Offset-Problem tritt immer dann auf, wenn die Zeichenfläche innerhalb des HTML-Dokuments verschoben wird. Wenn Sie beispielsweise ein Element mit 10 Pixel Höhe über der Zeichenfläche hinzufügen, werden Ihre Objekte nach dem ersten Rendern der Zeichenfläche um 10 Pixel versetzt. Fügen Sie diesen Code immer dann hinzu, wenn die Arbeitsfläche im HTML-Dokument neu positioniert wird, und die Mausinteraktivität neu berechnen sollte:
%Vor%Fabric.js ruft diese Methode automatisch bei jeder Größenänderung des Fensters auf, weshalb Sie das Problem bei diesem Ereignis nicht sehen.
Die Versatzpositionierung eines Objekts in einer Zeichenfläche wird höchstwahrscheinlich durch die ursprünglichen Koordinaten der Zeichenfläche und der untergeordneten Objekte verursacht, die durch DOM-Manipulation geändert werden.
Eine einfache Lösung, die ich gefunden habe, besteht darin, sicherzustellen, dass ich die Koordinaten jedes Objekts, das ich der Leinwand hinzufüge, sofort nach dem Hinzufügen festlege. Wenn Sie beispielsweise annehmen, dass das Objekt ein Bild ist, würden Sie Folgendes tun:
%Vor%Hoffe, das hilft. Viel Glück!
Tags und Links javascript html5 fabricjs