如何在 Typescript(angular) 中的 canvas 元素上绘制一个矩形？

Question

我尝试使用打字稿（角度）在 canvas 元素上绘制一个矩形，但它没有按预期工作，同时我在 javascript 中创建它的工作。 请看下面的代码，

export class AppComponent {
  @Input() width = 512;
  @Input() height = 418;
  @ViewChild('canvas') canvas: ElementRef;
  cx: CanvasRenderingContext2D;
  drawingSubscription: Subscription;
  name = 'Angular ' + VERSION.major;

  ngAfterViewInit() {
    const canvasEl: HTMLCanvasElement = this.canvas.nativeElement;
    this.cx = canvasEl.getContext('2d');
    canvasEl.width = this.width;
    canvasEl.height = this.height;

    this.cx.lineWidth = 2;
    //this.cx.lineCap = 'round';

    this.captureEvents(canvasEl);
  }
  captureEvents(canvasEl: HTMLCanvasElement) {
    var startX;
    var startY;
    var mouseX;
    var mouseY;
    // this will capture all mousedown events from teh canvas element
    this.drawingSubscription = fromEvent(canvasEl, 'mousedown')
      .pipe(
        switchMap((e) => {
          // after a mouse down, we'll record all mouse moves
          return fromEvent(canvasEl, 'mousemove').pipe(
            // we'll stop (and unsubscribe) once the user releases the mouse
            // this will trigger a 'mouseup' event
            takeUntil(fromEvent(canvasEl, 'mouseup')),
            // we'll also stop (and unsubscribe) once the mouse leaves the canvas (mouseleave event)
            takeUntil(fromEvent(canvasEl, 'mouseleave')),
            // pairwise lets us get the previous value to draw a line from
            // the previous point to the current point
            pairwise()
          );
        })
      )
      .subscribe((res: [MouseEvent, MouseEvent]) => {
        const rect = canvasEl.getBoundingClientRect();
        console.log(res[0]);
        // previous and current position with the offset

        startX = res[0].clientX - rect.left;
        startY = res[0].clientY - rect.top;
        console.log(startX, startY);

        const prevPos = {
          x: res[0].clientX - rect.left,
          y: res[0].clientY - rect.top,
        };

        const currentPos = {
          x: res[1].clientX - rect.left,
          y: res[1].clientY - rect.top,
        };

        mouseX = res[0].clientX - rect.left;
        mouseY = res[0].clientY - rect.top;

        this.cx.clearRect(0, 0, canvasEl.width, canvasEl.height);

        var width = mouseX - startX;
        var height = mouseY - startY;

        this.cx.strokeRect(startX, startY, width, height);
        console.log(startX, startY, width, height);
        
      });
  }

 

  ngOnDestroy() {
    // this will remove event lister when this component is destroyed
    this.drawingSubscription.unsubscribe();
  }
}

Html 代码：

<canvas #canvas> </canvas>

请检查我在 stackblitz 上的实时代码： https://stackblitz.com/edit/angular-ivy-iqjbew?file=src/app/app.component.ts

Javascript 的工作示例： https://jsfiddle.net/sathishcst10/wp2anys7/12/

Answer 1

JS代码和TS代码不一样。 您的 TS 代码中有错误。

        startX = res[0].clientX - rect.left;
        startY = res[0].clientY - rect.top;

        mouseX = res[0].clientX - rect.left;
        mouseY = res[0].clientY - rect.top;

        var width = mouseX - startX;
        var height = mouseY - startY;

如您所见， startX 和 mouseX 完全相同，因此宽度和高度将始终为零，并且矩形将不可见。

这是解决此问题的快速方法，但可能有更好的方法

 this.drawingSubscription = fromEvent(canvasEl, 'mousedown')
      .pipe(
        tap((e) => {
          startX = null;
          startY = null;
        }),
        switchMap((e) => {
        // your code
        })
      )
      .subscribe((res: [MouseEvent, MouseEvent]) => {
        const rect = canvasEl.getBoundingClientRect();
        if (startX === null) {
          startX = res[0].clientX - rect.left;
          startY = res[0].clientY - rect.top;
        }
        // your code

Answer 2

我建议不要成对使用，您可以使用简单的点击将 position 存储在 mouseDown 中。 此外，我更喜欢使用事件 mouseup 和 mouseleave 与 take(1) 的合并

或多或少：

  captureEvents(canvasEl: HTMLCanvasElement) {
    const rect = canvasEl.getBoundingClientRect();
    const prevPos = {x:0,y:0};
    // this will capture all mousedown events from teh canvas element
    this.drawingSubscription = fromEvent(canvasEl, 'mousedown')
      .pipe(
        tap((e:MouseEvent)=>{
          prevPos.x= e.clientX - rect.left
          prevPos.y=e.clientY - rect.top
      }),
        switchMap((e) => {
          // after a mouse down, we'll record all mouse moves
          return fromEvent(canvasEl, 'mousemove').pipe(
            // we'll stop (and unsubscribe) once the user releases the mouse
            // this will trigger a 'mouseup' event
            takeUntil(
                 merge(fromEvent(canvasEl, 'mouseup'),
                       fromEvent(canvasEl, 'mouseleave'))
                .pipe(take(1))),
          );
        })
      )
      .subscribe((res:MouseEvent) => {

        const currentPos = {
          x: res.clientX - rect.left,
          y: res.clientY - rect.top,
        };


        this.cx.clearRect(0, 0, canvasEl.width, canvasEl.height);

        const width = currentPos.x-prevPos.x;
        const height = currentPos.y-prevPos.y;

        this.cx.strokeRect(prevPos.x, prevPos.y, width, height);

        // this method we'll implement soon to do the actual drawing
       // this.drawOnCanvas(prevPos, currentPos);
      });
  }

注意：在 typescript 中不要使用“var”来声明变量 else 或“let”或“const”