signature: use PDFSignatureZoneParser in vue app signature

This commit is contained in:
nobohan
2024-07-04 15:17:04 +02:00
parent 5b7e3f0336
commit c428e6665f
4 changed files with 46 additions and 75 deletions

View File

@@ -179,8 +179,8 @@ const hit_signature = (
canvasWidth: number,
canvasHeight: number
) => {
const scaleXToCanvas = (x: number) => (x * canvasWidth) / zone.pageWidth;
const scaleYToCanvas = (y: number) => (y * canvasHeight) / zone.pageHeight;
const scaleXToCanvas = (x: number) => (x * canvasWidth) / zone.PDFPage.width;
const scaleYToCanvas = (y: number) => (y * canvasHeight) / zone.PDFPage.height;
return (
scaleXToCanvas(zone.x) < xy[0] &&
xy[0] < scaleXToCanvas(zone.x + zone.width) &&
@@ -191,7 +191,7 @@ const hit_signature = (
const canvas_click = (e: PointerEvent, canvas: HTMLCanvasElement) =>
signature.zones
.filter((z) => z.page === page.value)
.filter((z) => z.PDFPage.index + 1 === page.value)
.map((z) => {
if (
hit_signature(z, [e.offsetX, e.offsetY], canvas.width, canvas.height)
@@ -217,7 +217,7 @@ const turn_page = async (upOrDown: number) => {
const turn_signature = async (upOrDown: number) => {
let currentZone = signature.zones[zone.value];
if (currentZone) {
page.value = currentZone.page;
page.value = currentZone.PDFPage.index + 1;
await set_page(page.value);
setTimeout(() => add_zones(page.value), 200);
}
@@ -236,9 +236,9 @@ const draw_zone = (
selected = false
) => {
const scaleXToCanvas = (x: number) =>
Math.round((x * canvasWidth) / zone.pageWidth);
Math.round((x * canvasWidth) / zone.PDFPage.width);
const scaleYToCanvas = (y: number) =>
Math.round((y * canvasHeight) / zone.pageHeight);
Math.round((y * canvasHeight) / zone.PDFPage.height);
ctx.strokeStyle = selected ? "orange " : "yellow";
ctx.lineWidth = 10;
ctx.lineJoin = "bevel";
@@ -266,7 +266,7 @@ const add_zones = (page: number) => {
const ctx = canvas.getContext("2d");
if (ctx) {
signature.zones
.filter((z) => z.page === page)
.filter((z) => z.PDFPage.index + 1 === page)
.map((z) => draw_zone(z, ctx, canvas.width, canvas.height));
}
};