开源 html5 + svg 标注工具 （点标，框标，曲线标） 目前暂时写到图形的绘制与变形，后续完善

最新推荐文章于 2024-05-11 17:37:14 发布
最新推荐文章于 2024-05-11 17:37:14 发布
阅读量8.4k 收藏 3
点赞数 4
分类专栏： 前端 文章标签： svg html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dongchengxuyuan/article/details/85763406
版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        .drawActive{
            color: red;
        }
    </style>
    <body>
        <ul >
            <li>
                <button class='rectBtn drawActive'>框标</button>
            </li>
            <li>
                <button class='pointBtn'>点标</button>
            </li>
            <li>
                <button class='lineBtn'>曲线标</button>
            </li>
            <li>
                <button class='regionBtn'>区域标</button>
            </li>
        </ul>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.0" style="background:grey;height: 600px;width:100%">
            <path d="M 366 161 C 366 161 515 266 515 266" stroke="black"/>
        </svg>
        <script>
            var operateType = 'draw' //当前svg操作类型  draw 为 画图   edit 为编辑中
            var editRect = null;//确定不动的点
            var drawType = 'rect'; //标注类型默认框标
            var drawColor = 'red'
            var drawBtnDoms = document.getElementsByTagName('ul')[0].getElementsByTagName('button')
            var drawElement = null; //当前移动的对象
            var pathAssistLineElement = null;//0为定义断电
            var pathAssistRectElement = null;
            var assistElementArray = [];
            for (var i = 0 ; i < drawBtnDoms.length ; i ++ ){
                drawBtnDoms[i].onclick = function(){
                    if(!this.classList.contains('drawActive')){
                        var sblingsDoms = document.getElementsByTagName('ul')[0].querySelectorAll('button')
                        for (var j = 0 ; j < sblingsDoms.length ; j++){
                            sblingsDoms[j].classList.remove('drawActive');
                        }
                        this.classList.add('drawActive');
                        switch(this.innerHTML)
                            {
                                case '框标':
                                  drawType = 'rect';
                                  break;
                                case '点标':
                                  drawType = 'point';
                                  break;
                                case '曲线标':
                                  drawType = 'line';
                                  break;
                                default:
                                  drawType = 'regionBtn';
                            }
                    }
                }
            }
            var svgDom = document.querySelector('svg');
            var isclick= true;
            //svg画布上 鼠标按下事件
            svgDom.onmousedown = function(e){
                if(!isclick){//防止点击过快
                    return false;
                }else{
                    clickQuick();
                }
                if(e.button==0  && (operateType=='draw'||operateType=='edit')){//当前为画图操作
                    switch(drawType)
                       {
                             case 'rect':
                              //判断是否进入编辑边缘 
                                  if(e.target.tagName=='rect' && e.target.dataset.dataType == 'assistRect'){
                                       var rectId = e.target.getAttribute('name');
                                   drawElement = document.getElementById(rectId);
                                   var startX = parseFloat(drawElement.getAttribute('x'));
                                      var startY = parseFloat(drawElement.getAttribute('y'));
                                      var startWidth = parseFloat(drawElement.getAttribute('width'));
                                      var startHeight = parseFloat(drawElement.getAttribute('height'));
                                      var assistX = parseFloat(e.target.getAttribute('x')) + 2;
                                      var assistY = parseFloat(e.target.getAttribute('y')) + 2;
                                      if(assistX==startX && assistY == startY){
                                           editRect=[startX+startWidth,startY+startHeight];
                                      }else if(assistX!=startX && assistY == startY){
                                           editRect=[startX,startY+startHeight];
                                      }else if(assistX!=startX && assistY != startY){
                                           editRect=[startX,startY];
                                      }else{
                                           editRect=[startX+startWidth,startY];
                                      }
                                  operateType = 'edit';
                                  drawElementStyle(2,e.target);
                                  }else{
                                       operateType = 'draw';
                                  }
                                 if(operateType=='draw'){
                                     var currentX = e.offsetX;
                                     var currentY = e.offsetY;
                                     drawElement = document.createElementNS('http://www.w3.org/2000/svg','rect');
                                     drawElement.setAttribute('x',currentX);
                                     drawElement.setAttribute('y',currentY);
                                     drawElement.setAttribute('width',0);
                                     drawElement.setAttribute('height',0);
                                     drawElement.dataset.dataType = 'markRect';
                                     svgDom.appendChild(drawElement);
                                     drawElementStyle(2,drawElement);
                                 }
                                 break;
                           case 'point':
                               //判断是否进入编辑边缘 
                               if(e.target.tagName=='circle'){
                                   drawElement = e.target;  
                                   operateType = 'edit';
                               }else{
                                      operateType = 'draw'; 
                               }
                               if(operateType=='draw'){
                                    var currentX = e.offsetX;
                                        var currentY = e.offsetY;
                                        drawElement = document.createElementNS('http://www.w3.org/2000/svg','circle');    
                                        drawElement.setAttribute('cx',currentX);
                                        drawElement.setAttribute('cy',currentY);
                                        drawElement.setAttribute('r',2);
                                        svgDom.appendChild(drawElement);
                                        drawCircleStyle(0,drawElement);
                               }
                               break;  
                           case 'line':
                               if(operateType=='draw'){
                                    if(drawElement==null){//曲线区域绘画起点
                                           //定义当前操作的曲线区域对象
                                           drawElement = document.createElementNS('http://www.w3.org/2000/svg','path');
                                           //定义起点
                                           var currentStartPath = [e.offsetX,e.offsetY]
                                           drawElement.setAttribute('d','M '+currentStartPath.join(' ')+' C '+currentStartPath.join(' ')+' '+currentStartPath.join(' ')+' '+currentStartPath.join(' '));
                                           var rectId = getUuid();
                                        drawElement.setAttribute('id',rectId);
                                        drawElement.style.fill = 'none';
                                        drawElement.style.stroke = 'black';
                                        drawElement.style.strokeWidth = 2;
                                        svgDom.appendChild(drawElement)
                                    }else{
                                        debugger;
                                        if(e.target.tagName=='rect' && e.target.dataset.dataType == 'pathAssistRect' 
                                        && drawElement.getAttribute('id') == e.target.getAttribute('name')){
                                            debugger;
                                            var currentD = drawElement.getAttribute('d').split(' ');
                                            currentD = currentD.splice(0,currentD.length-7)
                                            currentD.push('z')
                                            drawElement.setAttribute('d',currentD.join(' '));
                                            //清空
                                            drawElement = null;
                                            pathAssistLineElement = null;
                                            pathAssistRectElement = null;
                                            return false;
                                        }
                                        var pathDarray = drawElement.getAttribute('d').split(' ');
                                        var lastItemY = pathDarray[pathDarray.length-1];
                                        var lastItemX = pathDarray[pathDarray.length-2];
                                        var lastItem = [lastItemX,lastItemY];
                                        pathDarray.push('C',lastItem.join(' '),lastItem.join(' '),lastItem.join(' '));
                                        drawElement.setAttribute('d',pathDarray.join(' '))
                                    }
                                    var currentPathId = drawElement.getAttribute('id');
                                       //定义端点线
                                       pathAssistLineElement = document.createElementNS('http://www.w3.org/2000/svg','line');
                                       pathAssistLineElement.setAttribute('x1',e.offsetX);
                                       pathAssistLineElement.setAttribute('y1',e.offsetY);
                                       pathAssistLineElement.setAttribute('x2',e.offsetX);
                                       pathAssistLineElement.setAttribute('y2',e.offsetY);
                                       pathAssistLineElement.setAttribute('name',currentPathId);
                                       pathAssistLineElement.dataset.dataType = 'pathAssistLine'
                                       pathAssistLineElement.style.stroke = 'red';
                                       pathAssistLineElement.style.strokeWidth = 1;
                                       svgDom.appendChild(pathAssistLineElement);
                                       //定义端点
                                       pathAssistRectElement = document.createElementNS('http://www.w3.org/2000/svg','rect');
                                       pathAssistRectElement.setAttribute('x',e.offsetX-1);
                                       pathAssistRectElement.setAttribute('y',e.offsetY-1);
                                       pathAssistRectElement.setAttribute('width',4);
                                       pathAssistRectElement.setAttribute('height',4);
                                       pathAssistRectElement.dataset.dataType = 'pathAssistRect';
                                       pathAssistRectElement.dataset.dataDrawBegin = true;
                                       pathAssistRectElement.setAttribute('name',currentPathId);
                                       svgDom.appendChild(pathAssistRectElement);
                               }
                       }
                   }
            }
            
            //svg画布上 鼠标移动事件
            svgDom.onmousemove = function(e){
                if(drawElement==null){
                    return false;
                }
                if(e.button==0  && (operateType=='draw'||operateType=='edit')){//当前为画图操作
                    switch(drawType)
                       {
                             case 'rect':
                                 if(operateType=='draw'){
                                      var currentX = e.offsetX;
                                      var currentY = e.offsetY;
                                      var startX = drawElement.getAttribute('x');
                                      var startY = drawElement.getAttribute('y');
                                      var rectX = (currentX > startX)? startX:currentX;
                                      var rectY = (currentY > startY)? startY:currentY;
                                      var rectWith = Math.abs(currentX - startX);
                                      var rectHeight = Math.abs(currentY - startY);
                                      drawElement.setAttribute('x',rectX);
                                      drawElement.setAttribute('y',rectY);
                                      drawElement.setAttribute('width',rectWith);
                                      drawElement.setAttribute('height',rectHeight);
                                 }else if(operateType=='edit'){
                                  var currentX = e.offsetX;
                                      var currentY = e.offsetY;
                                      //计算不动点坐标
                                      var startX = editRect[0];
                                      var startY = editRect[1];
                                      var rectX = (currentX > startX)? startX:currentX;
                                      var rectY = (currentY > startY)? startY:currentY;
                                      var rectWith = Math.abs(currentX - startX);
                                      var rectHeight = Math.abs(currentY - startY);
                                      drawElement.setAttribute('x',rectX);
                                      drawElement.setAttribute('y',rectY);
                                      drawElement.setAttribute('width',rectWith);
                                      drawElement.setAttribute('height',rectHeight);
                                 }
                                 break;
                              case 'point':
                                  if(operateType=='draw'){
                                         //目前什么都不做
                                  }else if(operateType=='edit'){
                                          var currentX = e.offsetX;
                                        var currentY = e.offsetY;
                                        pathAssistRectElement.getAttribute('x')+1
                                        pathAssistRectElement.setAttribute('cy',currentY);
                                  }
                                  break;
                              case 'line':
                                  if(operateType=='draw'){
                                      if(pathAssistLineElement){//确定端点
                                              var lineCenterX = parseFloat(pathAssistRectElement.getAttribute('x'))+1;
                                              var lineCenterY = parseFloat(pathAssistRectElement.getAttribute('y'))+1;
                                              var x2 = 2*lineCenterX - e.offsetX;
                                              var y2 = 2*lineCenterY - e.offsetY;
                                              pathAssistLineElement.setAttribute('x1',e.offsetX);
                                              pathAssistLineElement.setAttribute('y1',e.offsetY);
                                              pathAssistLineElement.setAttribute('x2',x2);
                                              pathAssistLineElement.setAttribute('y2',y2);
                                              var pathDarray = drawElement.getAttribute('d').split(' ');
                                              pathDarray.splice(pathDarray.length-6,2,e.offsetX,e.offsetY);
                                              if(pathDarray.length-11>=0){
                                                  pathDarray.splice(pathDarray.length-11,2,x2,y2);
                                              }
                                              drawElement.setAttribute('d',pathDarray.join(' '));
                                      }else{//画曲线
                                              var pathDarray = drawElement.getAttribute('d').split(' ');
                                        pathDarray.splice(pathDarray.length-4,4,e.offsetX,e.offsetY,e.offsetX,e.offsetY);
                                        drawElement.setAttribute('d',pathDarray.join(' '));
                                      }
                                  }    
                       }
                }
            }
            
            //svg画布上  鼠标up事件
            svgDom.onmouseup = function(e){
                if(drawElement==null){
                    return;
                }
                if(e.button==0 && (operateType=='draw' || operateType=='edit')){//当前为画图操作 
                    switch(drawType)
                       {
                             case 'rect':
                                 if(operateType=='draw'){
                                        if(drawElement.getAttribute('width')==0 || drawElement.getAttribute('height')==0){//不符合条件的矩形取消
                                             drawElement.parentNode.removeChild(drawElement);
                                             drawElement = null;
                                             break;
                                        }
                                        drawElementStyle(0,e.target);
                                        drawElement.onmouseenter = function(e){
                                      //没有进入边缘
                                      if(drawType=='rect'){
                                          drawElementStyle(2,e.target);
                                      } 
                                   }
                                   drawElement.onmouseleave = function(e){
                                      //离开边缘
                                      if(drawType=='rect'){
                                          drawElementStyle(0,e.target);
                                      }
                                   }
                                   //辅助编辑元素创建
                                   var rectId = getUuid();
                                   drawElement.setAttribute('id',rectId);
                                   creatAssistRects(drawElement);
                                 }else if(operateType=='edit'){
                                        //删除对应的辅助元素rect
                                        var rectId = drawElement.getAttribute('id');
                                        var assistRects = document.getElementsByName(rectId);
                                        for (var i = assistRects.length-1 ; i >= 0 ; i--){
                                               assistRects[i].onmouseenter = null;
                                               assistRects[i].onmouseleave = null;
                                               assistRects[i].parentNode.removeChild(assistRects[i]);
                                        }
                                        //添加辅助rect
                                        creatAssistRects(drawElement);
                                 }
                                 break;
                              case 'point' :
                                  if(operateType=='draw'){
                                      drawElement.onmouseenter = function(e){
                                       //没有进入边缘
                                       if(drawType=='point'){
                                           drawCircleStyle(1,e.target);
                                       } 
                                   }
                                   drawElement.onmouseleave = function(e){
                                       //离开边缘
                                       if(drawType=='point'){
                                           drawCircleStyle(0,e.target);
                                       }
                                   }
                                  }
                                  break;
                           case 'line':
                               if(operateType=='draw'){
                                   pathAssistLineElement=null;
                                   pathAssistRectElement=null;
                               }
                       }      
                }        
                if(drawType!='line'){
                    drawElement=null
                }
            }
            
            //计算两点距离
            function distanceTwoPoint(x1,y1,x2,y2){
                var x_len = Math.abs(x1-x2);
                var y_len = Math.abs(y1-y2);
                return Math.sqrt(Math.pow(x_len,2) + Math.pow(y_len,2))
            }
            //设置标注对象样式  0：正常状态  1： 高亮状态   2： 可编辑状态
            function drawElementStyle(type,drawElement){
                if(type==0){
                    drawElement.style.fill = 'none';
                    drawElement.style.strokeOpacity = 1;
                     drawElement.style.stroke = drawColor;
                     drawElement.style.strokeDasharray = 'none';
                     drawElement.style.strokeWidth = 1;
                }else if(type==1){
                    drawElement.style.fill = 'none';
                    drawElement.style.strokeOpacity = 0.1;
                     drawElement.style.stroke = drawColor;
                     drawElement.style.strokeDasharray = 'none';
                     drawElement.style.strokeWidth = 1;
                }else if(type==2){
                    drawElement.style.fill = 'none';
                    drawElement.style.strokeOpacity = 1;
                     drawElement.style.stroke = drawColor;
                     drawElement.style.strokeDasharray = '4,2';
                     drawElement.style.strokeWidth = 1;
                }
                
            }
            
            //辅助矩形标注对象样式
            function drawElementAssistStyle(type, assistElement){
                if(type==0){
                    assistElement.style.fill = drawColor;
                     assistElement.style.strokeWidth = 0;
                     assistElement.style.fillOpacity = 0;
                }else if(type==1){
                    assistElement.style.fill = drawColor;
                    assistElement.style.fillOpacity = 1;
                     assistElement.style.strokeWidth = 0;
                }
            }
            
            //圆样式添加
            function drawCircleStyle(type,drawElement){
                if(type==0){
                    drawElement.style.fill = drawColor;
                    drawElement.style.stroke = drawColor;
                    drawElement.style.fillOpacity = 1;
                    drawElement.style.strokeOpacity = 1;
                    drawElement.style.strokeWidth = 1;
                }else if(type==1){
                    drawElement.style.fill = drawColor;
                    drawElement.style.stroke = drawColor;
                    drawElement.style.fillOpacity = 0.5;
                    drawElement.style.strokeOpacity = 0.5;
                    drawElement.style.strokeWidth = 1;
                }
            }
            
            //添加辅助画图矩形元素
            function creatAssistRects(drawElement){
                var rectX = parseFloat(drawElement.getAttribute('x'));
                var rectY = parseFloat(drawElement.getAttribute('y'));
                var rectWith = parseFloat(drawElement.getAttribute('width'));
                var rectHeight = parseFloat(drawElement.getAttribute('height'));    
                var rectAssistArray = [[rectX-2,rectY-2],[rectX+rectWith-2,rectY-2],[rectX+rectWith-2,rectY+rectHeight-2],[rectX-2,rectY+rectHeight-2]];
                for (var citem = 0 ; citem < 4 ; citem++){
                    var rectAssist = document.createElementNS('http://www.w3.org/2000/svg','rect');
                    rectAssist.setAttribute('x',rectAssistArray[citem][0]);
                    rectAssist.setAttribute('y',rectAssistArray[citem][1]);
                    rectAssist.setAttribute('width',4);
                    rectAssist.setAttribute('height',4);
                    rectAssist.setAttribute('name',drawElement.getAttribute('id'));
                    rectAssist.dataset.dataType = 'assistRect';
                    svgDom.appendChild(rectAssist);
                    drawElementAssistStyle(0,rectAssist);
                    //绑定鼠标移入移出事件
                    rectAssist.onmouseenter = function(e){
                        //进入边缘
                        if(drawType=='rect'){
                            drawElementAssistStyle(1,e.target);
                        } 
                    }
                    rectAssist.onmouseleave = function(e){
                        //离开边缘
                        if(drawType=='rect'){
                            drawElementAssistStyle(0,e.target);
                        }
                    }
                }
            }
            
            //生成唯一的uuid
            function getUuid(){
                var mydate = new Date();
                return  "mbh"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds();
            }
            
            function clickQuick(){
                if(isclick){
                    isclick= false;
                    setTimeout(function(){ 
                        isclick = true;
                    }, 500);
                }
            }
        </script>
    </body>
