マウスのオフセットについて3〜5のトピックを読んだことがありますが、まだどこが混乱しているのかわかりません。キャンバスでのマウスのオフセット[fabric.js]
私の場合は、すべてが正常に60％で動作します。他の40％マウスでは、オフセットされています。 Demo here。
オブジェクトの位置がマウスの動作に関連しないことがあります。 （IE &クロムが最も混乱しています）
私はスタイルシートと親divを編集しようとしましたが、何もしませんでした。最悪のこと：私は規則性を見ません。私はどんな助けでも大喜びになるでしょう。
これは信じられないほどです！ 私はバグを修正しました。このコードはキャンバスに合理的な関係を持っていない
<div class="logo">
<a href="/"><img src="logo.png" alt="" /></a>
</div>
：あなたは、それは次のようなコードだっページの最上部には...
私を信じることはありません。このクラスはシンプルなCSSを持っています：{float: left; margin: 10px 0 0 0;}
しかし、何らかの理由でこのコードはキャンバスにマウスオフセットを強制しました。このコードを次のように作り直しました：
<div class="logo">
<a href="/" class="logoHref"></a><!--- image is in css bg --->
</div>
...そして今はすべてうまくいくと思います。
私はこれらの出来事の間のどんな相互関係も見ませんが、事実は事実です。それは私のために心のこもった一日でした...
ページ上の他の要素の配置により、キャンバスのオフセット値が変わることがあります。
あなただけの問題の原因となったり、コード内canvas.renderAll()メソッドを呼び出した後、キャンバス内の要素を追加した後canvas.calcOffset()を呼び出すために必要な。
あなたはこれを行うことができます：私はキャンバスを作成
canvas.on("after:render", function(){ canvas.calcOffset() });
私はこれを行った後。これは、resizeイベントがないときの中間コールです。それはバグが現れる時です。
これはすぐに私の問題を修正しました。 –
優秀な、これはこれまで私がこの愚かなバグに関して出会った最も有用な答えです。 – JDandChips
このオフセットの問題は、キャンバスがHTMLドキュメント内で移動されるたびに発生します。たとえば、高さが10pxの要素をキャンバスの上に追加すると、キャンバスが最初にレンダリングされた後、オブジェクトは10pxだけオフセットされます。キャンバスは、HTMLドキュメント内に再配置されるたびに、このコードを追加し、そしてそれは、マウスの対話を再計算する必要があります
canvas.on("after:render", function(){
canvas.calcOffset();
});
その出来事についての問題。
それを試してみてください、私には役立ちません。いつでも3〜4人ぐらいの暴力を経験する。 –
キャンバス内のオブジェクトのオフセット配置は、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();
がんばろう！
fabric.jsで何をしようとしているのか、何が問題なのか説明できますか？コードの一部が機能していないことを通知することができれば、それも役に立ちます。 –
私はテキストと画像を挿入しています。デモページで見ることができます。オブジェクトの位置がマウスの動作に関係しないことがあります。ログにエラーがないので、コードの一部を表示する必要があるかどうかわかりません。それはスタイルシートについて何かがある可能性があります... – Yevgen