マウス オフセットに関する 3 ~ 5 件のトピックを読みましたが、どこが混乱しているのかまだわかりません。
私の場合、すべてが 60% で正常に動作します。他の 40% では、マウスがオフセットされています。ここでデモ。
オブジェクトの位置がマウスの動作に関係しない場合があります。(IE と Chrome が最も混乱しています)
スタイルシートと親 div を編集しようとしましたが、何もしませんでした。最悪なのは、規則性が見られないことです。私はどんな助けにも大いに役立ちます。
マウス オフセットに関する 3 ~ 5 件のトピックを読みましたが、どこが混乱しているのかまだわかりません。
私の場合、すべてが 60% で正常に動作します。他の 40% では、マウスがオフセットされています。ここでデモ。
オブジェクトの位置がマウスの動作に関係しない場合があります。(IE と Chrome が最も混乱しています)
スタイルシートと親 div を編集しようとしましたが、何もしませんでした。最悪なのは、規則性が見られないことです。私はどんな助けにも大いに役立ちます。
あなたはこれを行うことができます:
canvas.on("after:render", function(){ canvas.calcOffset() });
キャンバスを作成した後にのみこれを行います。これは、サイズ変更イベントがない場合の暫定的な呼び出しです。それがバグが現れるときです。
ページ上の他の要素の配置により、キャンバスのオフセット値が変わる場合があります。
canvas.calcOffset()
問題の原因となった要素をキャンバスに追加した後、またはcanvas.renderAll()
コードでメソッドを呼び出した後に呼び出す必要がありました。
信じられない!バグを修正しました。あなたは私を信じることは決してないだろう...
ページの上部には、次のようなコードがありました。
<div class="logo">
<a href="/"><img src="logo.png" alt="" /></a>
</div>
このコードは、canvasとは合理的な関係がありません。このクラスには単純なcssがあります。{float: left; margin: 10px 0 0 0;}
しかし、何らかの理由で、このコードはキャンバスでマウスオフセットを強制しました。私はこのコードを次のように作り直しました:
<div class="logo">
<a href="/" class="logoHref"></a><!--- image is in css bg --->
</div>
...そして今ではすべてが正常に機能すると考えています。
これらのイベントの間に相関関係は見られませんが、事実は事実です。それは私にとってひどい大変な日でした...
キャンバス内のオブジェクトのオフセット位置は、キャンバスと子オブジェクトの元の座標が DOM 操作によって変更されたことが原因である可能性が最も高いです。
私が見つけた簡単な解決策は、追加した直後にキャンバスに追加するオブジェクトの座標を設定することです。たとえば、オブジェクトが画像であると仮定すると、次のようになります。
var canvas = new fabric.Canvas();
var image = new Image();
canvas.add( image );
image.center() // Optional if you wish the object centered on canvas
image.setCoords();
お役に立てれば。幸運を!