foss/excalidraw
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update renderElement.ts

Browse Source
This commit is contained in:
zsviczian 2023-01-04 20:29:11 +01:00 committed by GitHub
parent 08afb857c3
commit a82ce8ce5a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 43 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/renderer/renderElement.ts
View File

@ -237,7 +237,16 @@ const drawElementOnCanvas = (
rc.draw(fillShape); rc.draw(fillShape);
} }
context.fillStyle = element.strokeColor; if (!fillShape && element.customData?.strokeOptions?.hasOutline) {
context.lineWidth =
(element.strokeWidth / 5) *
element.customData.strokeOptions.outlineWidth ?? 1;
context.strokeStyle = element.strokeColor;
context.stroke(path);
context.fillStyle = element.backgroundColor;
} else {
context.fillStyle = element.strokeColor;
}
context.fill(path); context.fill(path);
context.restore(); context.restore();
@ -1185,7 +1194,19 @@ export const renderElementToSvg = (
); );
node.setAttribute("stroke", "none"); node.setAttribute("stroke", "none");
const path = svgRoot.ownerDocument!.createElementNS(SVG_NS, "path"); const path = svgRoot.ownerDocument!.createElementNS(SVG_NS, "path");
path.setAttribute("fill", element.strokeColor); if (!shape && element.customData?.strokeOptions?.hasOutline) {
path.setAttribute("fill", element.backgroundColor);
path.setAttribute("stroke", element.strokeColor);
path.setAttribute(
"stroke-width",
`${
(element.strokeWidth / 5) *
element.customData.strokeOptions.outlineWidth ?? 1
}`,
);
} else {
path.setAttribute("fill", element.strokeColor);
}
path.setAttribute("d", getFreeDrawSvgPath(element)); path.setAttribute("d", getFreeDrawSvgPath(element));
node.appendChild(path); node.appendChild(path);
root.appendChild(node); root.appendChild(node);
@ -1328,15 +1349,26 @@ export function getFreeDrawSvgPath(element: ExcalidrawFreeDrawElement) {
: [[0, 0, 0.5]]; : [[0, 0, 0.5]];
// Consider changing the options for simulated pressure vs real pressure // Consider changing the options for simulated pressure vs real pressure
const options: StrokeOptions = { const options: StrokeOptions = element.customData?.strokeOptions?.options //zsviczian
simulatePressure: element.simulatePressure, ? { ...element.customData?.strokeOptions?.options }
size: element.strokeWidth * 4.25, : {
thinning: 0.6, simulatePressure: element.simulatePressure,
smoothing: 0.5, size: element.strokeWidth * 4.25,
streamline: 0.5, thinning: 0.6,
easing: (t) => Math.sin((t * Math.PI) / 2), // https://easings.net/#easeOutSine smoothing: 0.5,
last: !!element.lastCommittedPoint, // LastCommittedPoint is added on pointerup streamline: 0.5,
}; easing: (t) => Math.sin((t * Math.PI) / 2), // https://easings.net/#easeOutSine
last: !!element.lastCommittedPoint, // LastCommittedPoint is added on pointerup
};
if (element.customData?.strokeOptions?.options) {
options.simulatePressure =
options.simulatePressure ?? element.simulatePressure;
options.size = options.size
? (options.size * element.strokeWidth) / 4
: element.strokeWidth * 4.25;
options.last = !!element.lastCommittedPoint;
}
return getSvgPathFromStroke(getStroke(inputPoints as number[][], options)); return getSvgPathFromStroke(getStroke(inputPoints as number[][], options));
} }