signature: correct positioning of zones in vue app wrt to PDFSignatureZoneParser

This commit is contained in:
nobohan 2024-07-05 10:10:26 +02:00
parent c968d6c541
commit fb62e54d63

View File

@ -197,14 +197,17 @@ const hit_signature = (
canvasWidth: number, canvasWidth: number,
canvasHeight: number canvasHeight: number
) => { ) => {
const scaleXToCanvas = (x: number) => (x * canvasWidth) / zone.PDFPage.width; const scaleXToCanvas = (x: number) =>
Math.round((x * canvasWidth) / zone.PDFPage.width);
const scaleHeightToCanvas = (h: number) =>
Math.round((h * canvasHeight) / zone.PDFPage.height);
const scaleYToCanvas = (y: number) => const scaleYToCanvas = (y: number) =>
(y * canvasHeight) / zone.PDFPage.height; Math.round(zone.PDFPage.height - scaleHeightToCanvas(y));
return ( return (
scaleXToCanvas(zone.x) < xy[0] && scaleXToCanvas(zone.x) < xy[0] &&
xy[0] < scaleXToCanvas(zone.x + zone.width) && xy[0] < scaleXToCanvas(zone.x + zone.width) &&
scaleYToCanvas(zone.y) < xy[1] && scaleYToCanvas(zone.y) < xy[1] &&
xy[1] < scaleYToCanvas(zone.y + zone.height) xy[1] < scaleYToCanvas(zone.y) + scaleHeightToCanvas(zone.height)
); );
}; };
@ -258,8 +261,10 @@ const draw_zone = (
) => { ) => {
const scaleXToCanvas = (x: number) => const scaleXToCanvas = (x: number) =>
Math.round((x * canvasWidth) / zone.PDFPage.width); Math.round((x * canvasWidth) / zone.PDFPage.width);
const scaleHeightToCanvas = (h: number) =>
Math.round((h * canvasHeight) / zone.PDFPage.height);
const scaleYToCanvas = (y: number) => const scaleYToCanvas = (y: number) =>
Math.round((y * canvasHeight) / zone.PDFPage.height); Math.round(zone.PDFPage.height - scaleHeightToCanvas(y));
ctx.strokeStyle = selected ? "orange " : "yellow"; ctx.strokeStyle = selected ? "orange " : "yellow";
ctx.lineWidth = 10; ctx.lineWidth = 10;
ctx.lineJoin = "bevel"; ctx.lineJoin = "bevel";
@ -267,13 +272,13 @@ const draw_zone = (
scaleXToCanvas(zone.x), scaleXToCanvas(zone.x),
scaleYToCanvas(zone.y), scaleYToCanvas(zone.y),
scaleXToCanvas(zone.width), scaleXToCanvas(zone.width),
scaleYToCanvas(zone.height) scaleHeightToCanvas(zone.height)
); );
ctx.font = "bold 16px serif"; ctx.font = "bold 16px serif";
ctx.textAlign = "center"; ctx.textAlign = "center";
ctx.fillStyle = "black"; ctx.fillStyle = "black";
const xText = scaleXToCanvas(zone.x) + scaleXToCanvas(zone.width) / 2; const xText = scaleXToCanvas(zone.x) + scaleXToCanvas(zone.width) / 2;
const yText = scaleYToCanvas(zone.y) + scaleYToCanvas(zone.height) / 2; const yText = scaleYToCanvas(zone.y) + scaleHeightToCanvas(zone.height) / 2;
ctx.strokeStyle = "grey"; ctx.strokeStyle = "grey";
ctx.strokeText("Choisir cette", xText, yText - 12); ctx.strokeText("Choisir cette", xText, yText - 12);
ctx.strokeText("zone de signature", xText, yText + 12); ctx.strokeText("zone de signature", xText, yText + 12);