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

Posted 2023-03-05

【中文标题】使用 jQuery (.animate) 和 KineticJS 框架调整画布大小

【英文标题】：Resize canvas size using jQuery (.animate) and KineticJS framework

【发布时间】：2012-02-19 14:51:12

【问题描述】：

我正在尝试使用 jQuery 调整 html5 画布元素的大小。 （注意：不是画布内的对象，而是元素的大小！）

仅使用 jQuery 的代码可以正常工作： http://jsfiddle.net/dAQBD/

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

我怀疑这是因为框架根据<div> - through - (var stage = new Kinetic.Stage("div", 500, 200);) 自行创建画布

有没有办法解决这个问题？现在不想改变框架，因为我在我的真实项目上做了很多（这只是虚拟代码）。谢谢。

（我知道我的小提琴会说“扩展”，而实际上它们的尺寸会减小。错字。）

【参考方案1】：

这没有做任何事情的主要原因是您只是使用 jquery 调整容器的大小。动力学用画布元素填充该容器。它绝对定位这些画布元素以实现分层效果，然后允许它在动画期间交换分层顺序。这些绝对定位的画布元素在您设置 new kinetic.Stage() 时获取它们的尺寸

你没有为 exampleCanvas 设置 css 规则尝试这样的事情：

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

​ 此外，kineticjs api 具有 .setSize() 方法，因此 stage.setSize(width, height) 可能是迈向解决方案的一步。所以，在动画回调中使用 stage.setSize(300, 200);

如果这没有达到预期的效果，您可以像这样定位容器中的画布元素：

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

【讨论】：

感谢您的回复，当我创建这个时，我对幕后的工作原理知之甚少，这让我查找了一些东西并创建了 ***.com/questions/9026543/… 线程。

【参考方案2】：

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

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