javascript – 通过在它们周围进行自由绘图来选择SVG元素

我正在开发一个项目,我想围绕一些SVG元素绘制一条线,以便选择区域内的对象.

这是我现在所拥有的截图.我已经使用Paint来添加线条,以便清楚地表明我想要实现的目标.我想在绘制的圆圈内选择两个矩形.

Screenshot http://s23.postimage.org/y6t5t9be3/Screen_Shot_2013_02_26_at_15_31_26.png

我看到了许多必须解决的步骤:

>在mousedown创建一个path元素并记录鼠标移动直到mouseup
>如果用户没有画圆圈,请关闭路径
>找到完全或部分在圆圈内的svg元素

你看到哪种方法,你对如何去做有什么建议吗?

我正在使用D3.js.这个slide(作者D3的创建者Mike Bostock)可能会很有趣.

解决方法

我会采取以下步骤:

>获取写意形式的aabb(或最小/最大框),
>找到aabb与自由形式重叠的所有元素并将其保存在列表中,
>获得写意形状的凸包,
>测试列表元素中的每个顶点或某些顶点是否位于凸包内

根据您是否测试所有顶点位于凸包内,您可以确定该元素是完全位于徒手画图内还是仅重叠.

不幸的是,我对d3.js并不熟悉,但只是猜测它提供了获取凸包,aabbs和测试点在多边形内的方法.可能它甚至可以让你在第2步中进行aabb查询以找到重叠的aabb.

祝好运…

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)