如何在SVG中添加点击和拖动以缩放图像？

Question

5

我希望让访问者通过点击和拖拽来缩放图片：

<html>
    <body>
        <svg>
            <image>

有没有一个能帮助我的JavaScript库？

我注意到Raphael具有点击和拖动方法，但我仍然需要编写大量JS来完成以下任务：

我可以做到这一点，但听起来很耗时间。有没有开源脚本我应该使用？其他建议吗？

- ram1

3个回答

1

据我所知没有。我需要做同样的事情，但惊讶的是我还没有找到一个插件或者一个如何使用Rahpeal.js实现这个功能的例子。由于这似乎是很多人想要在SVG或Rapheal.js中做的事情，我很惊讶没有内置的方法来实现它（我原以为缩放+拖动可以做到这一点，但它并不像看起来那么容易）。

我需要这个功能，所以我一直在自己构建它。我遇到了一个小问题（在这里记录：Raphael.js drag with scale causes weird jumping behavior），但现在已经解决了。一旦完成，如果您愿意，我可以在jsfiddle或github上发布我的解决方案。

- chuckles

好的，知道了。是的，请在完成后分享您的解决方案。 - ram1

1

你应该看一下SvgKit，它提供了一个很好的库来操作和生成svg，包括使用javascript进行事件处理。

从官方文档中可以看到：

为事件处理添加到SVGKit对象的附加功能。在SVG中，将鼠标坐标转换为本地坐标可能会很棘手。SVGEvent具有启用可拖动项目、可旋转项目以及防止对项目进行平移和缩放的例程。

事件演示在这里。

- edigu

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- cabreracanal · Accepted Answer

我在这篇文章中找到了这个解决方案: SVG中的可拖动和可调整大小的元素。

在答案中，你可以找到一个jsfiddle链接: http://jsfiddle.net/tmkfs/。你可以通过点击并拖动框的角来调整框的大小。希望这段代码能对您有所帮助。