Question

我一直在使用面料网页上的“缩放/平移”教程。由于某些原因，当我推入时，平移不再起作用。如果我先平移就可以了。

我对使用Vue和Javascript非常陌生。我试过在一些地方添加渲染语句。我确定我的实现在某处是错误的。

<template>
  <div class="home">
    <link rel="stylesheet" href="https://bootswatch.com/4/superhero/bootstrap.min.css">
    <h1> Hello </h1>
    <canvas id="c"></canvas>
  </div>
</template>
<script>
import { fabric } from 'fabric';
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue';

export default {
  name: 'projects',
  data: () => ({
    canvas: null,
    lastPosX: 0,
    lastPosY: 0,
    viewportTransform: null,
    isDragging: false,
    selection: false,
  }),
  components: {

  },
  computed: {

  },
  mounted() {
    // create a rectangle object
    this.canvas = new fabric.Canvas('c', { width: 800, height: 600 });
    const rect = new fabric.Rect({
      left: 100,
      top: 100,
      fill: 'red',
      width: 20,
      height: 20,
    });
    this.canvas.on('mouse:down', opt => this.mouseDown(opt));
    this.canvas.on('mouse:move', opt => this.mouseMove(opt));
    this.canvas.on('mouse:wheel', opt => this.mouseWheel(opt));
    this.canvas.on('mouse:up', opt => this.mouseUp(opt));
    this.viewportTransform = this.canvas.viewportTransform;
    const bgImage = 'https://source.unsplash.com/random';
    this.canvas.setBackgroundImage(bgImage, this.canvas.renderAll.bind(this.canvas), {
      top: 0,
      left: 0,
      originX: 'left',
      originY: 'top',
      scaleX: 1,
      scaleY: 1,
    });
    this.canvas.renderAll();
    // "add" rectangle onto canvas
    this.canvas.add(rect);
  },
  methods: {
    mouseWheel(opt) {
      const delta = opt.e.deltaY;
      // const pointer = this.canvas.getPointer(opt.e);
      let zoom = this.canvas.getZoom();
      zoom += delta / 200;
      if (zoom > 20) zoom = 20;
      if (zoom < 0.01) zoom = 0.01;
      this.canvas.zoomToPoint({ x: opt.e.offsetX, y: opt.e.offsetY }, zoom);
      opt.e.preventDefault();
      opt.e.stopPropagation();
      this.lastPosX = opt.e.clientX;
      this.lastPosY = opt.e.clientY;
      // this.canvas.requestRenderAll();
    },
    mouseDown(opt) {
      // const evt = opt.e;
      const { e: evt } = opt;
      if (evt.altKey === true) {
        console.log(evt);
        this.canvas.selection = false;
        this.isDragging = true;
        this.canvas.selection = false;
        this.lastPosX = evt.clientX;
        this.lastPosY = evt.clientY;
      }
    },
    mouseMove(opt) {
      if (this.isDragging) {
        const { e } = opt;
        // const e = opt.e;
        // console.log(e.clientX, this.lastPosX);
        this.viewportTransform[4] += e.clientX - this.lastPosX;
        this.viewportTransform[5] += e.clientY - this.lastPosY;
        this.canvas.renderAll();
        this.lastPosX = e.clientX;
        this.lastPosY = e.clientY;
      }
    },
    mouseUp(opt) {
      console.log(opt);
      this.isDragging = false;
      this.canvas.selection = true;
      this.canvas.forEachObject(obj => this.makeSelectable(obj));
    },
    makeSelectable(obj) {
      // this.canvas.selection = true;
      obj.selectable = true; // eslint-disable-line no-param-reassign
      obj.setCoords();
    },
  },
};
</script>

缩放后应该可以平移，但是我已经以某种方式破坏了它。

滚轮鼠标缩放中断平移

0 个答案: