sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Expand canvas padding based on zoom. (#2515)

Browse Source
This commit is contained in:
Steve Ruiz 2020-12-12 15:34:36 +00:00 committed by GitHub
parent 8f269eb840
commit 9cf54041dc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 24 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/renderer/renderElement.ts
View File

@ -57,29 +57,37 @@ const generateElementCanvas = (
const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
canvas.width =
distance(x1, x2) * window.devicePixelRatio * zoom.value +
CANVAS_PADDING * 2;
CANVAS_PADDING * zoom.value * 2;
canvas.height =
distance(y1, y2) * window.devicePixelRatio * zoom.value +
CANVAS_PADDING * 2;
CANVAS_PADDING * zoom.value * 2;
canvasOffsetX =
element.x > x1
? Math.floor(distance(element.x, x1)) * window.devicePixelRatio
? Math.floor(distance(element.x, x1)) *
window.devicePixelRatio *
zoom.value
: 0;
canvasOffsetY =
element.y > y1
? Math.floor(distance(element.y, y1)) * window.devicePixelRatio
? Math.floor(distance(element.y, y1)) *
window.devicePixelRatio *
zoom.value
: 0;
context.translate(canvasOffsetX * zoom.value, canvasOffsetY * zoom.value);
context.translate(canvasOffsetX, canvasOffsetY);
} else {
canvas.width =
element.width * window.devicePixelRatio * zoom.value + CANVAS_PADDING * 2;
element.width * window.devicePixelRatio * zoom.value +
CANVAS_PADDING * zoom.value * 2;
canvas.height =
element.height * window.devicePixelRatio * zoom.value +
CANVAS_PADDING * 2;
CANVAS_PADDING * zoom.value * 2;
}
context.translate(CANVAS_PADDING, CANVAS_PADDING);
context.translate(CANVAS_PADDING * zoom.value, CANVAS_PADDING * zoom.value);
context.scale(
window.devicePixelRatio * zoom.value,
window.devicePixelRatio * zoom.value,
@ -87,7 +95,10 @@ const generateElementCanvas = (
const rc = rough.canvas(canvas);
drawElementOnCanvas(element, rc, context);
context.translate(-CANVAS_PADDING, -CANVAS_PADDING);
context.translate(
-(CANVAS_PADDING * zoom.value),
-(CANVAS_PADDING * zoom.value),
);
context.scale(
1 / (window.devicePixelRatio * zoom.value),
1 / (window.devicePixelRatio * zoom.value),
@ -453,9 +464,11 @@ const drawElementFromCanvas = (
context.drawImage(
elementWithCanvas.canvas!,
(-(x2 - x1) / 2) * window.devicePixelRatio -
CANVAS_PADDING / elementWithCanvas.canvasZoom,
(CANVAS_PADDING * elementWithCanvas.canvasZoom) /
elementWithCanvas.canvasZoom,
(-(y2 - y1) / 2) * window.devicePixelRatio -
CANVAS_PADDING / elementWithCanvas.canvasZoom,
(CANVAS_PADDING * elementWithCanvas.canvasZoom) /
elementWithCanvas.canvasZoom,
elementWithCanvas.canvas!.width / elementWithCanvas.canvasZoom,
elementWithCanvas.canvas!.height / elementWithCanvas.canvasZoom,
);