blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

fix(Signature): failed to sign in mobile devices (#11797)

Browse Source
This commit is contained in:
neverland 2023-05-01 16:40:44 +08:00 committed by GitHub
parent 77c1d589ca
commit c4e114fc33
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 32 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
packages/vant/src/signature/Signature.tsx
View File

@ -12,6 +12,7 @@ import {
createNamespace, createNamespace,
preventDefault, preventDefault,
} from '../utils'; } from '../utils';
import { useRect } from '@vant/use';
import { Button } from '../button'; import { Button } from '../button';
const [name, bem, t] = createNamespace('signature'); const [name, bem, t] = createNamespace('signature');
@ -45,43 +46,11 @@ export default defineComponent({
width: 0, width: 0,
height: 0, height: 0,
ctx: null as CanvasRenderingContext2D | null | undefined, ctx: null as CanvasRenderingContext2D | null | undefined,
isSupportTouch: 'ontouchstart' in window,
}); });
let canvasRect: DOMRect;
const isRenderCanvas = inBrowser ? hasCanvasSupport() : true; const isRenderCanvas = inBrowser ? hasCanvasSupport() : true;
const touchMove = (event: TouchEvent) => {
if (!state.ctx) {
return false;
}
preventDefault(event);
const evt = event.changedTouches
? event.changedTouches[0]
: event.targetTouches[0];
emit('signing', evt);
let mouseX = evt.clientX;
let mouseY = evt.clientY;
if (!state.isSupportTouch) {
const coverPos = canvasRef.value?.getBoundingClientRect();
mouseX = evt.clientX - (coverPos?.left || 0);
mouseY = evt.clientY - (coverPos?.top || 0);
}
state.ctx.lineCap = 'round';
state.ctx.lineJoin = 'round';
state.ctx?.lineTo(mouseX, mouseY);
state.ctx?.stroke();
};
const touchEnd = (event: TouchEvent) => {
preventDefault(event);
emit('end');
};
const touchStart = () => { const touchStart = () => {
if (!state.ctx) { if (!state.ctx) {
return false; return false;
@ -90,9 +59,35 @@ export default defineComponent({
state.ctx.beginPath(); state.ctx.beginPath();
state.ctx.lineWidth = props.lineWidth; state.ctx.lineWidth = props.lineWidth;
state.ctx.strokeStyle = props.penColor; state.ctx.strokeStyle = props.penColor;
canvasRect = useRect(canvasRef);
emit('start'); emit('start');
}; };
const touchMove = (event: TouchEvent) => {
if (!state.ctx) {
return false;
}
preventDefault(event);
const touch = event.touches[0];
const mouseX = touch.clientX - (canvasRect?.left || 0);
const mouseY = touch.clientY - (canvasRect?.top || 0);
state.ctx.lineCap = 'round';
state.ctx.lineJoin = 'round';
state.ctx?.lineTo(mouseX, mouseY);
state.ctx?.stroke();
emit('signing', event);
};
const touchEnd = (event: TouchEvent) => {
preventDefault(event);
emit('end');
};
const isCanvasEmpty = (canvas: HTMLCanvasElement) => { const isCanvasEmpty = (canvas: HTMLCanvasElement) => {
const empty = document.createElement('canvas'); const empty = document.createElement('canvas');
empty.width = canvas.width; empty.width = canvas.width;

6
packages/vant/src/signature/test/index.spec.ts
View File

@ -21,11 +21,13 @@ test('should emit "signing" event when touch is moving', async () => {
await canvas.trigger('touchstart'); await canvas.trigger('touchstart');
await canvas.trigger('touchmove', { await canvas.trigger('touchmove', {
changedTouches: [{ clientX: 10, clientY: 20 }], touches: [{ clientX: 10, clientY: 20 }],
}); });
expect(wrapper.emitted('signing')).toBeTruthy(); expect(wrapper.emitted('signing')).toBeTruthy();
expect(wrapper.emitted('signing')![0][0]).toMatchObject({ expect(
wrapper.emitted<TouchEvent[]>('signing')![0][0].touches[0]
).toMatchObject({
clientX: 10, clientX: 10,
clientY: 20, clientY: 20,
}); });