javascript – 改善Android浏览器的多点触控性能

2023年2月23日 293次阅读

我需要实现捏缩放和拖动以平移SVG.

此SVG以480 * 480像素显示,但其实际大小为1920 * 1920像素.

我跟HammerJS去了,听了捏和拖动：

$(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个组,每个组包含一个椭圆和一个文本> 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),但我们没有更好的结果.

最佳答案 我们放弃了试图让这个作为网络应用程序运行良好.

我们尝试使用HTML而不是SVG,但我们没有看到很好的性能提升 – 这让我觉得Javascript中的多点触控事件处理速度很慢(在Android上).

由于我们计划分发包含我们的Web应用程序的原生Android应用程序,因此我们决定使用本机应用程序处理缩放和平移.

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

点赞