typescript - 在 Angular 8 中建立用於簽名繪製的畫布時遇到問題

我正在嘗試在 Angular 8 中創建一個使用 HTML 5 和 canvas 的簽名組件，我需要該組件能夠識別觸控事件以及滑鼠事件。

我一直從這個頁面汲取靈感來創建這個元件，因為它非常類似於我所需要的東西：

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

但是我一直無法讓這個組件運作，我不知道為什麼，我認為錯誤可能是因為我沒有與教程相同的 tsconfig.json 配置文件。

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

這是我的：

所以我已經到了不知道如何前進的地步，如果有人確切知道我做錯了什麼，或者是否有更簡單的方法來創建可以識別觸控事件的簽名元件，我將非常感激你告訴我。

編輯：我分享了一個帶有代碼的 Stackblitz：

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

編輯：這段程式碼在 Stackblitz 上可以運作，但在我的專案中不行，這可能是因為 tsconfig.json 檔案的配置問題嗎？

答案＃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;
}