可缩放 Kinetic.JS 矢量图答案

【问题标题】：Scalable Kinetic.JS vector map可缩放 Kinetic.JS 矢量图
【发布时间】：2014-04-02 01:33:43
【问题描述】：

我有一个带有巨大交互式可缩放矢量世界地图的 Flash 应用程序，由大量可选图层（例如人口地图、资源地图等）分隔，我需要将其移植到 html5 Kinetic.JS .所以，所有图层图形都在 swf/swc/fla 中。 htmlt5 中此类应用程序的性能最佳实践是什么？我应该将所有图形转换为 svg（矢量 swf 是否可能？）并在运行时简单地缩放它，还是将其光栅化为一些 mipmap（图形的预制缩放版本）并绘制预制图像而不是缩放会更好？

【问题讨论】：

标签： javascript html flash svg kineticjs

【解决方案1】：

KineticJS 是基于画布的，画布可以使用 .SVG 图像进行缩放，减少像素化。

更好的视觉效果

为了获得最佳视觉效果，如果可能，您应该坚持使用 Kinetic.Image 使用 .SVG 图像源。

更好的性能

最新版本的 Kinetic (5.1.0) 添加了 Kinetic.FastLayer，它通过消除事件系统的开销来提高绘图性能。

为了获得更好的性能，您可以对除用户交互层之外的所有地图+叠加层使用 FastLayers+缩放。

【讨论】：

感谢您的回答。我确定这是我对问题的错误形式化，但我在问这种情况下的性能优化。所以，我知道对 kinetic.js svg 的支持，但我认为缩放大量矢量图层会导致巨大的滞后。所以我在询问任何优化这个问题的方法（缓存的 mipmap、缓存的图层或纯 svg 缩放）。
我现在明白了。我已经修改了我的答案，以专注于更好的视觉和性能结果。干杯！