Adob​​e Animate CCキャンバスのステージ上でのマウスの動きが遅く、間欠的です

Question

Adob​​e AnimateのCC HTML5 Canvas（createJS）では、広告のステージ全体がmoused overのときにアニメーションロールオーバーをトリガーするために、マウスがステージを離れたときに、アニメーション化されたロールアウトを開始することができます。それは非常に簡単なはずですが、そうではありません。 stageのmouseenterとmouseleaveを使用すると時間がかかり、断続的にしか動作しません。 mouseoverとmouseoutと同じです。

はここラグと断続的だコードです：

stage.addEventListener("mouseenter", fl_MouseOverHandler.bind(this)); 
stage.addEventListener("mouseleave", fl_MouseOutHandler.bind(this)); 

function fl_MouseOverHandler(){ 
    this.btnOverAnim.gotoAndPlay("on"); 
} 

function fl_MouseOutHandler(){ 
    this.btnOverAnim.gotoAndPlay("off"); 
} 

私はまた、ボタンのステージの全体の大きさにmouseoverとmouseoutを試してみましたが、私は同じ問題を得ました。 （このようにしても、フレーム内からはまったく動作せず、広告はフレーム内で処理されます）。私はvar frequencyの方法を90にして、それが遅れに役立つかどうかを見てみました。

これは私が試したシンプルmouseover/mouseoutコードだった：createJS websiteオン

var frequency = 90; 
stage.enableMouseOver(frequency); 

this.bgCta.addEventListener("mouseover", fl_MouseOverHandler.bind(this)); 
this.bgCta.addEventListener("mouseout", fl_MouseOutHandler.bind(this)); 

それは、「あなたは、ポインタがstage.mouseInBoundsを使用して、キャンバスとmouseleave/mouseenterイベントの上にあるかどうかを監視することができます。」と言いますだから私はstage.mouseInBoundsを使用して（しかし、私はどこでもそれを使用する方法の例を見つけることができません）を使用するのだろうかと思っています。しかし、私は実際には、この全体的な問題は約createJSは、マウスが十分に速い場所を読んでいないと思うので、それが助けになるとは思わない。

このような不安定さと断続的な発火を解決する方法を知っている人はいますか？周りの仕事？なぜ、createJSは純粋なjsのように常にmouse eventsを監視していないのですか？またmouseenterとcreateJSでステージ上mouseleave

は、タブレットやモバイル上では動作しませんし、それが問題だ、ボタンをmouseoverとmouseoutで、ステージの全体の大きさを、これを行う方が良いでしょう。私はmouseoverとmouseoutを使ってみましたが、ボタンの端から広告バナーの端までの間に3ピクセルのスペースがありましたが、これは助けになりましたが、断続的に発砲していました。

あなたの考えと考えてください。

Answer 1

マウスオーバーチェックは高価です。キャンバスは基本的にはビットマップなので、ブラウザからマウスイベントを使用することはできません（キャンバス全体に1つしかない）。代わりに、EaselJSのマウスオーバーでは、すべての要素を1x1ピクセルのキャンバスに描画し、塗りつぶしをチェックする必要があります。これにより、ピクセル完全検出が可能になりますが、多くのコンテンツをチェックしたり、頻繁にチェックしたりする場合はコストがかかります。

はあなたの頻度を減らします： あなたはこれが（基本的には90のFPSを達成しようとしている小切手、間の11ミリ秒）本当に高いです90にfrequencyを設定しているように見えます。デフォルトは10ですが、これは良いフレームレートよりも遅いですが、反応が速いと感じるほど速いです。あなたはおそらくそれを不必要に高くすることなく、あなたにピープチェックを与えるためにそれを20程度に減らすことができます。

対話性を変更します。もう1つのことは、チェックされた内容を正確にフィルタすることです。デフォルトでは、すべての表示オブジェクトがチェックされますが、扱いたいコンテナのをmouseEnabledから外して（チェックを省略して）、をからオフにすることでこれを減らすことができます（複雑なボタンのようなものは、すべてのコンテンツが個別に描画されるのではなく、一度描画されます）。

// Example 
myBackground.mouseEnabled = false; 
myButton.mouseChildren = false; 

希望します。