基于SVG的鼠标动态绘制矩形和动态放置图片

web开发中经常会遇到需要在图片上或画布上使用鼠标动态绘制图形，或者用图形或者小图片标注位置的需求，这里选择使用svg来实现。

一、在html中添加svg标签，并在其中放置图片（做背景）

<svg xmlns="http://www.w3.org/2000/svg" id="svgId" enable-background="new 0 0 900 454"viewBox="0 0 900 454" x="0px" y="0px" width="900" height="454" version="1.1"xml:space="preserve"><image id="imgId" x="0" y="0" width="900" height="454" href="your img_url"></image>
</svg>

二、绘制矩形

添加鼠标事件的监听函数，并在其中调用绘制矩形的函数。

/***初始化绘制矩形的鼠标绑定事件**/function rectMouseEventBind() {let svg = document.getElementById("svgId");let isComplete;// 矩形是否绘制结束// 鼠标点击摁下监听事件svg.onmousedown = function (ev) {let ce = ev || event;// 获取鼠标点击后的坐标x1 = ce.offsetX;y1 = ce.offsetY;isComplete= false;};// 鼠标移动事件监听svg.onmousemove = function (ev) {let ce = ev || event;let nx1 = ce.offsetX;let ny1 = ce.offsetY;if (!isComplete){if (((nx1 - x1) > 10 || (ny1 - y1) > 10) && nx1 > 0 && ny1 > 0) {drawRect(x1, y1, nx1 - x1, ny1 - y1, 0);}}};// 鼠标松开事件监听svg.onmouseup = function (ev) {let ce = ev || event;x2 = ce.offsetX;y2 = ce.offsetY;drawRect(x1, y1, x2 - x1, y2 - y1, 0);isComplete = true;};
}

绘制矩形函数

/*** 绘制矩形**/
function drawRect(px, py, width, height, id) {let svg = document.getElementById("svgId");// 删除之前画的矩形(边画边删除，否则会出现层叠在一起的矩形)let delRect = document.getElementById(id);if (delRect != null) {delRect.remove();}// 创建矩形let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");if (px >= 0 && py >= 0 && width >= 0 && height >= 0) {rect.setAttribute("id", id);rect.setAttribute("x", px);rect.setAttribute("y", py);rect.setAttribute("width", width);rect.setAttribute("height", height);rect.setAttribute("style", "fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0);fill-opacity:0.1;");// 将绘制好的矩形添加到svg中svg.appendChild(rect);}
}

三、打点

这里使用放置更小图片的方式

添加鼠标事件的监听函数，并在其中调用绘制添加小图片的函数。

/***初始化放置图片的鼠标绑定事件**/
function pointMouseEventBind() {let svg = document.getElementById("svgId");let isComplete;// 是否绘制结束svg.onmousedown = function (ev) {let ce = ev || event;x1 = ce.offsetX;y1 = ce.offsetY;drawImg(x1, y1, 0);};svg.onmouseup = function (ev) {completeFlag = true;};
}

绘制小图片

/*** 打点（放置小图片）**/
function drawImg(px, py, width, height, id) {let svg = document.getElementById("svgId");let svgImg = document.createElementNS('http://www.w3.org/2000/svg', 'image');svgImg .setAttribute("id", id);svgImg .setAttribute("x", px - 11);svgImg .setAttribute("y", py - 24);svgImg .setAttribute('height', '32');svgImg .setAttribute('width', '20');svgImg .setAttribute('href', 'your img url');// 绘制svg .appendChild(svgImg);
}

四、最终效果

基于SVG的鼠标动态绘制矩形和动态放置图片相关推荐

OpenCV中鼠标交互-绘制矩形框
OpenCV中鼠标交互-绘制矩形框 ·具体流程: 1.绑定回调函数 2.在回调函数中检测触发的事件 3.根据不同事件做出不同动作一.绑定回调函数 cv2.setMouseCallback('orig ...
基于JQuery实现鼠标滑过（类似hover）图片（或Canvas），实时获取鼠标坐标位置
前言: 尝试制作web端物体标注的时候,虽然利用Canvas可以标注物体,但缺少像LabelImg那样可以利用十字星定位鼠标起点的辅助功能.一直认为可以通过鼠标hover事件实时获取鼠标位置,尝试后无 ...
鼠标移动框选动态绘制图形，基于zrender
本文只介绍根据鼠标事件动态绘制矩形方法 zrender实现简易画板功能可绘制大部分常用图形在文章末尾可参考像下图这样,可随心所欲绘制你想绘制的矩形: 完整代码:(有详细注释,有任何疑问欢迎留言) & ...
svg 读取SVG文件并绘制矩形框选择图元
首先是SVG文件,里面包含了几个不同的图元: <?xml version='1.0' standalone='no'?> <!DOCTYPE svg PUBLIC "-// ...
Python，OpenCV鼠标事件进行矩形、圆形的绘制（随机颜色、随机半径）
Python,OpenCV鼠标事件进行矩形.圆形的绘制(随机颜色.随机半径) 1. 效果图 2. 源码参考这篇博客将介绍鼠标事件,并介绍鼠标事件矩形.圆形的绘制: 所有的鼠标事件(左键按下.左键释 ...
利用svg实现鼠标绘制箭头
使用svg实现鼠标拖动绘制箭头 <template><div id="svgMain"><svg version="1.1"id= ...
Leaflet学习之路五——动态绘制图形(点、线、圆、多边形)
leaflet动态绘制图形动态绘点动态绘线动态绘多边形动态绘制矩形 2020.3.16更新更新日志: 2019.1.14:更新了绘制多边形时tmpline没有移除的问题 2019.1.15: ...
esri-leaflet入门教程（5）- 动态绘制图形
esri-leaflet入门教程(5)- 动态绘制图形 by 李远祥在上一章节中已经说明了esr-leaflet是如何加载ArcGIS Server提供的各种服务,这些都是服务本身来决定的,API脚 ...
python 使用opencv在图片上绘制矩形、圆形以及中英文
最近看了下python的第三方库opencv,在python中用来对图片进行一些简单处理还是非常好用的,比如在图形上画矩形框,圆框,指示线,椭圆以及文字等,只需要调用几个相应的函数,设置好起止坐标点以 ...

基于SVG的鼠标动态绘制矩形和动态放置图片

一、在html中添加svg标签，并在其中放置图片（做背景）

二、绘制矩形

三、打点

四、最终效果

基于SVG的鼠标动态绘制矩形和动态放置图片相关推荐

最新文章

热门文章