javascript - Ionic 3 - 根据鼠标/触摸位置， Canvas 绘制并不完美

Question

我创建了一个应用程序，用户可以在其中在 Canvas 上绘制任何内容。我已将背景图像添加到 Canvas 。我想让 Canvas 覆盖屏幕上的剩余空间。因此我保持宽度和高度的百分比。

问题 - 现在每当我在 Canvas 上绘制东西时，它都不会跟随鼠标/触摸在屏幕上的准确位置。如果我在下方绘制，它会在距离触摸大约 20px 的地方绘制。 (不确定有多少像素，但这是我的假设)

请检查下面的代码。

<强>1。 HTML

<ion-row>
      <canvas no-bounce 
      (touchstart)='handleStart($event)' (touchmove)='handleMove($event)' (click)="removeSelectedTxt()"
      [ngStyle]="{'background': 'url(' + selectedImage + ') no-repeat center center fixed', '-webkit-background-size': 'contain',
      '-moz-background-size': 'contain',
      '-o-background-size': 'contain',
      'background-size': 'contain',
      'width': '98%',
      'height': '65%'}" #canvas ></canvas>
  </ion-row>

<强>2。 CSS

canvas {
      display: block;
      border: 1px solid #000;
      position: fixed;
      top: 10%;
      left: 1%;
    }

<强>3。 TS文件

    import { Component, ViewChild,  ElementRef} from '@angular/core';

     @ViewChild('canvas') public canvas: ElementRef;

    this.canvasElement = this.canvas.nativeElement;

handleStart(ev){

        this.lastX = ev.touches[0].pageX;
        this.lastY = ev.touches[0].pageY;
    }

    handleMove(ev){

      let ctx = this.canvasElement.getContext('2d');
      let currentX = ev.touches[0].pageX;
      let currentY = ev.touches[0].pageY;

      ctx.beginPath();
      ctx.lineJoin = "round";
      ctx.moveTo(this.lastX, this.lastY);
      ctx.lineTo(currentX, currentY);
      ctx.closePath();
      ctx.strokeStyle = this.currentColour;
      ctx.lineWidth = this.brushSize;
      ctx.stroke();      

      this.lastX = currentX;
      this.lastY = currentY;
    }

需要帮助，如何在 Canvas 上绘制准确的触摸点？

Answer 1

在对 canvas draw 做了这么多练习和研究之后，我终于解决了这个问题。

我在 typescript 文件中做了以下更改。在ionViewDidLoad 方法中计算offsetLeft 和offsetTop。

<强>1。 ionViewDidLoad() 方法

this.offsetX = this.canvasElement.offsetLeft;
this.offsetY = this.canvasElement.offsetTop;

• 一旦用户开始在 Canvas 上绘图，意味着 touchStart 事件，我调用 handleStart() 方法。我在这里做了修改。

<强>2。 handleStart(事件)方法

handleStart(ev){

        this.lastX = ev.touches[0].pageX - this.offsetX;
        this.lastY = ev.touches[0].pageY - this.offsetY;
    }

• 为了在 Canvas 上绘图，我调用了 touchMove 事件。

<强>3。 handleMove(事件)方法

handleMove(ev){

      // let ctx = this.canvasElement.getContext('2d');
      let currentX = ev.touches[0].pageX - this.offsetX;
      let currentY = ev.touches[0].pageY - this.offsetY;

      this.ctx.beginPath();
      this.ctx.lineJoin = "round";
      this.ctx.moveTo(this.lastX, this.lastY);
      this.ctx.lineTo(currentX, currentY);
      this.ctx.closePath();
      this.ctx.strokeStyle = this.currentColour;
      this.ctx.lineWidth = this.brushSize;
      this.ctx.stroke();      


      this.undoList.push({
        x_start: currentX,
        y_start: currentY,
        x_end: this.lastX,
        y_end: this.lastY,
        color: this.currentColour,
        size: this.brushSize,
        mode: this.ctx.globalCompositeOperation
      });

      this.lastX = currentX;
      this.lastY = currentY;

    }

注意 - 如果您仔细观察代码，我所做的是计算 offsetLeft 和 offsetTop。然后在 handleStart 和 handleMove 方法中从接触点中减去它。