Dylan/excalidraw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: scale padding

Browse Source
This commit is contained in:
Arnošt Pleskot 2023-08-11 09:53:34 +02:00
parent d4d9ecf6c6
commit 94f20566d1
No known key found for this signature in database
2 changed files with 16 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/scene/export.ts
View File

@ -97,6 +97,7 @@ export const exportToCanvas = async (
canvas, canvas,
fancyBackgroundImageUrl: appState.fancyBackgroundImageUrl!, fancyBackgroundImageUrl: appState.fancyBackgroundImageUrl!,
backgroundColor: viewBackgroundColor, backgroundColor: viewBackgroundColor,
exportScale: appState.exportScale,
}); });
} }

27
src/scene/fancyBackground.ts
View File

@ -1,7 +1,7 @@
import { FANCY_BG_BORDER_RADIUS, FANCY_BG_PADDING } from "../constants"; import { FANCY_BG_BORDER_RADIUS, FANCY_BG_PADDING } from "../constants";
import { loadHTMLImageElement } from "../element/image"; import { loadHTMLImageElement } from "../element/image";
import { roundRect } from "../renderer/roundRect"; import { roundRect } from "../renderer/roundRect";
import { DataURL } from "../types"; import { AppState, DataURL } from "../types";
type Dimensions = { w: number; h: number }; type Dimensions = { w: number; h: number };
@ -61,6 +61,7 @@ const addContentBackground = (
context: CanvasRenderingContext2D, context: CanvasRenderingContext2D,
normalizedDimensions: Dimensions, normalizedDimensions: Dimensions,
contentBackgroundColor: string, contentBackgroundColor: string,
exportScale: AppState["exportScale"],
) => { ) => {
const shadows = [ const shadows = [
{ {
@ -94,20 +95,20 @@ const addContentBackground = (
if (context.roundRect) { if (context.roundRect) {
context.roundRect( context.roundRect(
FANCY_BG_PADDING, FANCY_BG_PADDING * exportScale,
FANCY_BG_PADDING, FANCY_BG_PADDING * exportScale,
normalizedDimensions.w - FANCY_BG_PADDING * 2, normalizedDimensions.w - FANCY_BG_PADDING * 2 * exportScale,
normalizedDimensions.h - FANCY_BG_PADDING * 2, normalizedDimensions.h - FANCY_BG_PADDING * 2 * exportScale,
FANCY_BG_BORDER_RADIUS, FANCY_BG_BORDER_RADIUS * exportScale,
); );
} else { } else {
roundRect( roundRect(
context, context,
FANCY_BG_PADDING, FANCY_BG_PADDING * exportScale,
FANCY_BG_PADDING, FANCY_BG_PADDING * exportScale,
normalizedDimensions.w - FANCY_BG_PADDING * 2, normalizedDimensions.w - FANCY_BG_PADDING * 2 * exportScale,
normalizedDimensions.h - FANCY_BG_PADDING * 2, normalizedDimensions.h - FANCY_BG_PADDING * 2 * exportScale,
FANCY_BG_BORDER_RADIUS, FANCY_BG_BORDER_RADIUS * exportScale,
); );
} }
@ -124,10 +125,12 @@ export const applyFancyBackground = async ({
canvas, canvas,
fancyBackgroundImageUrl, fancyBackgroundImageUrl,
backgroundColor, backgroundColor,
exportScale,
}: { }: {
canvas: HTMLCanvasElement; canvas: HTMLCanvasElement;
fancyBackgroundImageUrl: DataURL; fancyBackgroundImageUrl: DataURL;
backgroundColor: string; backgroundColor: string;
exportScale: AppState["exportScale"];
}) => { }) => {
const context = canvas.getContext("2d")!; const context = canvas.getContext("2d")!;
@ -139,5 +142,5 @@ export const applyFancyBackground = async ({
addImageBackground(context, canvasDimensions, fancyBackgroundImage); addImageBackground(context, canvasDimensions, fancyBackgroundImage);
addContentBackground(context, canvasDimensions, backgroundColor); addContentBackground(context, canvasDimensions, backgroundColor, exportScale);
}; };