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

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

作者: 许___ | 来源:发表于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图,并做简单的操作等(附拖拽指令)

    本次将说明如何在项目中使用SVG图,并做一些简单的操作等,毕竟SVG图相对于图片具有可操作性,对图像进行放大不会失...

  • 封装移动端 vue 拖拽指令

    封装移动端 vue 拖拽指令 通过vue自定义指令,将拖拽行为封装为指令 使用transform做移动效果,需要注...

  • vue使用svg

    vue使用svg 做的一个可视化大屏项目中需要引入svg, 直接绑定svg元素的某些值,在ui给的svg中出现了s...

  • 2021-01-26

    vue中自定义拖拽指令 指令(局部指令) directives:{ drag(el,bindings){ el.o...

  • vue 弹窗可拖拽

    vue 弹窗可拖拽 通过自定义指令实现

  • Vue 列表渲染

    Vue 使用 v-for 指令渲染一组数据 渲染数组 渲染对象 在 v-for 指令中可以使用 of 分隔符替换 ...

  • 25 常见问题

    HTML/React/Vue节点渲染出错 1 .这些节点内容都是渲染在SVG的foreignObject节点内部....

  • 手写Vue2核心(二):模板渲染

    模板渲染 因为vue模板中存在指令,修饰符,循环等,只替换变量是不健全的。因此需要有一套模板渲染,来识别vue模板...

  • vue引用bpmn.js实现svg和bpmn格式保存下载

    vue引用bpmn.js实现流程图的渲染编辑,以及以svg和bpmn格式保存下载。效果图 前提需安装bpmn.js...

  • vue 局部指令和全局指令

    vue 自定义指令常用于 DOM 操作 局部指令 1. 简单使用 在组件中 2. 封装 新建 src/utils/...

网友评论

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

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