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



我正在尝试使用jQuery调整HTML5画布元素的大小。(注意:不是画布内的对象,而是元素的大小!)

它只使用jQuery就可以很好地处理我的代码:http://jsfiddle.net/dAQBD/

但当试图用KineticJS框架做同样的事情时,它根本不起作用。我的代码:http://jsfiddle.net/mLMSE/1/

我怀疑这是因为框架基于<div>到(var stage = new Kinetic.Stage("div", 500, 200);)创建画布本身

有什么办法解决这个问题吗?我现在不想更改框架,因为我已经在我的真实项目上做了很多工作(这只是伪代码)。谢谢

(我知道我的小提琴手说"膨胀",而实际上它们的尺寸减小了。打字。)

jQuery的animate获取CSS属性的映射。换句话说,您正在更改画布的CSS宽度,而不是画布的实际width属性。这很可能不是你想要的。您将不得不制作自己的animate函数(或者使用jQuery更聪明,因为它只在CSS上运行)。

你可以在这里做很多事情。一个想法(可能不是最好的想法)是将div动画化到300,并有一个计时器来检查div的clientWidth。计时器函数不断地将canvas.width设置为等于div.style.clientWidth。通过这种方式,画布将使用您的虚拟分区设置动画。

这没有起到任何作用的主要原因是您只使用jquery调整容器的大小。dynamic用画布元素填充容器。它绝对定位这些画布元素以实现分层效果,然后允许它在动画期间交换分层顺序。当你设置新的动能时,这些绝对定位的画布元素就会获得它们的尺寸。阶段()

例如,你没有css规则集Canvas尝试这样的东西:

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

​此外,kinetijs-api有.setSize()方法,因此stage.setSize(width,height)可能是迈向解决方案的一步。因此,在animate回调中使用stage.setSize(300200);

如果这没有得到想要的结果,你可以像这样瞄准容器中的画布元素:

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

最新更新