HTML5动画的调整画布大小由KineticJS框架创建 [英] Animate resize of HTML5 canvas created by KineticJS framework

问题描述

我试图改变一个HTML5的画布的的尺寸 =htt​​p://www.kineticjs.com/相对=nofollow的> KineticJS 框架 --that，不是画布里面的对象，但该元素的大小。

I'm trying to change the size of an HTML5 canvas element created by the KineticJS framework--that is, not the objects inside the canvas, but the element's size.

由于jQuery的 .animate 功能无法在这个问题（它改变CSS，我希望它改变元素的实际属性）被使用，我有制定 我自己的函数 使用内部的 stage.setSize（宽，高） 由KineticJS API提供的函数。
我在写的动画功能完全没有经验，所以我可能会接近的情况完全错误的。

Since the jQuery .animate function can't be used in this matter (it changes CSS, I want it to change the actual attributes of the element), I had to develop my own function that uses the internal stage.setSize(width, height) function provided by the KineticJS API. I have no experience at writing animation functions at all, so I might be approaching the situation completely wrong.

问题：
它的性能依赖，因此经常不够快（感谢给setInterval）。更何况，它只是部分适用于移动设备的（iPhone 4S的的iOS 5.0.1测试）的。任何解决方案具有或多或少的工作完美，即使是在移动设备上。

The problem: It is performance dependent, therefore often not fast enough (thanks to setInterval). Not to mention that it only partially works on mobile devices (iPhone 4S iOS 5.0.1 tested). Any solution has to work more or less flawlessly, even on mobile devices.

我在寻找不同的方法来改进这一功能。拍摄。

I'm looking for different ways to improve this function. Shoot.

的（对于那些谁没有得到看到链接到我的code; 的http：// jsfiddle.net/G4nuH/ animateResize 是相关功能。）的

(For those who didn't get see the link to my code; http://jsfiddle.net/G4nuH/animateResize is the relevant function.)

推荐答案

经过一番研究，我发现我自己哈克的解决方案。用一个例子 jQuery.animate 。不得不动画所有这些，因为KineticJS有几个背景图层。

After some research, I found my own hacky-solution. An example using jQuery.animate. Had to animate them all, since KineticJS has several background layers.

    //Gather all canvases
    var canvases = document.getElementsByTagName("canvas");

    //Animate their size
    for(var c in canvases) {
       $(canvases[c]).animate({
          'width': "100px",
          'height': "100px"
       }, 500);
    }

这篇关于HTML5动画的调整画布大小由KineticJS框架创建的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！