foss/excalidraw
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix canvas too large

Browse Source
This commit is contained in:
zsviczian 2023-04-03 20:19:13 +02:00
parent c0e9b8d7bc
commit 2b6819eb2d
1 changed files with 48 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/renderer/renderElement.ts
View File

@ -30,7 +30,7 @@ import { RenderConfig } from "../scene/types";
import { distance, getFontString, getFontFamilyString, isRTL } from "../utils"; import { distance, getFontString, getFontFamilyString, isRTL } from "../utils";
import { getCornerRadius, isPathALoop, isRightAngle } from "../math"; import { getCornerRadius, isPathALoop, isRightAngle } from "../math";
import rough from "roughjs/bin/rough"; import rough from "roughjs/bin/rough";
import { AppState, BinaryFiles, Zoom } from "../types"; import { AppState, BinaryFiles, NormalizedZoomValue, Zoom } from "../types";
import { getDefaultAppState } from "../appState"; import { getDefaultAppState } from "../appState";
import { import {
BOUND_TEXT_PADDING, BOUND_TEXT_PADDING,
@ -101,6 +101,8 @@ const generateElementCanvas = (
const canvas = document.createElement("canvas"); const canvas = document.createElement("canvas");
const context = canvas.getContext("2d")!; const context = canvas.getContext("2d")!;
const padding = getCanvasPadding(element); const padding = getCanvasPadding(element);
const sizelimit = 16777216; // 2^24
let zoomValue = zoom.value;
let canvasOffsetX = 0; let canvasOffsetX = 0;
let canvasOffsetY = 0; let canvasOffsetY = 0;
@ -108,38 +110,65 @@ const generateElementCanvas = (
if (isLinearElement(element) || isFreeDrawElement(element)) { if (isLinearElement(element) || isFreeDrawElement(element)) {
const [x1, y1, x2, y2] = getElementAbsoluteCoords(element); const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
canvas.width = let width =
distance(x1, x2) * window.devicePixelRatio * zoom.value + distance(x1, x2) * window.devicePixelRatio * zoomValue +
padding * zoom.value * 2; padding * zoomValue * 2;
canvas.height = let height =
distance(y1, y2) * window.devicePixelRatio * zoom.value + distance(y1, y2) * window.devicePixelRatio * zoomValue +
padding * zoom.value * 2; padding * zoomValue * 2;
const size = width * height;
if (size > sizelimit) {
zoomValue = Math.sqrt(sizelimit / size) as NormalizedZoomValue;
width =
distance(x1, x2) * window.devicePixelRatio * zoomValue +
padding * zoomValue * 2;
height =
distance(y1, y2) * window.devicePixelRatio * zoomValue +
padding * zoomValue * 2;
}
canvas.width = width;
canvas.height = height;
canvasOffsetX = canvasOffsetX =
element.x > x1 element.x > x1
? distance(element.x, x1) * window.devicePixelRatio * zoom.value ? distance(element.x, x1) * window.devicePixelRatio * zoomValue
: 0; : 0;
canvasOffsetY = canvasOffsetY =
element.y > y1 element.y > y1
? distance(element.y, y1) * window.devicePixelRatio * zoom.value ? distance(element.y, y1) * window.devicePixelRatio * zoomValue
: 0; : 0;
context.translate(canvasOffsetX, canvasOffsetY); context.translate(canvasOffsetX, canvasOffsetY);
} else { } else {
canvas.width = let width =
element.width * window.devicePixelRatio * zoom.value + element.width * window.devicePixelRatio * zoomValue +
padding * zoom.value * 2; padding * zoomValue * 2;
canvas.height = let height =
element.height * window.devicePixelRatio * zoom.value + element.height * window.devicePixelRatio * zoomValue +
padding * zoom.value * 2; padding * zoomValue * 2;
const size = width * height;
if (size > sizelimit) {
zoomValue = Math.sqrt(sizelimit / size) as NormalizedZoomValue;
width =
element.width * window.devicePixelRatio * zoomValue +
padding * zoomValue * 2;
height =
element.height * window.devicePixelRatio * zoomValue +
padding * zoomValue * 2;
}
canvas.width = width;
canvas.height = height;
} }
context.save(); context.save();
context.translate(padding * zoom.value, padding * zoom.value); context.translate(padding * zoomValue, padding * zoomValue);
context.scale( context.scale(
window.devicePixelRatio * zoom.value, window.devicePixelRatio * zoomValue,
window.devicePixelRatio * zoom.value, window.devicePixelRatio * zoomValue,
); );
const rc = rough.canvas(canvas); const rc = rough.canvas(canvas);
@ -156,7 +185,7 @@ const generateElementCanvas = (
element, element,
canvas, canvas,
theme: renderConfig.theme, theme: renderConfig.theme,
canvasZoom: zoom.value, canvasZoom: zoomValue,
canvasOffsetX, canvasOffsetX,
canvasOffsetY, canvasOffsetY,
boundTextElementVersion: getBoundTextElement(element)?.version || null, boundTextElementVersion: getBoundTextElement(element)?.version || null,
@ -685,7 +714,6 @@ const generateElementWithCanvas = (
prevElementWithCanvas.theme !== renderConfig.theme || prevElementWithCanvas.theme !== renderConfig.theme ||
prevElementWithCanvas.boundTextElementVersion !== boundTextElementVersion prevElementWithCanvas.boundTextElementVersion !== boundTextElementVersion
) { ) {
console.log(element, element.width, element.height, zoom.value, renderConfig);
const elementWithCanvas = generateElementCanvas( const elementWithCanvas = generateElementCanvas(
element, element,
zoom, zoom,