js 图片拖动会有图像遗留问题

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

在一个盒子中拖拽图片和缩放，在图片移动的矩形上会有图像遗留是什么原因，怎么解决？

没有拖动之前的样子：
js 图片拖动会有图像遗留问题

向右拖动图片后为什么出现画面遗留
js 图片拖动会有图像遗留问题

代码：

// 为画布上鼠标的拖拽注册事件
canvasDragEventsInit() {
  console.log("图片拖动");
  let _this = this;
  let canvas = _this.myCanvas;
  canvas.onmousedown = function(event) {
    event.preventDefault();
    event.stopPropagation();
    let imgx = _this.imgX;
    let imgy = _this.imgY;
    let pos = { x: event.clientX, y: event.clientY }; // 坐标转换，将窗口坐标转换成canvas的坐标
    canvas.onmousemove = function(evt) {
      evt.preventDefault();
      evt.stopPropagation();
      // 移动
      canvas.style.cursor = "move";
      let x = (evt.clientX - pos.x) * 2 + imgx;
      let y = (evt.clientY - pos.y) * 2 + imgy;
      _this.imgX = x;
      _this.imgY = y;
      _this.drawImage(_this.imgObject); // 重新绘制图片
    };
    canvas.onmouseup = function() {
      canvas.onmousemove = null;
      canvas.onmouseup = null;
      canvas.style.cursor = "default";
    };
  };
},

回答：

使用clearRect先清除之前的内容，再绘制，或者用fillRect填充一个背景色

以上是 js 图片拖动会有图像遗留问题 的全部内容， 来源链接： utcz.com/p/937349.html

回到顶部