</html>

蛋蛋的忧伤ss
关注
专栏目录
html5中svg标签的作用,每日干货：HTML5中SVG的使用
weixin_34942265的博客
06-27 2252
代码优化永远是程序员亘古不变的需求，而合理的利用SVG图片来代替部分PNG/JPG等格式的图片则是前端优化重要的一环，既然是优化，那我们先来看看SVG图片都有哪些优势：SVG 可被非常多的工具读取和修改(比如记事本)SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。SVG 是可伸缩的SVG 图像可在任何的分辨率下被高质量地打印SVG 可在图像质量不下降的情况下被放大SVG 图...
html5 svg组态图,绘制SVG内容到Canvas的HTML5应用
weixin_39830588的博客
06-20 3499
SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术，两种绘制图形方式各有优缺点，但两者并非水火不容，尤其是SVG内容可直接绘制在Canvas上的功能，使得两者可以完美的融合在一起，让Canvas可享用到现有丰富的SVG素材，并不失SVG矢量无级缩放的特点。《基于HTML5的Drag and Drop生成图片Base64信息》这篇虽然展示的是拖拽普通栅格图片的效果，但你也可以直接...
html5 svg 标注工具 可编辑变形
12-29
数据集标注工具,目前暂时实现了点标，框标，变形功能。后续代码优化加功能完善，如放大缩小，移动，保存结构集，多边型，曲线标注等功能，尽请期待
整理块级元素和行内元素以及行内块元素
a124759779的博客
08-31 167
块级元素 h1-h6>>1-6级标题p>>段落div>>定义文档中的节ul>>定义无序列表ol>>定义有序列表li>>定义无序列表与有序列表中的项hr>>水平线address>>定义文档作者或拥有者的联系信息blockquote>>定义长的引用pre>&g...
标注工具——Electron、HTML、CSS&js的学习笔记目录
墨门
09-19 187
1 HTML 2 CSS 2.1 style设置的优先级 可以学习视频《P19 新手快速入门：19.选择器的权重》
html技术： 用svg标签画图
全易
04-03 967
如同canvas一样，svg标签是个画布(容器)，用来放图 <!-- 必须初始化宽高，要不然看不见了 --> <svg width="600px" height="400px" style="border: 1px solid red;margin: 100px"> <!-- 放画的图 --> </svg> 输出直线： 效果： 输出...
【博主推荐】html界面绘制SVG图形(附源码)
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
05-11 3298
文章目录【博主推荐】html界面绘制SVG图形(附源码)效果视频效果示意图部分源码HTML源码地址 【博主推荐】html界面绘制SVG图形(附源码) 功能介绍 1.支持常用图形绘制，如直线，虚线，正方形，长方形，五角星等； 2.支持常用属性配置，如长度，颜色，id，单击时间等； 3.支持常用操作直接呈现； 4.选中元素后，鼠标右键改变属性； 5.选中元素后，鼠标左键一直按着拖动； 6.选中元素后，上下左右按键可以移动元素； 7.支持一键清除，一键保存； 8.支持元素单击，调用
HTML5+SVG实现的可爱娃娃笑脸动画
09-25
HTML5和SVG技术在网页开发中的应用越来越广泛，它们为创建动态、交互式的网页内容提供了强大的支持。在这个项目中，“HTML5+SVG实现的可爱娃娃笑脸动画”巧妙地结合了这两种技术，创造出了一个生动有趣的用户体验。 ...
CSS3 +HTML5入门到精通
07-01
【标题】"CSS3 +HTML5入门到精通"与【描述】"《HTML+5+从入门到精通》-中文学习教程"所涵盖的知识点主要围绕着Web开发的基础技术——HTML5和CSS3展开，这两者是现代网页设计与开发不可或缺的组成部分。以下是关于这...
需求：vue+svg实现连线功能
weixin_44996782的博客
12-14 4624
问题描述：如标题所示 参考了svg.js和jquery实现连线功能 需求： 1.右侧两个方框可以合成一个bond，点击bond之后又可以恢复。 2.一对一连接 3.有回显功能 package.json @svgdotjs/svg.js: “^3.1.1” 解决方法: svg_style.css .draw-container { position: relative; margin-top: 50px; } .data-list { position: absolute; }
MarkMan UI标注工具
09-02
MarkMan UI标注工具 高效的设计稿标注、测量工具
MarkMan 设计界面最好的标注工具
01-16
MarkMan作用： 1、标记长度 可以横向、垂直标记和测量元素的长度。按住 Tab 时还能自动探测元素的边缘，并自动调整自身长度 2、标记颜色 自动读取标记所指的元素的色值。可以任选RGB/HEX的表示方式。 3、标记坐标、矩形 可以用来标记某个点的位置。将准心中间的原点拖出来以后，就能同时标记坐标和长宽 4、标记文字内容 如果前面3种标记还不能满足你的需求，就直接用文字来说明吧 5、支持多种图片格式 JPG/PNG/BMP什么的都不在话下，关键是还支持PSD哦 6、自动读取原图更新 如果打开的图片被修改了，马克鳗就会自动载入修改后的图。这样就能左手编辑PSD，右手用马克鳗加标记
Vue2.0与SVG实现连线
香蕉你个芭呐呐的博客
04-19 4754
Vue2.0与SVG实现连线 <svg id="lineleft" version="1.1" > <path :d="topline" stroke="#000" stroke-width="1.5" fill="none"/> <!--<path v-show="this...
图片转svg标注_使用psd.js将PSD转成SVG -- 基础篇（文字&图片）
weixin_39623805的博客
02-05 1011
转载至微信公众号：方凳雅集背景随着发展，活动会场页面的题图运营需要线上模板化，而自研的导购素材制作平台接入了海棠-创意中心，通过平台能力，将素材模板化，并且通过配置化的方式生成多种场景化，个性化的素材。但是创意中心的素材模板是基于SVG的，而会场页面的题图基本是基于Photoshop(PS)输出，源文件是PSD。由于SVG是面向矢量图形的标记语言，而PS是以位图处理为中心的图像处理软件，大多时候，...
前端svg实现图片批注功能
最新发布
cdy_1的博客
05-11 384
主要功能点有 矩形框选、添加文本、画笔三个功能点，都可以拖拽改变位置，其中矩形可以调大小。（类似于电脑端微信截图里面的矩形框选、添加文本、画笔）利用svg的画图功能原生：react版：picture-note-react - npm
探索Canvas Highlighter：一款创新的Web绘图标注工具
gitblog_00030的博客
04-01 471
探索Canvas Highlighter：一款创新的Web绘图标注工具 canvas-highlighterA lib for text highlighting by using Canvas.项目地址:https://gitcode.com/gh_mirrors/ca/canvas-highlighter 是一个开源的JavaScript库，它为HTML5 Canvas元素提供了一种直观且灵...
所有html标记名都可以作为标记选择器,CSS常用选择器（通配符选择器，标签选择器，类选择器，id选择器.....），你知道多少？...
weixin_39599166的博客
06-03 2157
CSS常用选择器CSS选择器的作用是从HTML页面中找出特定的某类元素，而常用的CSS选择器有如下几类，一起来看看吧！一、通配符选择器通配符选择器常用 ‘*’ 号表示，它是所有选择器里作用范围最广的，能匹配页面中所有的元素。基本语法格式：*{ 属性1：属性值1；属性2：属性值2；}例子使用该选择器定义样式，清除所有HTML标记的默认边距。*{margin：0； /*定义外边距*/pad...
SVG标记元素的使用
Selina_Chan的博客
06-12 3081
举个栗子，展示一下使用格式： 注意： ①元素自身不会显示，需要放在元素中，因为它是存放复用元素的； ②refX、refY属性可以指定标记的坐标系统中与路径的开始对齐，使得图像标记显示在精
五款超实用的开源 SVG 工具
weixin_34291004的博客
06-20 823
英文链接：Idrsolutions 　　SVG（Scalable Vector Graphics）是基于 XML 的矢量图像格式，用户可灵活运用图像进行搜索、索引、脚本以及压缩（来自：湖北教育考试网）。SVG 由 W3C 制定开发，是一个开放标准，支持当前主流浏览器包括 Firefox、IE9-10、Chrome、Safari 以及 Opera。 　　SVG 支持三种图...
HTML5 SVG入门：绘制矢量图形与基本形状
"这篇教程是关于使用HTML5进行SVG矢量图形绘制的入门指南，涵盖了基本图形绘制和渐变效果的实现。需要注意的是，旧版本的Internet Explorer浏览器对SVG支持不佳，可能需要额外的插件如Adobe SVG阅读器才能正常显示。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值