javascript - 改进 Android 浏览器的多点触控性能

Question

我需要在 SVG 上实现捏合缩放和拖动平移。 此 SVG 显示为 480*480 像素，但其实际尺寸为 1920*1920 像素。

我选择了 HammerJS , 并监听 pinch 和 drag:

$(document).hammer().on('pinch', $.throttle(30, setZoom)).
on('drag', $.throttle(30, moveTo));

在这些方法(setZoom、moveTo)中，我已经阻止了事件的默认操作，如 suggested by Hammer creator

ev.gesture.preventDefault()

如您所见，我正在使用 jQuery.throttle 限制处理程序.

我的缩放和平移实现通过更改 SVG 的 viewbox 属性来工作。为了显示整个图像，我将上述属性设置为 viewbox="0 0 1920 1920"，为了显示特定的图像，我将其设置为 viewbox="100 100 1720 1720"。 (为了操作我使用的 SVG svg.js )

最后，SVG 具有以下结构:

• 一张图片(1920*1920 像素)，
• 20 行，在一个组内，代表一个网格，
• 大约 50 个组，每个组包含一个 ellipse 和一个 text > tspan 元素。

这是 SVG 代码的一部分:

<image id="SvgjsImage1027" xlink:href="/exams/still_picture/exam-4" width="1920" height="1920" x="0" y="0"></image>
<g id="SvgjsG1002" class="grid">
    <line id="SvgjsLine1003" x1="0" y1="0" x2="1920" y2="0"></line>
    …
</g>
<g id="SvgjsG1026" class="points">
    <g id="s10621674-24" class="threshold">
        <ellipse id="SvgjsEllipse1029" rx="7" ry="7" cx="1062" cy="1674" fill="#2b96d9"></ellipse>
        <text id="SvgjsText1030" style="font-size:40;font-family:Helvetica, Arial, sans-serif;text-anchor:middle;textLength:1;" font-size="40" text-anchor="middle" x="1067.6568542494924" y="1690.5354797464468">
            <tspan id="SvgjsTspan1031" dy="36.93333336" x="1067.6568542494924" style="font-size:40;font-family:Helvetica, Arial, sans-serif;text-anchor:middle;textLength:1;">24</tspan>
        </text>
    </g>
    …
</g>

问题

Android 上的性能非常糟糕。我们已经在 Samsung Galaxy Tab 2 上尝试了 Chrome 26 (Chrome 26.0.1410.58) 和 Chrome Beta 27 (Chrome 27.0.1453.74)，但感觉很慢。 我们尝试在 iPad 2(iOS 6 上的 Safari)上打开相同的页面，它运行正常，性能可与 native 应用相媲美。

我们可以尝试什么来提高 Android 的性能？我们不能切换到另一个浏览器(比如 Firefox Mobile)，因此解决方案必须在 HTML/Javascript 领域。

---

我们也尝试过使用一些库来处理捏合缩放和拖动平移(例如 jQuery.panzoom )，但我们没有得到更好的结果。

Answer 1

我们放弃了让它作为网络应用程序运行良好的尝试。

我们尝试使用 HTML 而不是 SVG，但我们没有看到显着的性能改进 — 这让我认为 Javascript 中的多点触控事件处理速度很慢(在 Android 上)。

由于我们计划分发包装我们网络应用程序的 native Android 应用程序，因此我们决定使用 native 应用程序处理缩放和平移。

基本上，当需要缩放和平移功能时，网络应用程序会通过网络套接字发送一些消息，这些消息会被 native 应用程序拦截。此时它在另一个之上显示另一个 Web View ，它加载了 只是 SVG(我们的 Web 应用程序创建和操作 SVG，序列化它并通过 Web 将它发送到 native 应用程序 socket )。因此，缩放和平移性能非常好，因为它们由 Web View 处理。最终用户不会注意到幕后发生的事情。