使用 vue 在画布上绘图

Question

我想在 VueJs 中调整一个带有矩形的选择（用 JS 和 html 制作）。 我有这个版本： https://codepen.io/sebastiancz/pen/mdJVJRw

initDraw(document.getElementById('canvas'));

function initDraw(canvas) {

    function setMousePosition(e) {
        var ev = e || window.event; //Moz || IE
        if (ev.pageX) { //Moz
            mouse.x = ev.pageX + window.pageXOffset;
            mouse.y = ev.pageY + window.pageYOffset;
        } else if (ev.clientX) { //IE
            mouse.x = ev.clientX + document.body.scrollLeft;
            mouse.y = ev.clientY + document.body.scrollTop;
        }
    };

    var mouse = {
        x: 0,
        y: 0,
        startX: 0,
        startY: 0
    };
    var element = null;

    canvas.onmousemove = function (e) {
        setMousePosition(e);
        if (element !== null) {
            element.style.width = Math.abs(mouse.x - mouse.startX) + 'px';
            element.style.height = Math.abs(mouse.y - mouse.startY) + 'px';
            element.style.left = (mouse.x - mouse.startX < 0) ? mouse.x + 'px' : mouse.startX + 'px';
          console.log(mouse.x, mouse.y)
            element.style.top = (mouse.y - mouse.startY < 0) ? mouse.y + 'px' : mouse.startY + 'px';
        }
    }

    canvas.onmousedown = function (e) {

            console.log("Start.");
            mouse.startX = mouse.x;
            mouse.startY = mouse.y;
            element = document.createElement('div');
            element.className = 'rectangle'
            element.style.left = mouse.x + 'px';
            element.style.top = mouse.y + 'px';
            canvas.appendChild(element)
        }
  canvas.onmouseup = function (e) {
            element = null;
    // canvas.ctx.clearRect();
            console.log("finsihed.");

  }

}

这是我在 vue 中的非工作版本： https://codepen.io/sebastiancz/pen/mdJPvOP?editors=0011

我该如何解决这个问题？

Answer 1

这是您可以使用 Vue.js 和 HTML5 Canvas 完成的事情。您可以通过创建一个数组并存储选择的开始和结束位置来进一步扩展它以显示以前的选择。

Vue.component("selection", {
  template: `<canvas id='canvas' ref='select' @mousedown='startSelect' @mousemove='drawRect' @mouseup='stopSelect'></canvas>`,
  data() {
    return {
      ctx: null,
      selectionMode: false,
      startPosition: {
        x: null,
        y: null
      }
    };
  },
  
  methods: {
  
    startSelect(e) {
      this.selectionMode = true;
      this.startPosition.x = e.clientX;
      this.startPosition.y = e.clientY;
    },
    
    drawRect(e) {
      if (this.selectionMode) {
        console.log(this.startPosition);
        this.ctx.beginPath();
        this.ctx.rect(
          this.startPosition.x,
          this.startPosition.y,
          e.clientX - this.startPosition.x,
          e.clientY - this.startPosition.y
        );
        this.ctx.closePath();
        this.ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);
        this.ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
        this.ctx.strokeStyle = "#f00";
        this.ctx.stroke();
      }
    },
    
    stopSelect(e) {
      this.ctx.fillStyle = "#fff";

      this.selectionMode = false;
      this.startPosition.x = null;
      this.startPosition.y = null;
    }
    
  },
  mounted() {
    this.$refs.select.height = window.innerHeight;
    this.$refs.select.width = window.innerWidth;
    this.ctx = this.$refs.select.getContext("2d");
    // this.ctx.fillRect(0,0,500,500);
  }
});

new Vue({
  el: "#app",
  data: {
    hello: "world"
  }
});

body {
  margin: 2rem;
  background: #eee;
}

#canvas {
  background: white;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
}

<div id="app">
  <selection></selection>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>