Größe der Leinwandgröße mit jQuery (.aMATIAT) und KineticJs Framework ändern

Question

Ich versuche, ein HTML5-Leinwandelement mit jQuery zu ändern.(Hinweis: Nicht die Objekte in der Leinwand, aber die Elemente Größe!)

Es funktioniert gut mit meinem Code mit jQuery nur: http://jsfiddle.net/daqbd/

Aber wenn Sie versuchen, das gleiche mit dem Kineticjs-Framework zu tun, funktioniert es überhaupt nicht.Mein Code: http://jsfiddle.net/mlmse/1/

Ich vermute, dass dies daran liegt, dass das Framework die Leinwand selbst basierend auf dem generationspflichtigen (<div>) erstellt

Gibt es eine Möglichkeit, um daran herumzuarbeiten?Würde es vorziehen, den Rahmen jetzt nicht zu ändern, da ich auf meinem echten Projekt sehr viel getan habe (dies ist nur Dummy-Code).Danke.

(Ich weiß, dass meine Geigen sagen, "expandieren", während sie infact in der Größe der Größe infact sind. typo.)

Answer 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.

Answer 2

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( ... );