Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
This commit is contained in:
Mark Tolmacs 2025-04-23 19:41:23 +02:00
parent d478974e0d
commit cd15d852e2
No known key found for this signature in database

View file

@ -200,8 +200,8 @@ const strokeDiamondWithRotation = (
) => { ) => {
const { width, height } = element; const { width, height } = element;
const side = Math.hypot(width, height); const side = Math.hypot(width, height);
const wPaddingMax = (1.5 * (padding * side)) / height; const wPaddingMax = (1.8 * (padding * side)) / height;
const hPaddingMax = (1.5 * (padding * side)) / width; const hPaddingMax = (1.8 * (padding * side)) / width;
const [x, y] = pointRotateRads( const [x, y] = pointRotateRads(
pointFrom<GlobalPoint>(element.x, element.y), pointFrom<GlobalPoint>(element.x, element.y),
elementCenterPoint(element), elementCenterPoint(element),
@ -268,6 +268,9 @@ const strokeDiamondWithRotation = (
} }
} }
// Counter-clockwise for the cutout in the middle. We need to have an "inverse
// mask" on a filled shape for the diamond highlight, because stroking creates
// sharp inset edges on line joins < 90 degrees.
{ {
const [topX, topY, rightX, rightY, bottomX, bottomY, leftX, leftY] = const [topX, topY, rightX, rightY, bottomX, bottomY, leftX, leftY] =
getDiamondPoints(element, 5, 5); getDiamondPoints(element, 5, 5);
@ -324,7 +327,6 @@ const strokeDiamondWithRotation = (
context.closePath(); context.closePath();
context.fill(); context.fill();
//context.stroke();
} }
context.restore(); context.restore();