无法创建画布以在Angular 8上绘制签名的问题

Question

我正在尝试创建一个组件以在Angular 8中使用HTML 5和canvas进行签名，我需要该组件来识别触摸事件以及鼠标事件。

我一直在从此页面中汲取灵感来创建组件，因为它与我需要的东西非常相似：

https://kernhanda.github.io/tutorial-typescript-canvas-drawing/

但是我无法使组件正常工作，我不知道为什么，我认为该错误可能是由于我的tsconfig.json文件配置与本教程。

这是教程中tsconfig.json文件的配置

这是我的：

因此，我到了不知道如何前进的地步，请问是否有人确切地知道我在做什么错，或者是否有更简单的方法来创建用于识别触摸事件的签名的组件如果您能告诉我，我将不胜感激。

编辑：我与代码共享一个堆栈闪电战：

https://stackblitz.com/edit/angular-szrn6z

编辑：代码可在Stackblitz上使用，但不能在我的项目中使用，这可能是由于tsconfig.json文件配置引起的吗？

Answer 1

最后，如果它对某人有所帮助，那么代码很好，在我的项目中它没有“起作用”，因为我没有正确地获取X和Y坐标，因此我必须设法使用此代码来获取它：

let r = this.canvasEl.getBoundingClientRect();
let mouseX;
if((e as TouchEvent).changedTouches) {
     mouseX = (e as TouchEvent).changedTouches[0].pageX - r.left;
} else {
     mouseX = (e as MouseEvent).layerX;
}

let mouseY;
if((e as TouchEvent).changedTouches) {
     mouseY = (e as TouchEvent).changedTouches[0].pageY - r.top;
} else {
     mouseY = (e as MouseEvent).layerY;
}