feat: use elements dimensions for scaling
This commit is contained in:
parent
bc5313b165
commit
8321e92368
@ -84,15 +84,19 @@ export const exportToCanvas = async (
|
||||
};
|
||||
|
||||
if (appState.fancyBackgroundImageUrl) {
|
||||
const contentBounds = getCommonBounds(elements);
|
||||
const updatedRenderProps = await applyFancyBackground({
|
||||
canvas,
|
||||
fancyBackgroundImageUrl: appState.fancyBackgroundImageUrl,
|
||||
backgroundColor: viewBackgroundColor,
|
||||
scale,
|
||||
renderConfig,
|
||||
contentDimensions: {
|
||||
w: contentBounds[2] - contentBounds[0],
|
||||
h: contentBounds[3] - contentBounds[1],
|
||||
},
|
||||
});
|
||||
|
||||
console.log(scale, updatedRenderProps.scale);
|
||||
renderConfig = updatedRenderProps.renderConfig;
|
||||
scale = updatedRenderProps.scale;
|
||||
}
|
||||
|
@ -137,6 +137,7 @@ const addContentBackground = (
|
||||
const updateRenderConfig = (
|
||||
renderConfig: RenderConfig,
|
||||
canvasDimensions: Dimensions,
|
||||
contentDimesions: Dimensions,
|
||||
): { scale: number; renderConfig: RenderConfig } => {
|
||||
const totalPadding =
|
||||
FANCY_BG_PADDING + FANCY_BG_BORDER_RADIUS + DEFAULT_EXPORT_PADDING;
|
||||
@ -147,7 +148,7 @@ const updateRenderConfig = (
|
||||
scrollX: renderConfig.scrollX + totalPadding,
|
||||
scrollY: renderConfig.scrollY + totalPadding,
|
||||
},
|
||||
scale: getScaleToFit(canvasDimensions, {
|
||||
scale: getScaleToFit(contentDimesions, {
|
||||
w: canvasDimensions.w - totalPadding * 2,
|
||||
h: canvasDimensions.h - totalPadding * 2,
|
||||
}),
|
||||
@ -159,12 +160,14 @@ export const applyFancyBackground = async ({
|
||||
fancyBackgroundImageUrl,
|
||||
backgroundColor,
|
||||
renderConfig,
|
||||
contentDimensions,
|
||||
}: {
|
||||
canvas: HTMLCanvasElement;
|
||||
fancyBackgroundImageUrl: DataURL;
|
||||
backgroundColor: string;
|
||||
scale: number;
|
||||
renderConfig: RenderConfig;
|
||||
contentDimensions: Dimensions;
|
||||
}) => {
|
||||
const context = canvas.getContext("2d")!;
|
||||
|
||||
@ -183,5 +186,5 @@ export const applyFancyBackground = async ({
|
||||
|
||||
addContentBackground(context, canvasDimensions, backgroundColor);
|
||||
|
||||
return updateRenderConfig(renderConfig, canvasDimensions);
|
||||
return updateRenderConfig(renderConfig, canvasDimensions, contentDimensions);
|
||||
};
|
||||
|
Loading…
x
Reference in New Issue
Block a user