vue使用svg-pan-zoom

K歌、之王

已于 2023-07-04 17:23:56 修改

阅读量2.7k

点赞数

分类专栏： svg-pan-zoom vue 文章标签： vue.js 前端 java

于 2022-07-18 14:46:59 首次发布

本文链接：https://blog.csdn.net/u010568976/article/details/125849578

版权

vue 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

svg-pan-zoom

1 篇文章 0 订阅

订阅专栏

该博客介绍了如何在前端项目中使用`svg-pan-zoom`库来实现SVG图像的平移和缩放交互功能。通过引入库、监听加载事件以及创建和销毁embed元素，实现了动态加载SVG并添加控制图标和手势操作。同时，提到了一个备选方案——`html5-svg-viewer`。

摘要由CSDN通过智能技术生成

1、引入

yarn add svg-pan-zoom

2、组件使用

import svgPanZoom from ‘svg-pan-zoom’

<template>
  <div class='svg-model-main'>
    <div style='height: 100%; overflow: hidden; position: relative;font-size: 20px;font-weight: bolder'  ref='svg'>
          <div style='position: absolute;top:50%;left:50%;color: red' v-show='spinning'>加载中...</div>
          <div class='no-data' v-if='!svgId'>
            <div>
              <div class='iconfont icon-zanwushuju' style='font-size: 25px;text-align: center'></div>
              <div style='text-align: center'>未选择图纸</div>
            </div>
          </div>
    </div>
  </div>
</template>

<script>
import svgPanZoom from 'svg-pan-zoom'
import { getAction } from '../../../api/manage'

export default {
  name: 'SvgModel',
  props: {
    docId: {
      type: String,
      required: false,
      default: ''
    }
  },
  data() {
    return {
      svgId: '',
      spinning: false,
      lastEmbed: ''
    }
  },
  watch: {
    docId: {
      immediate: true,
      async handler(val, oldV) {
        if (val && val != oldV) {
          this.spinning = true
          this.removeEmbed()
          let docRs = await getAction(`/doc/getById/${this.docId}`)
          if (docRs.success) {
            this.svgId = docRs.result.fileId
            this.spinning = false
            this.createNewEmbed(`/dtwins-boot/file/getFileContent/` + this.svgId)
          }
        } else {
          if (!val) {
            this.svgId = ''
          }
        }
      }
    }
  },
  methods: {
    lastEventListener() {
      svgPanZoom(this.lastEmbed, {
        zoomEnabled: true,
        controlIconsEnabled: true
      });
      this.spinning = false
    },
    removeEmbed(){
      if (this.lastEmbed) {
        // Destroy svgpanzoom
        svgPanZoom(this.lastEmbed).destroy()
        // Remove event listener
        this.lastEmbed.removeEventListener('load', () => this.lastEventListener())
        // Remove embed element
        this.$refs.svg.removeChild(this.lastEmbed)
        // Null reference to embed
        this.lastEmbed = null
      }
    },
    createNewEmbed(src) {
      this.spinning = true
      let embed = document.createElement('embed');
      embed.setAttribute('style', 'width: 100%; height: 100%;');
      embed.setAttribute('type', 'image/svg+xml');
      embed.setAttribute('src', src);
      this.$refs.svg.appendChild(embed);
      this.lastEmbed = embed
      embed.addEventListener('load', () => this.lastEventListener())
    }
  }
}
</script>

<style scoped lang='less'>
.svg-model-main {
  height: 100%;

  .no-data {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
  }

  .svg-model {
    height: 100%;
    /deep/ .ant-spin-container {
      height: 100%;
      overflow: hidden;
    }
  }
}

</style>

后台的下载svg逻辑

content-type为image/svg+xml

@GetMapping("getFileContent/{fileId}")
    public void getFileContent(@PathVariable("fileId") String fileId,
                               HttpServletResponse response) {
        InputStream inputStream = fileModelService.getFile(fileId);
        try {
            ServletOutputStream outputStream = response.getOutputStream();
            response.setContentType("image/svg+xml");
            IoUtil.copy(inputStream, outputStream);
        } catch (IOException e) {
            log.error(e.getMessage(), e);
        } finally {
            IoUtil.close(inputStream);
        }
    }