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上的性能非常糟糕。我们在三星Galaxy Tab 2上试过Chrome 26（Chrome 26.0.1410.58）和Chrome Beta 27（Chrome 27.0.1453.74），但感觉很迟钝。我们试图在iPad 2上打开相同的页面（iOS 6上的Safari），它的工作正常，性能与本机应用程序相当。

为了提高Android的性能，我们可以尝试哪些方法？我们无法切换到其他浏览器（例如，Firefox Mobile），因此解决方案必须位于HTML / Javascript域。

我们还尝试使用一些库来处理缩放以进行缩放并拖动到平移（例如jQuery.panzoom），但我们没有更好的结果。

Answer 1

我们放弃了尝试让它成为网络应用程序。

我们尝试使用HTML而不是SVG，但我们没有看到出色的性能提升 - 这让我觉得Javascript中的多点触控事件处理速度很慢（在Android上）。

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

基本上，当需要缩放和平移功能时，Web应用程序会通过Web套接字发送一些消息，这些消息由本机应用程序拦截。此时它会在另一个上面显示另一个Web视图，该视图加载了只是 SVG（我们的Web应用程序创建并操作SVG，将其序列化并通过Web将其发送到本机应用程序插座）。因此，缩放和平移性能非常好，因为它们是由Web视图处理的。最终用户没有注意到幕后发生的事情。

提高Android浏览器的多点触控性能

问题

1 个答案: