jQuery を使用して HTML5 キャンバス要素のサイズを変更しようとしています。(注意: キャンバス内のオブジェクトではなく、要素のサイズです!)
jQuery のみを使用して私のコードで正常に動作しています: http://jsfiddle.net/dAQBD/
しかし、KineticJS フレームワークで同じことをしようとすると、まったく機能しません。私のコード: http://jsfiddle.net/mLMSE/1/
<div>これは、フレームワークが- through - ( var stage = new Kinetic.Stage("div", 500, 200);)に基づいてキャンバス自体を作成するためだと思われます。
これを回避する方法はありますか? 私は実際のプロジェクトでかなり多くのことを行ってきたので、今はフレームワークを変更したくありません (これは単なるダミー コードです)。ありがとう。
(私のフィドルは「拡張」と言っているのに、実際にはサイズが縮小していることを知っています。タイプミスです。)
jQuery の animate は、CSS プロパティのマップを取ります。widthつまり、キャンバスの実際の属性ではなく、キャンバスの CSS 幅を変更しています。これはおそらくあなたが望むものではありません。独自のアニメーション関数を作成する必要があります (または、CSS でのみ動作するため、jQuery をより賢く使用する必要があります)。
ここでは、さまざまなことができます。1 つのアイデア (おそらく最良のアイデアではない) は、div を 300 までアニメーション化し、div の clientWidth をチェックするタイマーを用意することです。タイマー機能は常に を にcanvas.width等しく設定しdiv.style.clientWidthます。このようにして、キャンバスはダミーの div でアニメーション化されます。
これが何もしない主な理由は、jquery でコンテナーのサイズを変更しているだけだからです。kinetic はそのコンテナに canvas 要素を取り込みます。これらのキャンバス要素を絶対的に配置してレイヤー効果を実現し、アニメーション中にレイヤー順序を入れ替えることができます。new kinetic.Stage() を設定すると、これらの絶対配置されたキャンバス要素の寸法が取得されます。
exampleCanvas に css ルールが設定されていない場合は、次のようにしてみてください。
#exampleCanvas{ overflow: hidden; width: 500px; height: 200px; border: 2px solid red; position: relative; }
また、kineticjs api には .setSize() メソッドがあるため、stage.setSize(width, height) が解決への一歩になるかもしれません。したがって、アニメーション コールバックでは、stage.setSize(300, 200); を使用します。
これで目的の結果が得られない場合は、次のようにコンテナー内のキャンバス要素をターゲットにすることができます。
$("#exampleCanvas").children("canvas").animate( ... );