我正在使用 svg 编辑器 2.7 版本,这里我需要使用 javascript 在 svg 中选择矩形的单独边界值。
<svg width="9000" height="100" style="border:1px solid black"> <rect x="9000" y="0" height="100" width="200"></rect> </svg>
我的矩形获得了这个选定的工具。但是我需要选择矩形的各个 Angular ,如下图所示
在svg编辑文件中包含mousedown、mousemove和mouseup事件。这里我使用GETBBOX()
函数来获取边界值。但我需要分割边界进行选择,如上图 2 所示。
这里正在研究鼠标悬停事件以获取 svg 中矩形的边界。但我没有实现。请为此指导我或将我拖入正确的道路。
var mouseOver = function(evt) {
evt.preventDefault();
var root_sctm = $('#svgcontent g')[0].getScreenCTM().inverse();
var pt = svgedit.math.transformPoint( evt.pageX, evt.pageY, root_sctm ),
mouse_x = pt.x * current_zoom,
mouse_y = pt.y * current_zoom;
var x = mouse_x / current_zoom,
y = mouse_y / current_zoom,
mouse_target = getMouseTarget(evt);
mouse_target =selectedElements[0];
switch (current_mode) {
case 'rect':
var test =selectedElements[0].getBBox();
console.log(test);
break;
}
最佳答案
这是一个 UI 问题,而不是编码问题。
- 在 mouseenter() 上
<rect>
,使用 4<line>
勾勒出框的轮廓并将其覆盖在` 上。 - 附加
mousedown()
和mousemove()
所有 4 行的事件监听器,因此您实际上可以单击它们并拖动它们。 - 更新
<rect>
每当拖动一条边时,x、y、宽度和高度值。 - 在 mouseleave() 上,销毁这 4 行并删除事件监听器。
这会跳过距离鼠标最近的边缘的计算。
可以使用 Snap SVG 或 RaphaelJS 来实现此 UI,为您节省一些低级编码。
关于javascript - 如何使用javascript获取svg中矩形标签的边界值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25969854/