gilles/excalidraw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix : Curve sampling

Browse Source 
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
This commit is contained in:
Mark Tolmacs
2026-04-16 17:31:09 +00:00
parent 548a11794e
commit a0489c459c
1 changed files with 60 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/element/src/renderElement.ts
+60 -19
View File
@@ -1,12 +1,20 @@
import rough from "roughjs/bin/rough"; import rough from "roughjs/bin/rough";
import { import {
bezierEquation,
curve,
type GlobalPoint, type GlobalPoint,
isRightAngleRads, isRightAngleRads,
lineSegment, lineSegment,
type LocalPoint,
pointDistance,
pointFrom, pointFrom,
pointFromVector,
pointRotateRads, pointRotateRads,
type Radians, type Radians,
vectorFromPoint,
vectorNormalize,
vectorScale,
} from "@excalidraw/math"; } from "@excalidraw/math";
import { import {
@@ -464,7 +472,7 @@ const drawFreeDrawSegments = (
context.fillStyle = strokeColor; context.fillStyle = strokeColor;
const baseRadius = (element.strokeWidth * 4.25) / 2; const baseRadius = (element.strokeWidth * 1.25) / 2;
const getPressure = (i: number): number => const getPressure = (i: number): number =>
pressures.length > i ? pressures[i] : DEFAULT_FREEDRAW_PRESSURE; pressures.length > i ? pressures[i] : DEFAULT_FREEDRAW_PRESSURE;
@@ -478,28 +486,61 @@ const drawFreeDrawSegments = (
return; return;
} }
const FREEDRAW_DEBUG_COLORS = [ // const FREEDRAW_DEBUG_COLORS = [
"#e03131", // "#e03131",
"#f76707", // "#f76707",
"#2f9e44", // "#2f9e44",
"#1971c2", // "#1971c2",
"#7048e8", // "#7048e8",
"#e64980", // "#e64980",
]; // ];
const start = Math.max(fromIndex, 1); const start = Math.max(fromIndex, 1);
for (let i = start; i < points.length; i++) { for (let i = start; i < points.length; i++) {
context.fillStyle = FREEDRAW_DEBUG_COLORS[i % FREEDRAW_DEBUG_COLORS.length]; //context.fillStyle = FREEDRAW_DEBUG_COLORS[i % FREEDRAW_DEBUG_COLORS.length];
const r0 = baseRadius * getPressure(i - 1) * 2; const r0 = baseRadius * getPressure(i - 1) * 2;
const r1 = baseRadius * getPressure(i) * 2; const r1 = baseRadius * getPressure(i) * 2;
drawTaperedCapsule(
context, const synthesizedPressures = [r0];
points[i - 1][0], const synthesizedPoints: LocalPoint[] = [points[i - 1]];
points[i - 1][1], if (i > 1) {
r0, const dist = pointDistance(points[i - 1], points[i]);
points[i][0], if (dist > baseRadius / 2) {
points[i][1], const c = curve(
r1, points[i - 1],
); pointFromVector(
vectorScale(
vectorNormalize(vectorFromPoint(points[i - 1], points[i - 2])),
dist / 2,
),
points[i - 1],
),
points[i],
points[i],
);
synthesizedPoints.push(bezierEquation(c, 0.2));
synthesizedPressures.push(r0 * 0.8 + r1 * 0.2);
synthesizedPoints.push(bezierEquation(c, 0.4));
synthesizedPressures.push(r0 * 0.6 + r1 * 0.4);
synthesizedPoints.push(bezierEquation(c, 0.6));
synthesizedPressures.push(r0 * 0.4 + r1 * 0.6);
synthesizedPoints.push(bezierEquation(c, 0.8));
synthesizedPressures.push(r0 * 0.2 + r1 * 0.8);
}
}
synthesizedPoints.push(points[i]);
synthesizedPressures.push(r1);
for (let j = 1; j < synthesizedPoints.length; j++) {
drawTaperedCapsule(
context,
synthesizedPoints[j - 1][0],
synthesizedPoints[j - 1][1],
synthesizedPressures[j - 1],
synthesizedPoints[j][0],
synthesizedPoints[j][1],
synthesizedPressures[j],
);
}
} }
}; };