4

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

我和HammerJS一起去了，听了pinchand drag：

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

在这些方法（setZoom，moveTo）中，我已经阻止了事件的默认操作，正如Hammer creator 所建议的那样

ev.gesture.preventDefault()

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

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

最后，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），但我们没有得到更好的结果。

4

1 回答 1

2

我们放弃了试图让它作为网络应用程序正常工作的尝试。

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

由于我们计划分发一个封装我们的 Web 应用程序的原生 Android 应用程序，因此我们决定使用原生应用程序处理缩放和平移。

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

于 2013-06-14T07:32:40.790 回答