VUE合わせFabric.jsキャンバス、キャンバスホイールズーム機能をドラッグし、マウスを達成します

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