0

我正在使用 SVGPanZoom 在我的混合 Android 应用程序中管理 SVG 图像的缩放（所有意图和目的都与 Chrome 中的行为相同）。虽然缩放效果很好，但我发现了一个奇怪的问题。我原来的内联 SVG 元素是这样的

 <svg id='puzzle' viewBox='0 0 1600 770' preserveAspectRatio='none'
  width='100vw' height='85.5vh' fill-rule='evenodd' clip-rule='evenodd' 
  stroke-linejoin='round' stroke-miterlimit='1.414' 
  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http:// 
  www.w3.org/1999/xlink'>

最初，这个 SVG 元素是空的，并在运行时从 JavaScript 以编程方式填充，之后我按如下方式启动 SVGPanZoom

var panZoom = svgPanZoom('#puzzle', 
{panEnabled:false,controlIconsEnabled:false,
zoomEnabled:true,dblClickZoomEnabled:true,onZoom:postZoom});

panZoom.refreshRate = 10;
panZoom.zoomScaleSensitivity = 0.02;

我遇到的问题是 - 我希望我的 SVG 图像填充可用区域，100vw x 85.5vh完全做到这一点，我通过preserveAspectRatio="none"上面的属性指示它以及viewBox="0 0 1600 770" attribute. I have found that this works - so long as I don't use SVGPanZoom. As soon as I initiate panZoom thezoomBox`属性被剥离，我最终得到一个不就其默认的拉伸/填充行为而言，其行为相当。

SVGPanZoom 被广泛使用，所以我认为这种行为是由于我没有正确设置它。深入研究我发现 SVGPanZoom 创建的代码cacheViewBox，然后继续删除原始的 zoomBox 属性。

如果在该缩放工作之后并且应用程序的原始行为没有改变（这不是我发现的），那很好。我在这里做错了什么？

4

2 回答 2

1

我最近也遇到了这个问题。根据我的研究，这就是图书馆的工作方式。我现在选择忍受这个限制，但我发现了其他几个可能按照你想要的方式工作的库（我还没有尝试过）：

  • jquery.panzoom是一个 jquery 库，它提供了这个功能并且还有一些不错的特性。我知道很多人试图避免使用 jquery，但它很小，可以做你想做的事。它处理 SVG，但我不知道它对 viewBox 属性做了什么。
  • react-svg-pan-zoom是一个 react 组件，如果你在 react 中工作，它可能很有用。

我也尝试过PanZoom库，但这也受到相同的 viewBox 限制。

于 2019-05-21T17:55:15.950 回答
1

给遇到此线程的任何人的说明。最后我放弃了 SVGPanZoom 并决定完全避开使用任何 pan/zoom 库的路线。同时，我决定完全停止使用 SVG viewBox，并通过 SVG 转换完全自己处理所有缩放/平移。涉及的核心步骤

  • 将整个 SVG 内容包装在一个组中，以便更轻松地管理转换。我使用该组的id属性gOuter
  • 设置 SVG 的初始比例以占据所需的客户矩形。在我的情况下，我有一个原件viewBox打算0 0 1600 770占据 100% 的屏幕宽度和 85% 的屏幕高度。所以我的缩放比例是scaleX = 1600/window.innerWidth和scaleY = 770/)0.85*window.innerHeight)。
  • 将此初始变换应用于包装外部组，gOuter.setAttribute('transform','0 0 scaleX,scaleY)
  • 现在，为了缩放到原始 viewBox 中虚拟左上角坐标为的对象，Ox,Oy您将使用变换

gOuter.setAttribute('transform',
scale(scaleX,scaleY) translate(-Ox,-Oy) scale(2*scaleX,2*scaleY) translate(Ox,Oy))

放大 1 倍x 2。这里要了解的重要事项

  • 在 SVG 中，变换是从右到左应用的。
  • 在这里，我们将缩放点转换为顶部 lhs 缩放，然后将其转换回其原始位置。
  • 问题是我们还需要通过初始缩放来允许原始缩放级别，因此我们将其标记为最后一个变换

这使您可以完全控制缩放过程，并且作为附带好处，操作变得比使用平移/缩放库时更加平滑。

于 2019-05-26T04:54:14.567 回答