feat: scale padding

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

View File

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

View File

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