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: select the export bcg image and bcg color from appState

Browse source
This commit is contained in:
Arnošt Pleskot 2023-07-28 23:45:01 +02:00
parent f15417f864
commit f57cd7e2d5
No known key found for this signature in database
20 changed files with 491 additions and 97 deletions
Download patch file Download diff file Expand all files Collapse all files

95
src/renderer/renderScene.ts
View file

@ -394,100 +394,6 @@ const getNormalizedCanvasDimensions = (
return [canvas.width / scale, canvas.height / scale];
};
const addExportBackground = (
canvas: HTMLCanvasElement,
normalizedCanvasWidth: number,
normalizedCanvasHeight: number,
svgUrl: string,
rectangleColor: string,
): void => {
const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
// Create a new image object
const img = new Image();
// When the image has loaded
img.onload = (): void => {
// Draw the image onto the canvas
ctx.drawImage(img, 0, 0, normalizedCanvasWidth, canvas.height);
// Create shadow similar to the CSS box-shadow
const shadows = [
{
offsetX: 0,
offsetY: 0.7698959708213806,
blur: 1.4945039749145508,
alpha: 0.02,
},
{
offsetX: 0,
offsetY: 1.1299999952316284,
blur: 4.1321120262146,
alpha: 0.04,
},
{
offsetX: 0,
offsetY: 4.130000114440918,
blur: 9.94853401184082,
alpha: 0.05,
},
{ offsetX: 0, offsetY: 13, blur: 33, alpha: 0.07 },
];
shadows.forEach((shadow, index): void => {
const MARGIN = 24;
const BORDER_RADIUS = 12;
ctx.shadowColor = `rgba(0, 0, 0, ${shadow.alpha})`;
ctx.shadowBlur = shadow.blur;
ctx.shadowOffsetX = shadow.offsetX;
ctx.shadowOffsetY = shadow.offsetY;
// Define path for rectangle
ctx.beginPath();
ctx.moveTo(MARGIN, MARGIN);
ctx.lineTo(normalizedCanvasWidth - MARGIN, MARGIN);
ctx.quadraticCurveTo(
normalizedCanvasWidth,
MARGIN,
normalizedCanvasWidth,
MARGIN + BORDER_RADIUS,
);
ctx.lineTo(normalizedCanvasWidth, normalizedCanvasHeight - MARGIN);
ctx.quadraticCurveTo(
normalizedCanvasWidth,
normalizedCanvasHeight,
normalizedCanvasWidth - MARGIN,
normalizedCanvasHeight,
);
ctx.lineTo(MARGIN, normalizedCanvasHeight);
ctx.quadraticCurveTo(
0,
normalizedCanvasHeight,
0,
normalizedCanvasHeight - MARGIN,
);
ctx.lineTo(0, MARGIN + BORDER_RADIUS);
ctx.quadraticCurveTo(0, MARGIN, MARGIN, MARGIN);
ctx.closePath();
if (index === shadows.length - 1) {
ctx.fillStyle = rectangleColor;
ctx.fill();
}
});
// Reset shadow properties for future drawings
ctx.shadowColor = "transparent";
ctx.shadowBlur = 0;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
};
// Start loading the image
img.src = svgUrl;
};
const bootstrapCanvas = ({
canvas,
scale,
@ -535,7 +441,6 @@ const bootstrapCanvas = ({
return context;
};
<<<<<<< HEAD
const _renderInteractiveScene = ({
canvas,
elements,