使用RapaelJS放大/缩小逻辑

Zooming in/out logic with RapaelJS

本文关键字：缩小 RapaelJS 放大使用更新时间：2023-09-26

因此，当您将闪光灯对象设置为100%宽/高时，最终会发生的情况是，当您拉伸闪光灯时，闪光灯电影会放大，并使窗口变大。也许事情并非如此，但看起来是这样的。

我正试图用RaphaelJS实现类似的目标。此处：http://jsfiddle.net/soparrissays/2rqtL/3/，我有一个简单的例子，当你使结果窗口变大时，圆圈会缩小和扩大；然而，它是倒退的。圆圈应该随着窗口大小的增加而变大，而不是变小。有人能认出这里发生了什么吗？

我正在尝试使用setViewBox来实现这一点。

viewBox是您可以看到的区域。你不希望这种情况改变——你希望能够看到原始的800*600区域，而不管比例如何。如果我的画布是800*600，我总是想看看这个空间。我想做的是缩放800*600区域以适应可见区域。您可以通过调整画布大小以适应窗口，并将viewBox设置为静态800 x 600来完成此操作。

请参阅：http://jsfiddle.net/WgTuF/1/

我不知道我是否完全正确，但有一个解决方案如下。

我所做的是，我将最大化窗口的innerwidth取为centPercentWidth。

然后窗口的onresize，我发现当前窗口宽度将给出最大化窗口宽度的多少倍。这是通过完成的

var times = centPercentWidth/width;。

之后，我有一个变量adjust，用于调整效果的夸张程度。您可以更改此值，并查看调整大小的效果如何因值而异。就目前而言，这是一种（默认行为）。

然后用times变量求出viewBox的第三个和第四个参数的值。（c和d）。

放了一把小提琴。http://jsfiddle.net/89Qsx/

试着调整小提琴中间带的大小。