캔버스를 끌어 마우스를 달성 Fabric.js 결합 VUE는 휠 줌 기능을 캔버스

1. 效果展示

1. 캔버스에 그린 캔버스 기본지도와 함께 VUE fabric.js
2. 캔버스 기본지도를 드래그하여 마우스를 달성
3. 확대 캔버스 기본지도로 스크롤 마우스를 실현
   

2. 引入 fabric.js

2.1 설치 NPM

npm install fabric --save

2.2 main.js 가져 오기

import { fabric } from 'fabric'
Vue.use(fabric);

3.3 VUE 페이지 구현

<template>
  <div>
    <div class="manager_detail">
      <canvas id="canvas" width="1720" height="1050"></canvas>
    </div>
  </div>
</template>
<script>
export default {
  components: {
  },
  watch: {},
  data() {
    return {
      panning: false
    };
  },
  methods: {
    initCanvas() {
      // 1. 实例化canvas 画布
      var canvas = new fabric.Canvas("canvas");
      // 2. 设置背景图片作为底图（这里导入图片使用require，不要 使用 '../../' 方式）
      // canvas.width / 4764  （4764 是我底图图片宽度）
      // canvas.height / 3367 （3367 是我底图图片宽度）
      canvas.setBackgroundImage(
        require("../../assets/images/map.png"),
        canvas.renderAll.bind(canvas),
        {
          scaleX: canvas.width / 4764,
          scaleY: canvas.height / 3367
        }
      );

      //鼠标按下事件
      canvas.on("mouse:down", function(e) {
        this.panning = true;
        canvas.selection = false;
      });
      //鼠标抬起事件
      canvas.on("mouse:up", function(e) {
        this.panning = false;
        canvas.selection = true;
      });
      // 移动画布事件
      canvas.on("mouse:move", function(e) {
        if (this.panning && e && e.e) {
          var delta = new fabric.Point(e.e.movementX, e.e.movementY);
          canvas.relativePan(delta);
        }
      });
      // 鼠标滚动放大缩小画布
      // 
      if (document.getElementById("canvas")) {
        // IE9, Chrome, Safari, Opera
        document.addEventListener("mousewheel", function(e) {
          if (e.target.className == "upper-canvas ") {
            var zoom = (event.deltaY > 0 ? -0.1 : 0.1) + canvas.getZoom();
            zoom = Math.max(0.1, zoom); //最小为原来的1/10
            zoom = Math.min(3, zoom); //最大是原来的3倍
            var zoomPoint = new fabric.Point(event.pageX, event.pageY);
            canvas.zoomToPoint(zoomPoint, zoom);
          }
        });
      }
    }
  },
  created() {
  },
  mounted() {
    this.initCanvas();
  }
};
</script>
<style scoped>
.manager_detail {
  width: 100%;
  height: calc(100vh - 112px);
  overflow: hidden;
}
</style>

3.3 기본지도 이미지 크기

3. 采坑

3.1 图片使用require，不要 使用 '../../' 方式, 그렇지 않으면 사진이에로드되지 않습니다

3.2 모니터 마우스는 캔버스 기본지도 줌 문제를 달성 스크롤

마우스가 문제의 요소를 구현 확대 스크롤에 대해, 다음이 방법으로 달성 할 수 있지만, VUE 프로젝트는 그래서, 그 자체가 비합리적, jQuery를 도입 할 필요가있다. 상기 실시 예 I (기본으로 사용될 수 있음을 addEventListener루트 요소에 등록 이벤트 document를 통해 e.target.className판정 이벤트 소스는 다음 재산권 줌 기능을 수행하는)fabriczoom