无法创建 canvas 以在 Angular 上绘制签名 8

Question

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

我一直从这个页面中获取灵感来创建组件，因为它与我需要的非常相似：

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

但是我一直无法使组件工作，我不知道为什么，我认为错误可能是由于我没有相同的配置 tsconfig.json文件作为教程。

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

这是我的：

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

编辑：我与代码分享一个 stackblitz：

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

编辑：该代码适用于 Stackblitz 但不适用于我的项目，这可能是因为 tsconfig.json 文件配置？

Answer 1

最后，如果它对某人有帮助，那么代码很好，它在我的项目中没有 "work" 因为我没有正确获取 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;
}

无法创建 canvas 以在 Angular 上绘制签名 8

Trouble creating a canvas to draw signature on Angular 8

canvas

signature

typescript

angular

angular8