Canvas 调整窗口大小后如何(有效)重新定位KineticJS形状?

Canvas 调整窗口大小后如何(有效)重新定位KineticJS形状?,canvas,kineticjs,Canvas,Kineticjs,我目前正在使用KineticJS作为窗口填充画布应用程序。画布包含多个形状,这些形状主要相对于屏幕的中心定位,尽管还有一些其他形状将定位在屏幕的边缘 第一次显示页面时计算所有这些坐标不是问题,但我还没有找到在调整窗口大小后/调整窗口大小时处理形状坐标的方法 通过jQuery,在调整窗口大小时,舞台及其层的大小也在调整,但由于这不会改变形状的坐标,以前居中的项目不再居中 我真的需要遍历每个形状并重新计算它们的坐标吗?这不是小事,因为它们是用不同的公式计算的 Sidenote,我使用直接访问画布(=

我目前正在使用KineticJS作为窗口填充画布应用程序。画布包含多个形状,这些形状主要相对于屏幕的中心定位,尽管还有一些其他形状将定位在屏幕的边缘

第一次显示页面时计算所有这些坐标不是问题,但我还没有找到在调整窗口大小后/调整窗口大小时处理形状坐标的方法

通过jQuery,在调整窗口大小时,舞台及其层的大小也在调整,但由于这不会改变形状的坐标,以前居中的项目不再居中

我真的需要遍历每个形状并重新计算它们的坐标吗?这不是小事,因为它们是用不同的公式计算的


Sidenote,我使用直接访问画布(=w/o KineticJS)实现了相同的应用程序,并通过重新渲染整个画布来处理调整大小;)由于渲染方法包括坐标计算,因此所有内容始终位于正确的位置

我通过为所有层定义偏移量并在窗口调整大小后重新计算这些偏移量,解决了我的问题。尽管不完美,但计算8个值(4*x+y)远比计算数百个值好


如果有人知道更好的解决方案,我还是会感兴趣的

你会坚持做你想做的事。。不幸的是,手动/直接方式无法提供舒适的事件处理等功能,因此我宁愿继续迁移到kineicjs;)无法想象像调整窗口大小这样的基本问题会带来如此大的问题:)为什么不在kineticjs中缩放整个舞台,这样就不需要重新计算了。看看我制作的这个行星轨道调整器:“cs.neiu.edu/~tsam/planets”(拖动太阳调整大小)。这将使用比例,而不是重新计算位置。在调整窗口大小时,同样的逻辑也可以应用于窗口大小和缩放阶段。因为我使用了几个基于光栅的图像,调整大小会缩放这些图像并降低其清晰度。除此之外,我的形状周围的房间应该可以自由放置其他元素;)