用鼠标移动VUE中的Konva绘制矩形

问题描述

这是我要在Vue.js中实现的行为。这是我尝试制作的Js小提琴示例：https://jsfiddle.net/richardcwc/ukqhf54k/

//Canvas
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//Variables
var canvasx = $(canvas).offset().left;
var canvasy = $(canvas).offset().top;
var last_mousex = last_mousey = 0;
var mousex = mousey = 0;
var mousedown = false;

//Mousedown
$(canvas).on('mousedown',function(e) {
    last_mousex = parseInt(e.clientX-canvasx);
    last_mousey = parseInt(e.clientY-canvasy);
    mousedown = true;
});

//Mouseup
$(canvas).on('mouseup',function(e) {
    mousedown = false;
});

//Mousemove
$(canvas).on('mousemove',function(e) {
    mousex = parseInt(e.clientX-canvasx);
    mousey = parseInt(e.clientY-canvasy);
    if(mousedown) {
        ctx.clearRect(0,canvas.width,canvas.height); //clear canvas
        ctx.beginPath();
        var width = mousex-last_mousex;
        var height = mousey-last_mousey;
        ctx.rect(last_mousex,last_mousey,width,height);
        ctx.strokeStyle = 'black';
        ctx.linewidth = 10;
        ctx.stroke();
    }
    //Output
    $('#output').html('current: '+mousex+','+mousey+'<br/>last: '+last_mousex+','+last_mousey+'<br/>mousedown: '+mousedown);
});

我正在使用一个名为Konva.js的库。现在，我可以使用Konva.js在Vue.js中免费绘画。但是当我尝试用mousemove绘制矩形时。它不能正常工作。我不确定是什么原因引起的。谢谢你的帮助！这是我的工作 Code sandbox

这是我在工作中发现的行为。仅在鼠标移动事件和鼠标单击事件之后绘制矩形。

解决方法

<template>
  <v-stage
    ref="stage"
    :config="stageSize"
    @mousemove="handleMouseMove"
    @mouseDown="handleMouseDown"
    @mouseUp="handleMouseUp"
  >
    <v-layer ref="layer">
      <v-text
        ref="text"
        :config="{
          x: 10,y: 10,fontSize: 20,text: text,fill: 'black',}"
      />
      <v-rect
        v-for="(rec,index) in recs"
        :key="index"
        :config="{
          x: Math.min(rec.startPointX,rec.startPointX + rec.width),y: Math.min(rec.startPointY,rec.startPointY + rec.height),width: Math.abs(rec.width),height: Math.abs(rec.height),fill: 'rgb(0,0)',stroke: 'black',strokeWidth: 3,}"
      />
    </v-layer>
  </v-stage>
</template>

<script>
const width = window.innerWidth;
const height = window.innerHeight;

export default {
  data() {
    return {
      stageSize: {
        width: width,height: height,},text: "Try to draw a rectangle",lines: [],isDrawing: false,recs: [],};
  },methods: {
    handleMouseDown(event) {
      this.isDrawing = true;
      const pos = this.$refs.stage.getNode().getPointerPosition();
      this.setRecs([
        ...this.recs,{ startPointX: pos.x,startPointY: pos.y,width: 0,height: 0 },]);
    },handleMouseUp() {
      this.isDrawing = false;
    },setRecs(element) {
      this.recs = element;
    },handleMouseMove(event) {
      // no drawing - skipping
      if (!this.isDrawing) {
        return;
      }
      // console.log(event);
      const point = this.$refs.stage.getNode().getPointerPosition();
      // handle  rectangle part
      let curRec = this.recs[this.recs.length - 1];
      curRec.width = point.x - curRec.startPointX;
      curRec.height = point.y - curRec.startPointY;
    },};
</script>

演示：https://codesandbox.io/s/vue-konva-drawings-rectangles-ivjtu?file=/src/App.vue