如何解决Angular 9中的移动设备上的签名捕获
我是Angular的新手,我需要帮助来使用Typescript在Angular 9中实现签名捕获。这必须在移动设备和计算机上工作。
我看了这个例子,但是它不支持触摸 https://stackblitz.com/edit/angular-rxjs-canvas?file=src%2Fapp%2Fcanvas.component.ts
我为此修改了CaptureEvents方法,但是它不起作用-有任何想法吗?
private captureEvents(canvasEl: HTMLCanvasElement) {
const mouseDown = merge(fromEvent(canvasEl,'mousedown'),fromEvent(canvasEl,'touchstart'),);
const mouseUp = merge(fromEvent(canvasEl,'mouseup'),'mouseleave'),'touchend'),'touchcancel'),);
const mouseMove = merge(fromEvent(canvasEl,'mousemove'),'touchmove'),);
console.log(canvasEl);
fromEvent(canvasEl,'touchstart')
.pipe(
switchMap((e) => {
// after a mouse down,we'll record all mouse moves
return fromEvent(canvasEl,'touchmove')
.pipe(
// we'll stop (and unsubscribe) once the user releases the mouse
// this will trigger a 'mouseup' event
takeUntil(fromEvent(canvasEl,'touchend')),// we'll also stop (and unsubscribe) once the mouse leaves the canvas (mouseleave event)
takeUntil(fromEvent(canvasEl,'touchcancel')),// 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();
//previous and current position with the offset
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
};
this.drawOnCanvas(prevPos,currentPos);
});
}
解决方法
费哈多(Ferhado)因发布此答案而获得荣誉,谢谢!
尝试ngx-signaturepad:npmjs.com/package/ngx-signaturepad – Ferhado Aug 20在0:35
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。