Question

对于我的Web应用程序，我已经创建了html5画布并创建了一些函数，这些函数将允许我通过mousedown，mouseup和mousemove在此画布上进行绘制：

<canvas 
    #canvas id="canvas" 
    (mousemove)="mouseMove($event)" 
    (mousedown)="mouseDown()" 
    (mouseup)="mouseUp()">
</canvas>

经过测试后，我意识到这不适用于触摸屏，我需要这样的touchevent：

document.getElementById('canvas').addEventListener('touchstart', function(event) {

})

但是，我不想重做Javascript中的所有代码，而是仍然使用我的Angular函数。给定此示例，我如何从javascript函数中执行mousedown函数：

export class PenInputComponent implements AfterViewInit {

    public ngAfterViewInit(): void {
        document.getElementById('canvas').addEventListener('touchstart', function(event) {

            // execute mousdeDown function here
        })
    }

    public mouseDown(): void {
        this.startDrawState();
    }
}

我该如何实现这一目标，或者甚至有可能实现？

更新：解决方案如下：

document.getElementById('canvas').addEventListener('touchstart', (event) => {
    this.mouseX = event.targetTouches[0].pageX;
})

由于可能存在多个触摸事件，因此它是一个数组，必须相应地获取坐标，但是对于角度，则应将其放入canvas标签中，如下所述。

Answer 1

_{（您可以从角度模板中监听任何本机HTML事件，而不仅仅是单击鼠标）}

您可以使用pointer events：

<canvas #canvas id="canvas" 
   (pointermove)="mouseMove($event)" 
   (pointerdown)="mouseDown()" 
   (pointerup)="mouseUp()"></canvas>

但是Safari不支持此功能。如果您确实需要野生动物园支持，则应使用(touchstart)等...

总而言之，这是打字稿材料的基本基础。我建议您阅读有关这两个主题的文章。最好的起点是angular.io网站。

要真正回答您的问题，请在函数中使用this.mouseDown，但是再次，不要在angular应用程序中使用getElementById和addEventListener。所以真的..不要在下面使用代码：

public ngAfterViewInit(): void {
  document.getElementById('canvas').addEventListener('touchstart', (event) => {
    this.mouseDown();
  })
}

public mouseDown(): void {
  this.startDrawState();
}

如何从Javascript函数执行Angluar函数？

1 个答案: