smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: fancyBackgrounds in svg

Browse source
This commit is contained in:
Arnošt Pleskot 2023-08-11 12:00:14 +02:00
parent 94f20566d1
commit e8cc787edc
No known key found for this signature in database
4 changed files with 106 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

48
src/scene/fancyBackground.ts
View file

@ -1,5 +1,5 @@
import { FANCY_BG_BORDER_RADIUS, FANCY_BG_PADDING } from "../constants";
import { loadHTMLImageElement } from "../element/image";
import { FANCY_BG_BORDER_RADIUS, FANCY_BG_PADDING, SVG_NS } from "../constants";
import { loadHTMLImageElement, loadSVGElement } from "../element/image";
import { roundRect } from "../renderer/roundRect";
import { AppState, DataURL } from "../types";
@ -121,7 +121,7 @@ const addContentBackground = (
});
};
export const applyFancyBackground = async ({
export const applyFancyBackgroundOnCanvas = async ({
canvas,
fancyBackgroundImageUrl,
backgroundColor,
@ -144,3 +144,45 @@ export const applyFancyBackground = async ({
addContentBackground(context, canvasDimensions, backgroundColor, exportScale);
};
export const applyFancyBackgroundOnSvg = async ({
svgRoot,
fancyBackgroundImageUrl,
backgroundColor,
dimensions,
exportScale,
}: {
svgRoot: SVGSVGElement;
fancyBackgroundImageUrl: DataURL;
backgroundColor: string;
dimensions: Dimensions;
exportScale: AppState["exportScale"];
}) => {
const fancyBackgroundImage = await loadSVGElement(
`${fancyBackgroundImageUrl}`,
);
fancyBackgroundImage.setAttribute("x", "0");
fancyBackgroundImage.setAttribute("y", "0");
fancyBackgroundImage.setAttribute("width", `${dimensions.w}`);
fancyBackgroundImage.setAttribute("height", `${dimensions.h}`);
fancyBackgroundImage.setAttribute("preserveAspectRatio", "none");
svgRoot.appendChild(fancyBackgroundImage);
const rect = svgRoot.ownerDocument!.createElementNS(SVG_NS, "rect");
rect.setAttribute("x", (FANCY_BG_PADDING * exportScale).toString());
rect.setAttribute("y", (FANCY_BG_PADDING * exportScale).toString());
rect.setAttribute(
"width",
`${dimensions.w - FANCY_BG_PADDING * 2 * exportScale}`,
);
rect.setAttribute(
"height",
`${dimensions.h - FANCY_BG_PADDING * 2 * exportScale}`,
);
rect.setAttribute("rx", (FANCY_BG_PADDING * exportScale).toString());
rect.setAttribute("ry", (FANCY_BG_PADDING * exportScale).toString());
rect.setAttribute("fill", backgroundColor);
svgRoot.appendChild(rect);
};