Redimensionar o tamanho da tela usando o jQuery.anime) e KineticJS quadro

Question

Eu estou tentando redimensionar um elemento canvas HTML5 usando jQuery.(AVISO:Não os objetos dentro da tela, mas os elementos de tamanho!)

Ele está trabalhando muito bem com o meu código jQuery só:http://jsfiddle.net/dAQBD/

Mas ao tentar fazer o mesmo com o KineticJS framework, ele não funciona em todos.O meu código:http://jsfiddle.net/mLMSE/1/

Eu suspeito que isso é porque o framework cria a tela si própria com base no <div> - através - (var stage = new Kinetic.Stage("div", 500, 200);)

Existe alguma maneira de contornar isso?Preferem não mudar o quadro agora, desde que eu fiz bastante no meu projeto real (isto é apenas de código fictício).Obrigado.

(Eu sei que a minha rabeca dizer "expandir", enquanto eles de fato diminuir o tamanho.Erro de digitação.)

Answer 1

blogs, animar leva um mapa de propriedades CSS.Em outras palavras, você está alterando o CSS largura da tela, e não da tela real width atributo.Este provavelmente não é o que você quer.Você vai ter que fazer a sua própria função animate (ou ser mais inteligente com jQuery, pois só funciona em CSS).

Você poderia fazer uma série de coisas aqui.Uma ideia (provavelmente não é a melhor idéia) seria para animar uma div para baixo para 300 e tem um temporizador que verifica a clientWidth da div.A função de temporizador constantemente define o canvas.width igual ao div.style.clientWidth.Desta forma, a tela animado para baixo com o seu boneco div.

Answer 2

A razão principal que isso não está fazendo nada, é que você só redimensionar o recipiente com jquery.cinética preenche o recipiente com elementos de tela.É absolutamente posições que estes elementos de tela para conseguir um efeito de camadas que, em seguida, permite trocar a ordem das camadas durante as animações.Estes posicionados absolutamente elementos de tela adquirir suas dimensões quando você definir novos cinética.Estágio()

Você não tem nenhuma regra css para definir exampleCanvas tente algo como isso:

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

também, kineticjs api tem .setSize() método, para estágio.setSize(largura, altura) pode ser um passo na direção de uma solução.assim, a animar a chamada de resposta utilize fase.setSize(300, 200);

Se isso não é ter o resultado desejado, você pode segmentar os elementos de tela em seu recipiente como:

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