如何添加单击并拖动来缩放 SVG 中的图像？
我想让访问者通过单击并拖动来缩放图像：
<html>
<body>
<svg>
<image>
是否有 JavaScript 库可以帮助我？
方法，但我仍然需要编写大量 JS 来：
- 我注意到 Raphael 有点击和拖动 图像的角落
- 使角落附近的区域可选择
- 为角落绘制图标，以便很明显它们是可选择的
- 添加单击、拖放至角落
- 更新图像的尺寸
我可以做到所有这些，但听起来很耗时。我应该使用开源脚本吗？其他建议？
I want to let visitors scale the image using click-and-drag:
<html>
<body>
<svg>
<image>
Is there a JavaScript library that will help me?
I notice Raphael has click and drag methods but I will still have to write a lot of JS to:
- Find the corners of the image
- Make the area near the corners selectable
- Draw icons for the corners so it's obvious they are selectable
- Add click, drag and drop to the corners
- Update the dimensions of the image
I could do all that but it sounds time-consuming. Is there an open-source script I should use? Other suggestions?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我在这篇文章中找到了这个解决方案：
SVG 中的可拖动和可调整大小。
在答案中，您可以找到一个jsfiddle链接：http://jsfiddle.net/tmkfs/。您可以通过单击并拖动框的一角来调整框的大小。希望这段代码可以帮助你。
I found this solution at this post:
Draggables and Resizables in SVG.
In the answer, you can find a jsfiddle link: http://jsfiddle.net/tmkfs/. You can resize the box by clicking and dragging the corner of the box. Hope this code could help you.
据我所知没有。我需要做同样的事情，但很惊讶我还没有找到插件，甚至还没有找到如何使用 Rahpeal.js 执行此操作的示例。因为这似乎是很多人想要用 SVG 或 Rapheal.js 做的事情，我很惊讶没有内置的方法来做到这一点（我本以为缩放 + 拖动可以做到这一点，但事实并非如此）就像看起来一样简单）。
我需要这个功能，所以我自己构建了它。我遇到了一个小障碍（此处记录：Raphael.js 拖动缩放会导致奇怪的跳跃行为），但刚刚开始工作。完成后，如果您愿意，我可以在 jsfiddle 或 github 上发布我的解决方案。
Not that I know of. I need to do the same thing and am surprised I haven't found a plugin or even an example of how to do this with Rahpeal.js yet. Since this seems like something a lot of people would want to do with SVG or Rapheal.js I'm suprised there isn't a built in way to do it (I would have thought scale + drag would do this but it wasn't as easy as it would have seemed).
I need this functionality so I've been building it out myself. I ran into a little snag (documented here: Raphael.js drag with scale causes weird jumping behavior) but just got it working. Once I'm finished, I can post my solution in a jsfiddle or on github when I'm done if you would like.
你应该看看 SvgKit 它提供了很好的操作库 - 生成 svg，包括使用 javascript 进行事件处理。
来自官方文档：
事件演示在这里。
You should have a look to SvgKit It provides nice library to manipulate - generate svg's including event handling using javascript.
From official documentation:
Event demos is here.