使用jQuery(.animate)和KineticJS框架调整画布大小

Question

我正在尝试使用jQuery调整HTML5画布元素的大小。(注意：不是画布内的对象，而是元素的大小！) 仅使用jQuery时，我的代码可以正常工作：http://jsfiddle.net/dAQBD/。 但是当我尝试使用KineticJS框架做同样的事情时，它根本不起作用。我的代码：http://jsfiddle.net/mLMSE/1/。 我怀疑这是因为该框架基于

创建画布本身 - 通过 - (var stage = new Kinetic.Stage("div", 500, 200);)。有没有办法解决这个问题？由于我在真实项目中已经完成了很多工作（这只是虚拟代码），所以最好不要现在更改框架。谢谢。 (我知道我的代码片段写着“扩大”，但实际上它们缩小了。笔误。)

- Zar

Answer 1

jQuery的animate接受CSS属性映射。换句话说，你正在改变画布的CSS宽度，而不是画布实际的width属性。这很可能不是你想要的。你需要自己制作动画函数（或者更聪明地使用jQuery的函数，因为它只在CSS上操作）。

你可以在这里做很多事情。一个想法（可能不是最好的想法）是将一个div动画到300，并有一个计时器检查div的clientWidth。计时器函数不断将canvas.width设置为div.style.clientWidth。这样，画布随着虚拟div一起动画。

- Simon Sarris

Answer 2

这个代码没有起作用的主要原因是你只是使用jquery调整了容器的大小。kinetic会用canvas元素填充该容器。它绝对定位这些canvas元素以实现分层效果，然后在动画期间允许交换层次顺序。当你设置新的kinetic.Stage()时，这些绝对定位的canvas元素会获取它们的尺寸。

你还没有为exampleCanvas设置css规则，请尝试像这样做：

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

此外，KineticJS API有一个.setSize()方法，因此stage.setSize(width, height)可能是解决问题的一步。所以，在animate回调函数中使用stage.setSize(300, 200)；

如果这不产生所需的结果，则可以像这样针对容器中的canvas元素进行定位：

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

- Brent Smith

---

感谢您的回复，当我创建这个时，我对幕后的事情知之甚少，这促使我查找了一些资料并创建了http://stackoverflow.com/questions/9026543/animate-resize-of-html5-canvas-created-by-kineticjs-framework线程。 - Zar