Redimensionner la taille du canevas à l'aide de jQuery (.animer) et KineticJS cadre

Question

Je suis en train de redimensionner un élément HTML5 canvas à l'aide de jQuery.(AVIS:Pas les objets à l'intérieur de la toile, mais les éléments la taille!)

Il fonctionne très bien avec mon code à l'aide de jQuery uniquement:http://jsfiddle.net/dAQBD/

Mais lorsque j'essaie de faire la même chose avec le KineticJS cadre, il ne fonctionne pas du tout.Mon code:http://jsfiddle.net/mLMSE/1/

Je soupçonne que c'est parce que le cadre crée la toile elle-même basée sur la <div> - par - (var stage = new Kinetic.Stage("div", 500, 200);)

Est-il un moyen de contourner cela?Préférez de ne pas modifier le cadre de maintenant, depuis que j'ai fait beaucoup de choses sur mon projet (c'est juste code factice).Merci.

(Je sais que ma violons dire "développer" alors qu'ils enfait la diminution de la taille.Faute de frappe.)

Answer 1

jQuery animate prend une carte de propriétés CSS.En d'autres termes, vous sont en train de changer le CSS de la largeur de la toile, et non la toile réelle width attribut.Ce n'est probablement pas ce que vous voulez.Vous allez devoir faire votre propre fonction animate (ou d'être plus à l'aise avec jQuery car il fonctionne uniquement sur CSS).

Vous pourriez faire un certain nombre de choses ici.Une idée (probablement pas la meilleure idée) serait pour animer un div en bas de 300 et ont une minuterie qui vérifie la clientWidth de la div.La fonction de la minuterie cesse la canvas.width égale à la div.style.clientWidth.De cette façon, la toile s'anime vers le bas avec votre mannequin div.

Answer 2

La principale raison ce n'est pas rien faire, c'est que vous êtes seulement de redimensionnement le récipient avec jquery.cinétique remplit le conteneur avec de la toile éléments.Absolument positions de ces canevas d'éléments pour créer un effet de superposition qui permet ensuite permuter l'ordre d'apparition lors des animations.Ces absolument positionné les éléments de canevas à acquérir leurs dimensions lorsque vous définissez de nouveaux cinétique.Stade()

Vous n'avez pas de règle css définie pour exampleCanvas essayer quelque chose comme cela:

#exampleCanvas{ overflow: hidden; width: 500px; height: 200px; border: 2px solid red; position: relative; }

aussi, kineticjs api a la .méthode setSize (), de sorte que la scène.setSize(largeur, hauteur) pourrait être une étape vers une solution.ainsi, dans les animer de rappel phase d'utilisation.setSize(300, 200);

Si ce n'est pas d'avoir le résultat souhaité, vous pouvez cibler la toile éléments dans le conteneur de la sorte:

$("#exampleCanvas").children("canvas").animate( ... );