jQuery（.Animate）とKineticJSフレームワークを使用してキャンバスサイズのサイズのサイズ変更
https://stackoverflow.com/questions/9019346
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
jQueryを使用してHTML5 CANVAS要素をサイズ変更しようとしています。（注意：キャンバス内のオブジェクトではなく、要素サイズ！）
jQueryのみを使用して私のコードでうまく機能しています。 http://jsfiddle.net/daqbd/
しかし、KineticJSフレームワークで同じことをしようとすると、まったく機能しません。私のコード： >> http://jsfiddle.net/mlmse/1/
これを回避する方法はありますか？私の実際のプロジェクトにかなり多くのことをしたので、フレームワークを変更しないことをお勧めします（これはダミーコードです）。ありがとう。
解決
jQuery's animate takes a map of CSS properties. In other words, you are changing the CSS width of the canvas and not the canvas' actual width attribute. This is most likely not what you want. You're going to have to make your own animate function (or be more clever with jQuery's since it only operates on CSS).
You could do a number of things here. One idea (probably not the best idea) would be to animate a div down to 300 and have a timer that checks the clientWidth of the div. The timer function constantly sets the canvas.width equal to the div.style.clientWidth. This way the canvas animates down with your dummy div.
他のヒント
The main reason this isn't doing anything is that you are only resizing the container with jquery. kinetic populates that container with canvas elements. It absolutely positions these canvas elements to achieve a layering effect which then allows it swap the layering order during animations. These absolutely positioned canvas elements acquire their dimensions when you set new kinetic.Stage()
You have no css rule set for exampleCanvas try something like this:
#exampleCanvas{ overflow: hidden; width: 500px; height: 200px; border: 2px solid red; position: relative; }
also, kineticjs api has the .setSize() method, so stage.setSize(width, height) might be a step toward a solution. so, in the animate callback use stage.setSize(300, 200);
If this isnt having the desired result you can target the canvas elements in your container like so:
$("#exampleCanvas").children("canvas").animate( ... );
