使用 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
属性。这很可能不是您想要的。您将必须创建自己的动画函数(或者使用 jQuery 更聪明,因为它只在 CSS 上运行)。
您可以在这里做很多事情。一种想法(可能不是最好的想法)是将 div 动画化为 300,并使用一个计时器来检查 div 的 clientWidth。定时器功能不断设置 canvas.width
等于 div.style.clientWidth
. 。这样画布就会随着你的虚拟 div 一起向下动画。
其他提示
这没有做任何事情的主要原因是您只是使用 jquery 调整容器的大小。Kinetic 用画布元素填充该容器。它绝对定位这些画布元素以实现分层效果,然后允许它在动画期间交换分层顺序。当您设置 new Kinetic.Stage() 时,这些绝对定位的画布元素会获取其尺寸
您没有为 exampleCanvas 设置 css 规则,请尝试如下操作:
#exampleCanvas{ overflow: hidden; width: 500px; height: 200px; border: 2px solid red; position: relative; }
另外,kineticjs api具有.setsize()方法,因此stage.setsize(宽度,高度)可能是迈向解决方案的一步。因此,在动画回调中使用 stage.setSize(300, 200);
如果这没有达到预期的结果,您可以将画布元素定位到容器中,如下所示:
$("#exampleCanvas").children("canvas").animate( ... );