我在canvas中画了很多条线，点击那条线就删除那条线, 怎么才能实现？

  • Z时代
  • 2024-03-15
  • 分类：IT

下面附上画板代码

 <!-- 画板 -->
  <canvas
   class="palette"
   id="canvas"
   :width="chartWidth"
   :height="chartHeight"
   >
 </canvas>
 //点击画板时触发
    coverEdit() {
      this.canvas = document.getElementById("canvas");
      this.ctx = this.canvas.getContext("2d");
      this.ctx.fillStyle = "transparent";
      this.ctx.globalCompositeOperation="source-over"
      //动态获取canvas画布的宽this.canvas.width, 画布的高this.canvas.height
      this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
      this.onoff = false;
      this.oldx = 0;
      this.oldy = 0;
      this.linecolor = "red";
      this.linw = 2;
      this.canvas.addEventListener("mousemove", this.canvasDraw, true);
      this.canvas.addEventListener("mousedown", this.canvasDown, false);
      this.canvas.addEventListener("mouseup", this.canvasUp, false);
    },
    canvasDown(event) {
      if (this.huahua == true) {
        this.onoff = false;
      } else {
        this.onoff = true;
        this.oldx = event.pageX - this.canvas.getBoundingClientRect().left;
        this.oldy = event.pageY - this.canvas.getBoundingClientRect().top;
      }
    },
  //鼠标弹起触发
    canvasUp(event) {
      this.onoff = false;
      console.log('获取',event);
    },
    //涂抹绘制过程中触发
    canvasDraw(event) {
      if (this.onoff == true) {
        var newx = event.pageX - this.canvas.getBoundingClientRect().left;
        var newy = event.pageY - this.canvas.getBoundingClientRect().top;
        this.ctx.beginPath();
        this.ctx.moveTo(this.oldx, this.oldy);
        this.ctx.lineTo(newx, newy);
        this.ctx.strokeStyle = this.linecolor;
        this.ctx.lineWidth = this.linw;
        this.ctx.lineCap = "round";
        this.ctx.stroke();
        this.oldx = newx;
        this.oldy = newy;
      }
    },
    //绘制完成后清除画布内容，也可继续写入自己的代码进行下一步操作
    completeMethod() {
      if (this.isQzshow == false) {
        this.completeaudio = setTimeout(() => {
          var canvas = document.getElementById("canvas");
          this.ctx = canvas.getContext("2d");
          this.ctx.clearRect(0, 0, canvas.width, canvas.height);
        }, 500);
      }
    },

我想添加一个事件，点击那条线就删除那条线，并不是那种橡皮擦涂抹的那种删除效果

回答：

https://www.cnblogs.com/fangs...
https://www.hangge.com/blog/c...
这里有提到线擦除，你可以参考下

我在canvas中画了很多条线，点击那条线就删除那条线, 怎么才能实现？

回答：

没有很好的办法，<canvas> 是个大画板，里面没有元素，都是位图，所以你必须自己判断。

大体的方案是：

  1. 记录每条线的所有点
  2. 用点击时的点计算到每条线的距离，小于阈值，就把那条线的数据干掉
  3. 然后重绘所有线

回答：

没有好的方法解决换了一个组件库解决了
用到了'KonvaJS'
1、KonvaJS 是一个功能强大的Html5 Canvas库。
文档：https://konvajs.org/docs/vue/index.html
npm install vue-konva@2 konva --save
2、引用
在main.js中

import VueKonva from 'vue-konva';
Vue.use(VueKonva);

3、使用

<div id="box_img"> <v-stage
   class="palette"
   id="canvas"
   ref="canvas"
   :config="{ width: chartWidth, height: chartHeight }"  //动态获取的canvas宽高
   @mousedown="stageMousedown"
   @mousemove="stageMousemove"
   @mouseup="stageMouseup"
                      >
  <v-layer>
  <v-line
    v-for="(item, index) in lines"
    :config="item"
    @click="lineDel(index)"
   />
   </v-layer>
  </v-stage> <div>　<div @click='ftchEraser'>橡皮</div>
　　　//获取画布的宽高
      let box = document.getElementById("box_img");
      let width = box.offsetWidth;
      let height = box.offsetHeight;
      this.chartWidth = box.offsetWidth;
      this.chartHeight = box.offsetHeight;

4、js部分

ftchEraser() {
     this.isEraser = !this.isEraser;
  },
stageMousedown() {this.isPaint = true;
        const stage = this.$refs.canvas.getStage();
        const pos = stage.getPointerPosition();
        this.lines.push({   //存到一个空数组中把数据
          stroke: "red",
          strokeWidth: 2,  //这块设置线条颜色、粗细
          points: [pos.x, pos.y],
        });
    },
    stageMousemove() {
      if (!this.isPaint) {
        return;
      }
      const stage = this.$refs.canvas.getStage();
      const pos = stage.getPointerPosition();
      const lastLine =
        this.lines[this.lines.length === 1 ? 0 : this.lines.length - 1];
      const newPoints = lastLine.points.concat([pos.x, pos.y]);
      lastLine.points = newPoints;
    },
    stageMouseup() {
      this.isPaint = false;
      this.lines = this.lines.filter((item) => item.points.length !== 2);
    },
    lineDel(index) {
      if (this.isEraser) {
        this.lines.splice(index, 1); //这块点击线条删除部分
      }
    },

以上是 我在canvas中画了很多条线，点击那条线就删除那条线, 怎么才能实现？ 的全部内容， 来源链接： utcz.com/p/933566.html

回到顶部