vue中 使用SVG实现鼠标点击绘图 提示鼠标移动位置 显示绘制坐标位置
2024-10-19 15:43:32
<div class="div1"> <svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="100%" height="500px"> </svg> </div> methods:{ svgLoad(){ var ming = 'http://www.w3.org/2000/svg'; var oSvg = document.getElementById('svg1'); var oPolyLine = null; var pointsNum = ''; var lineText = null; function createTag(tagName, tagAttr) { let tag = document.createElementNS(ming, tagName); for (var attr in tagAttr) { tag.setAttribute(attr, tagAttr[attr]); } return tag; } var obj = document.querySelectorAll('.div1')[]; obj.appendChild(createTag('svg', { 'xmlns': ming })); oSvg.onmousedown = function(ev) { if (!oPolyLine) { oPolyLine = createTag('polyline', { 'fill': 'none', 'stroke': 'red', 'stroke-width': '' }); oSvg.appendChild(oPolyLine); } var x = ev.clientX - obj.offsetLeft; var y = ev.clientY - obj.offsetTop; if (pointsNum == '') { pointsNum = x + ',' + y; } else { pointsNum += ',' + x + ',' + y; } var theText = createTag('text', {//绘制鼠标移动位置坐标 'fill': 'red' }); oSvg.appendChild(theText); oPolyLine.setAttribute('points', pointsNum); theText.setAttribute('x',x); theText.setAttribute('y',y-); theText.innerHTML=x + ',' + y; var oCircle = createTag('circle', {//绘制线条起始点 'cx': x, 'cy': y, 'r': '', 'fill': 'white', 'stroke': 'red', 'stroke-width': }); oSvg.appendChild(oCircle); if (ev.button === ) { oSvg.onmousemove = null; oSvg.oncontextmenu = function() { oSvg.onmousemove = null; return false; }; } else { oSvg.onmousemove = function(ev) {//鼠标移动事件 var ev = ev || window.event; if (!lineText) {//显示鼠标移动坐标 lineText = createTag('text', { 'fill': 'red', 'x': ev.clientX - obj.offsetLeft, 'y': ev.clientY - obj.offsetTop }); var x = ev.clientX - obj.offsetLeft; var y = ev.clientY - obj.offsetTop; lineText.innerHTML= x + ',' + y;; oSvg.appendChild(lineText); } else{ var x = ev.clientX - obj.offsetLeft; var y = ev.clientY - obj.offsetTop; lineText.setAttribute('x',x,'y',y); lineText.innerHTML= x + ',' + y;; } if (oPolyLine) { var x = ev.clientX - obj.offsetLeft; var y = ev.clientY - obj.offsetTop; oPolyLine.setAttribute('points', pointsNum + ',' + x + ',' + y); } }; } } }, }
最新文章
- JAVA多态
- neo4j-java连接
- 黑马程序员+SQL基础(下)
- css中important的用处
- 更改Mysql数据库中的数据出现乱码问题
- AES加密 16进制与二进制转换
- Case Study: Random Number Generation(翻译教材)
- Commons Math - Primes
- NHibernate多对多关联映射的实现
- oracle常用数据类型
- c# 高斯模糊
- LVM 命令集总结(转)
- 继承,多态,集合,面向对象,XML文件解析,TreeView动态加载综合练习----->;网络电视精灵项目练习、分析
- Linux基础命令讲解(一)
- 移动端APP列表点透事件处理方法
- ios开发-程序压后台后,悄悄的抓取数据~~
- c++之sizeof的用法
- 使用SpringSecurity保护方法应用
- Linux内核驱动之GPIO子系统(一)GPIO的使用【转】
- for&;while循环