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

refactor(Signature): use scale method to enhance clarity (#12363)

Browse Source
This commit is contained in:
inottn 2023-10-14 09:22:30 +08:00 committed by GitHub
parent 6f74d77da9
commit 33342a0b43
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -49,7 +49,6 @@ export default defineComponent({
return canvasRef.value.getContext('2d'); return canvasRef.value.getContext('2d');
}); });
const isRenderCanvas = inBrowser ? hasCanvasSupport() : true; const isRenderCanvas = inBrowser ? hasCanvasSupport() : true;
const ratio = inBrowser ? window.devicePixelRatio : 1;
let canvasWidth = 0; let canvasWidth = 0;
let canvasHeight = 0; let canvasHeight = 0;
@ -61,7 +60,7 @@ export default defineComponent({
} }
ctx.value.beginPath(); ctx.value.beginPath();
ctx.value.lineWidth = props.lineWidth * ratio; ctx.value.lineWidth = props.lineWidth;
ctx.value.strokeStyle = props.penColor; ctx.value.strokeStyle = props.penColor;
canvasRect = useRect(canvasRef); canvasRect = useRect(canvasRef);
@ -76,8 +75,8 @@ export default defineComponent({
preventDefault(event); preventDefault(event);
const touch = event.touches[0]; const touch = event.touches[0];
const mouseX = (touch.clientX - (canvasRect?.left || 0)) * ratio; const mouseX = touch.clientX - (canvasRect?.left || 0);
const mouseY = (touch.clientY - (canvasRect?.top || 0)) * ratio; const mouseY = touch.clientY - (canvasRect?.top || 0);
ctx.value.lineCap = 'round'; ctx.value.lineCap = 'round';
ctx.value.lineJoin = 'round'; ctx.value.lineJoin = 'round';
@ -147,9 +146,11 @@ export default defineComponent({
onMounted(() => { onMounted(() => {
if (isRenderCanvas && canvasRef.value) { if (isRenderCanvas && canvasRef.value) {
const canvas = canvasRef.value; const canvas = canvasRef.value;
canvasWidth = canvas.width = (wrapRef.value?.offsetWidth || 0) * ratio; const dpr = inBrowser ? window.devicePixelRatio : 1;
canvasHeight = canvas.height =
(wrapRef.value?.offsetHeight || 0) * ratio; canvasWidth = canvas.width = (wrapRef.value?.offsetWidth || 0) * dpr;
canvasHeight = canvas.height = (wrapRef.value?.offsetHeight || 0) * dpr;
ctx.value?.scale(dpr, dpr);
setCanvasBgColor(ctx.value); setCanvasBgColor(ctx.value);
} }
}); });