github.com
/
excalidraw
mirror of https://github.com/excalidraw/excalidraw.git
1
0
Fork 0
Code Releases Wiki Activity

Expand canvas padding based on zoom. (#2515)

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