美文网首页
在Vue项目中渲染SVG图,并做简单的操作等(附拖拽指令)

在Vue项目中渲染SVG图,并做简单的操作等(附拖拽指令)

作者: 空格x | 来源:发表于2022-07-03 20:47 被阅读0次
    • 本次将说明如何在项目中使用SVG图,并做一些简单的操作等,毕竟SVG图相对于图片具有可操作性,对图像进行放大不会失真。
    • SVG什么意思:SVG是一种可缩放矢量图形(英语:Scalable Vector Graphics,SVG)是基于可扩展标记语言(XML),用于描述二维矢量图形的图形格式。SVG由W3C制定,是一个开放标准。简单的理解,它是图形的另一种格式例如它和常见的图片格式.png、.jpg、.gif等是一类。

    SVG 有如下特点:
    SVG 绘制的是矢量图,因此对图像进行放大不会失真。
    基于 XML,可以为每个元素添加 JavaScript 事件处理器。
    每个图形均视为对象,更改对象的属性,图形也会改变。**

    SVG 画布的预定义元素里,有六种基本图形跟一种比较特殊,也是功能最强的元素:
    六种基本图形:
    矩形 <rect>
    圆形 <circle>
    椭圆 <ellipse>
    线段 <line>
    折线 <polyline>
    多边形 <polygon>
    特殊元素:
    路径 <path>

    1. 在项目中使用SVG图

    1.1 安装
    // npm
    npm install @svgdotjs/svg.js
    // yarn
    yarn add @svgdotjs/svg.js
    
    1.2 在项目中引入
    import { SVG } from '@svgdotjs/svg.js'
    
    1.3 渲染准备好的SVG图
    <div class="map"></div>
    
    // 渲染SVG图
        initMap () {
          // 获取准备好的预设区域
          const dom = document.querySelector('.map')
          dom.innerHTML = ''
          // 对SVG图进行异步渲染
          return new Promise((resolve, reject) => {
            const draw = SVG()
              .addTo('.map') // 要渲染的区域
              .size('100%', '100%') // 大小
              .scale(1, 1) // 比例
            axios.get(
                require('SVG图片路径')
              )
              .then((res) => {
                draw.svg(res.data)
                resolve('success')
                this.dealMap() // 操作SVG图
              })
          })
        },
    
    1.4 操作SVG图
    • 其实操作SVG图跟操作原生dom类似,不过一个是xml一个是html,不过操作起来还是有一点区别
        // 操作svg
        dealMap () {
          // 给所有高亮的图层加点击
          // 获取SVG图所有点位
          const addSvg = document.querySelector('.map').querySelectorAll('g')
          Array.from(addSvg).forEach((x) => {
            // 给所有点位加上鼠标经过小手样式
            x.style.cursor = 'pointer'
            // 给所有点位加上点击事件
            x.addEventListener('click', (e) => {
            })
          })
        },
    
    • 以上可以看到其实跟原生dom操作是一样的,但下面就有不一样的了
    // 改变颜色
    x.fill = 'pink'
    // 改变 圆形 <circle> 的大小
    x.r = 50 // 50是圆的半径   注意不需要加px
    

    2 拖拽指令

    <div class="map" v-drag  ></div>
    
      // 拖拽
      directives: {
        drag: function (el, binding) {
          const dragBox = el // 获取当前元素
          dragBox.onmousedown = (e) => {
            e.preventDefault()
            // 算出鼠标相对元素的位置
            const disX = e.clientX - dragBox.offsetLeft
            const disY = e.clientY - dragBox.offsetTop
            document.onmousemove = (e) => {
              // 用鼠标的位置减去鼠标相对元素的位置,得到元素的位置
              e.preventDefault()
              const left = e.clientX - disX
              const top = e.clientY - disY
              // 移动当前元素
              dragBox.style.left = left + 'px'
              dragBox.style.top = top + 'px'        }
            document.onmouseup = (e) => {
              e.preventDefault()
              // 鼠标弹起来的时候不再移动
              document.onmousemove = null
              // 预防鼠标弹起来后还会循环(即预防鼠标放上去的时候还会移动)
              document.onmouseup = null
            }
          }
        }
      }
    

    相关文章

      网友评论

          本文标题:在Vue项目中渲染SVG图,并做简单的操作等(附拖拽指令)

          本文链接:https://www.haomeiwen.com/subject/conlbrtx.html