1

イベント ハンドラーがキャンバスとやり取りするときに問題が発生しています。基本的に何が起こるかというと、キャンバスの下にあるイベント ハンドラーがキャンバスの上にあるキャンバスに何らかの影響を与えており、イベントが壊れることがあります。

onmouseover イベントを使用して上部キャンバスを非表示にし、onmouseout を使用して要素を再表示しています。onmousemove でも同じ効果が得られることに注意してください。

コードを jsfiddle に置き換えました: http://jsfiddle.net/morgaman/zPuH8/ ...しかし、イライラすることに実行されません。したがって、作業バージョン自体は、 http ://chrismorga.com/rainnav/rbowtester.html でホストされています。

「jCanvas」( http://calebevans.me/projects/jcanvas/index.php ) が私の問題に対する jQuery の答えだと聞いたことがありますが、それをプログラムする方法や再帰的なアニメーションを機能させる方法がわかりません。ヘルプ？

4

2 に答える 2

2

myCanvasL2キャンバスと同じ高さと幅を保持する div を指定します。それ以外の場合は、サイズをキャンバスに合わせて調整し、非表示に設定するとmouseout、高さが基本的に 0 になるため呼び出されます。

作業バージョン

<div style="z-index:1; position: absolute; left: 18%; top:50px;width:800px;height:50px;" 
    onmouseover="document.getElementById('myCanvasL2').style.display = 'none';"
    onmouseout="document.getElementById('myCanvasL2').style.display = 'block';">
        <canvas id="myCanvasL2" width="800" height="50"></canvas>
</div>​
于 2012-06-19T16:00:50.803 に答える
2

Loktar はここですばらしい回答を得ましたが、あなたが何をしているのか正確に知りたいです。

2 つのキャンバスを常に同じサイズで常に同じ順序に保ち、イベント ハンドラーを一番上のキャンバスにのみ配置すると、今後の作業がずっと楽になります。

2 つのキャンバスのうちの 1 つを「隠す」必要がある場合は、完全にクリアしてください ( clearRect, yada yada)。

その下のキャンバスと対話する必要がある場合にそのキャンバスがクリアされると、フラグtopCanvasClearedか何かを保持します。それがtrue上のキャンバスで取得したイベントである間、2 番目のキャンバスで動作する関数に渡すことができます。そこから生まれたイベント。サイズが同じなので、完璧に機能するはずです。

...しかし、ここで本当に2 つのキャンバスが必要ですか? 最終目標は何ですか？代わりに、異なる時間に 2 つの非常に異なる状態を表示する 1 つのキャンバスを作成できないのはなぜですか? 最初から心配する DOM 要素が 1 つだけあれば、生活は非常に楽になります。これまでに得たすべての機能を 1 つのキャンバスに収めることは、確かに難しいことではありません。

ここでの解決策は、これまでに得たものを再編成して、形状、サイズ、または可視性を決して変更しない 1 つまたは最大 2 つのキャンバスにし、イベント ハンドラーを一番上のキャンバスにのみ配置することだと思います。この 2 つの考えを少し考えてみてください。

于 2012-06-19T16:18:38.540 に答える