svg 读取SVG文件并绘制矩形框选择图元

首先是SVG文件，里面包含了几个不同的图元：

<?xml version='1.0' standalone='no'?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-flat-20030114.dtd">
<svg width='1024' height='768'  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:cge="http://iec.ch/TC57/2005/SVG-schema#"><g id='Folder'><circle id='BlueCircle' cx='425' cy='425' r='20' style='fill:blue; '/><circle id='RedCircle' cx='125' cy='425' r='20' style='fill:red; '/>   <circle id='OrangeCircle' cx='225' cy='425' r='20' style='fill:orange;'/> <circle id='PinkCircle' cx='325' cy='425' r='20' style='fill:pink; '/><text id='DraggableText' x='20' y='200' style='fill:red; font-size:18px; font-weight:bold;'>Draggable Text</text><rect id='GreenRectangle' x='50' y='70' width='100' height='100' style='fill:green; '/><rect id='FolderRectangle' x='300' y='100' width='200' height='150' style='fill:tan; stroke:brown; stroke-width:3;'/></g>
</svg>

如下图：

接下来，读取SVG文件并并绘制矩形框选择图元，识别选中的图元：

 var canves = null;var svgDoc = null;var svgRoot = null;var rectObj = null;var time = null;var setSvg = new Set();var svgElements = null;var svgEleLen = null;var isMouseDown = false;var x1 = 0;var y1 = 0;var x2 = 0;var y2 = 0;var w = 0;var h = 0;$(function() {canves = document.getElementById("canves");canves.data = "../svg/svgtest.svg";//不能直接读取svg对象，有可能svg文件还没有加载完，会造成读取svg对象有错，只能在onload的方法中调用canves.onload = function() {svgDoc = canves.getSVGDocument();svgRoot = svgDoc.documentElement;//增加鼠标的事件svgRoot.addEventListener("mousedown", svgMouseDown, false);svgRoot.addEventListener("mousemove", svgMouseMove, false);svgRoot.addEventListener("mouseup", svgMouseUp, false);//获取SVG文件中子元素的属性，并将其保存svgElements = svgDoc.getElementById("Folder");svgEleLen = svgElements.children.length;for (var i = 0; i < svgEleLen; i++) {var ele = [];ele.id = svgElements.children[i].id;ele.nodeName = svgElements.children[i].nodeName;if (svgElements.children[i].nodeName == "rect") {ele.desc = svgElements.children[i].attributes[1].value+ "," + svgElements.children[i].attributes[2].value+ "," + svgElements.children[i].attributes[3].value+ "," + svgElements.children[i].attributes[4].value;ele.x = svgElements.children[i].attributes[1].value;ele.y = svgElements.children[i].attributes[2].value;ele.width = svgElements.children[i].attributes[3].value;ele.height = svgElements.children[i].attributes[4].value;} else if (svgElements.children[i].nodeName == "circle") {ele.desc = svgElements.children[i].attributes[1].value+ "," + svgElements.children[i].attributes[2].value+ "," + svgElements.children[i].attributes[3].value;ele.cx = svgElements.children[i].attributes[1].value;ele.cy = svgElements.children[i].attributes[2].value;ele.r = svgElements.children[i].attributes[3].value;} else if (svgElements.children[i].nodeName == "text") {ele.desc = svgElements.children[i].attributes[1].value+ "," + svgElements.children[i].attributes[2].value;ele.x = svgElements.children[i].attributes[1].value;ele.y = svgElements.children[i].attributes[2].value;}setSvg.add(ele);}}});//判断选择的图形是什么形状function judgeSelectedDraw() {$("tr[class='addtr']").remove();     var eles = [];setSvg.forEach(function(element, sameElement, setSvg) {var tr = "";//$("#tb_drawInfo").removeChild(".addtr");eles = element;if (eles.nodeName == "rect") {if ((eles.x >= x1) && (eles.y >= y1) && (eles.width <= w)&& (eles.height <= h)) {//alert(eles.id + ":is selected");tr = "<tr align='center' class='addtr'>" + "<td width='150'>"+ eles.nodeName + "<td width='150'>" + eles.id+ "</td>" + "<td width='150'>" + eles.desc+ "</td></tr>";$("#tb_drawInfo").append(tr);displayDialog();}} else if (eles.nodeName == "circle") {if ((eles.cx >= x1) && (eles.cy >= y1) && (eles.cx <= x2)&& (eles.cy <= y2) && ((eles.cy - y1) >= eles.r)&& ((eles.cx - x1) >= eles.r)) {//alert(eles.id + ":is selected");tr = "<tr align='center' class='addtr'>" + "<td width='150'>"+ eles.nodeName + "<td width='150'>" + eles.id+ "</td>" + "<td width='150'>" + eles.desc+ "</td></tr>";$("#tb_drawInfo").append(tr);displayDialog();}} else if (eles.nodeName == "text") {}});}//显示对话框function displayDialog(){$("#dialog_drawInfo").dialog({closed : false,modal : true,title : "操作选中下列图形："});}function svgMouseDown(e) {//左键点击时进行rect绘制if (e.button === 0) {isMouseDown = true;x1 = e.clientX;y1 = e.clientY;initRectObj();}}function svgMouseUp(e) {removeRect();judgeSelectedDraw();//alert("svgMouseUp");}function svgMouseMove(e) {x2 = e.clientX;y2 = e.clientY;if (isMouseDown) {updateRectObj();}}//绘制初始矩形框function initRectObj() {rectObj = document.createElementNS("http://www.w3.org/2000/svg", "rect");rectObj.setAttribute("id", "123");rectObj.setAttribute("x", x1);rectObj.setAttribute("y", y1);rectObj.setAttribute("width", 1);rectObj.setAttribute("height", 1);rectObj.setAttribute("style","fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0);");rectObj.setAttribute("style","fill:rgb(0,0,255);fill-opacity:0.1;stroke-width:1;stroke:rgb(0,0,0);stroke-dasharray:5 5;");if (svgRoot)svgRoot.appendChild(rectObj);elsealert("svg is null");}//鼠标移动，更新矩形框function updateRectObj() {var x = x1;var y = y1;w = x2 - x1;h = y2 - y1;rectObj.setAttribute("x", x);rectObj.setAttribute("y", y);if(w>0){rectObj.setAttribute("width", w);}if(h>0){rectObj.setAttribute("height", h);}}//鼠标抬起时删除动态创建的rect元素function removeRect() {isMouseDown = false;svgRoot.removeChild(rectObj);}

页面效果如下：

鼠标移动绘制了一个矩形框：

鼠标抬起，矩形框消失，显示信息：

svg 读取SVG文件并绘制矩形框选择图元相关推荐

利用cv2.rectangle()绘制矩形框(python)
文章目录 cv2.rectangle绘制矩形框使用解析范例总结 cv2.addWeighted绘制半透明框使用解析范例总结使用cv2.rectangle可以绘制矩形框,但要绘制半透明框使 ...
python PyQt5如何绘制矩形框？（画框/绘框）
参考代码: from PyQt5.QtWidgets import QWidget, QApplication, QLabel from PyQt5.QtCore import QRect, Qt f ...
【python】读取Excel文件并绘制图表
依赖的包: 1.xlrd 2.matplot 3.numpy 读取excel文件并绘制图表代码如下: 点击(此处)折叠或打开 import matplotlib.pyplot as plt impo ...
opencv进阶学习笔记6：使用鼠标在图像上绘制矩形框或者多边形框
基础版笔记传送门: python3+opencv学习笔记汇总目录(适合基础入门学习) 进阶版笔记目录: python+opencv进阶版学习笔记目录(适合有一定基础) 感兴趣区域传统绘制: openc ...
OpenCV中鼠标交互-绘制矩形框
OpenCV中鼠标交互-绘制矩形框 ·具体流程: 1.绑定回调函数 2.在回调函数中检测触发的事件 3.根据不同事件做出不同动作一.绑定回调函数 cv2.setMouseCallback('orig ...
[FFmpeg] 绘制矩形框
最简单的是使用滤镜 # 查看滤镜帮助 ffplay -h filter=drawbox # 单个矩形 ffplay -i fpx.gif -vf drawbox:x=10:y=10:w=50:h=50 ...
Opencv(六)模板匹配、轮廓检测、轮廓周围绘制矩形框和圆形框
模板匹配介绍模板匹配就是在整个图像区域发现与给定子图像匹配的小块区域. 所以模板匹配首先需要一个模板图像T(给定的子图像) 另外需要一个待检测的图像-源图像S 工作方法,在带检测图像上,从左到右,从 ...
pyqt5在图像上绘制矩形框
pyqt5在图像上绘制矩形框 from PyQt5.QtWidgets import QWidget, QApplication, QLabel from PyQt5.QtCore import QR ...
CAD绘制矩形框命令
该功能制可以绘制矩形,并能按指定值绘制倒角和圆角.该功能绘制出的矩形是封闭的单一实体. 1.单击菜单栏,"绘图->矩形框. 2.单击绘图工具栏"绘矩形框命令"按钮. ...

svg 读取SVG文件并绘制矩形框选择图元

svg 读取SVG文件并绘制矩形框选择图元相关推荐

最新文章

热门文章