pixi.js
Version:
<p align="center"> <a href="https://pixijs.com" target="_blank" rel="noopener noreferrer"> <img height="150" src="https://files.pixijs.download/branding/pixijs-logo-transparent-dark.svg?v=1" alt="PixiJS logo"> </a> </p> <br/> <p align="center">
1 lines • 11.5 kB
Source Map (JSON)
{"version":3,"file":"roundShape.mjs","sources":["../../../../../src/scene/graphics/shared/path/roundShape.ts"],"sourcesContent":["import type { PointData } from '../../../../maths/point/PointData';\nimport type { ShapePath } from './ShapePath';\n\n/**\n * Typed and cleaned up version of:\n * https://stackoverflow.com/questions/44855794/html5-canvas-triangle-with-rounded-corners/44856925#44856925\n * @param g - Graphics to be drawn on.\n * @param points - Corners of the shape to draw. Minimum length is 3.\n * @param radius - Corners default radius.\n * @ignore\n */\nexport function roundedShapeArc(\n g: ShapePath,\n points: RoundedPoint[],\n radius: number\n): void\n{\n const vecFrom = (p: PointData, pp: PointData) =>\n {\n const x = pp.x - p.x;\n const y = pp.y - p.y;\n const len = Math.sqrt((x * x) + (y * y));\n const nx = x / len;\n const ny = y / len;\n\n return { len, nx, ny };\n };\n\n const sharpCorner = (i: number, p: PointData) =>\n {\n if (i === 0)\n {\n g.moveTo(p.x, p.y);\n }\n else\n {\n g.lineTo(p.x, p.y);\n }\n };\n\n let p1 = points[points.length - 1];\n\n for (let i = 0; i < points.length; i++)\n {\n const p2 = points[i % points.length];\n const pRadius = p2.radius ?? radius;\n\n if (pRadius <= 0)\n {\n sharpCorner(i, p2);\n p1 = p2;\n continue;\n }\n\n const p3 = points[(i + 1) % points.length];\n const v1 = vecFrom(p2, p1);\n const v2 = vecFrom(p2, p3);\n\n if (v1.len < 1e-4 || v2.len < 1e-4)\n {\n sharpCorner(i, p2);\n p1 = p2;\n continue;\n }\n\n let angle = Math.asin((v1.nx * v2.ny) - (v1.ny * v2.nx));\n let radDirection = 1;\n let drawDirection = false;\n\n if ((v1.nx * v2.nx) - (v1.ny * -v2.ny) < 0)\n {\n if (angle < 0)\n {\n angle = Math.PI + angle;\n }\n else\n {\n angle = Math.PI - angle;\n radDirection = -1;\n drawDirection = true;\n }\n }\n else if (angle > 0)\n {\n radDirection = -1;\n drawDirection = true;\n }\n\n const halfAngle = angle / 2;\n\n let cRadius: number;\n let lenOut = Math.abs(\n (Math.cos(halfAngle) * pRadius) / Math.sin(halfAngle)\n );\n\n if (lenOut > Math.min(v1.len / 2, v2.len / 2))\n {\n lenOut = Math.min(v1.len / 2, v2.len / 2);\n cRadius = Math.abs((lenOut * Math.sin(halfAngle)) / Math.cos(halfAngle));\n }\n else\n {\n cRadius = pRadius;\n }\n\n const cX = p2.x + (v2.nx * lenOut) + (-v2.ny * cRadius * radDirection);\n const cY = p2.y + (v2.ny * lenOut) + (v2.nx * cRadius * radDirection);\n const startAngle = Math.atan2(v1.ny, v1.nx) + ((Math.PI / 2) * radDirection);\n const endAngle = Math.atan2(v2.ny, v2.nx) - ((Math.PI / 2) * radDirection);\n\n if (i === 0)\n {\n g.moveTo(\n cX + (Math.cos(startAngle) * cRadius),\n cY + (Math.sin(startAngle) * cRadius)\n );\n }\n\n g.arc(cX, cY, cRadius, startAngle, endAngle, drawDirection);\n\n p1 = p2;\n }\n}\n\n/**\n * Data structure for points with optional radius.\n * @category scene\n * @standard\n */\nexport type RoundedPoint = PointData & { radius?: number };\n\n/**\n * Typed and cleaned up version of:\n * https://stackoverflow.com/questions/44855794/html5-canvas-triangle-with-rounded-corners/56214413#56214413\n * @param g - Graphics to be drawn on.\n * @param points - Corners of the shape to draw. Minimum length is 3.\n * @param radius - Corners default radius.\n * @ignore\n */\nexport function roundedShapeQuadraticCurve(\n g: ShapePath,\n points: RoundedPoint[],\n radius: number,\n smoothness?: number,\n): void\n{\n const distance = (p1: PointData, p2: PointData) =>\n Math.sqrt(((p1.x - p2.x) ** 2) + ((p1.y - p2.y) ** 2));\n\n const pointLerp = (p1: PointData, p2: PointData, t: number) => ({\n x: p1.x + ((p2.x - p1.x) * t),\n y: p1.y + ((p2.y - p1.y) * t),\n });\n\n const numPoints = points.length;\n\n for (let i = 0; i < numPoints; i++)\n {\n const thisPoint = points[(i + 1) % numPoints];\n const pRadius = thisPoint.radius ?? radius;\n\n if (pRadius <= 0)\n {\n if (i === 0)\n {\n g.moveTo(thisPoint.x, thisPoint.y);\n }\n else\n {\n g.lineTo(thisPoint.x, thisPoint.y);\n }\n\n continue;\n }\n\n const lastPoint = points[i];\n const nextPoint = points[(i + 2) % numPoints];\n\n const lastEdgeLength = distance(lastPoint, thisPoint);\n let start;\n\n if (lastEdgeLength < 1e-4)\n {\n start = thisPoint;\n }\n else\n {\n const lastOffsetDistance = Math.min(lastEdgeLength / 2, pRadius);\n\n start = pointLerp(\n thisPoint,\n lastPoint,\n lastOffsetDistance / lastEdgeLength\n );\n }\n\n const nextEdgeLength = distance(nextPoint, thisPoint);\n let end;\n\n if (nextEdgeLength < 1e-4)\n {\n end = thisPoint;\n }\n else\n {\n const nextOffsetDistance = Math.min(nextEdgeLength / 2, pRadius);\n\n end = pointLerp(\n thisPoint,\n nextPoint,\n nextOffsetDistance / nextEdgeLength\n );\n }\n\n if (i === 0)\n {\n g.moveTo(start.x, start.y);\n }\n else\n {\n g.lineTo(start.x, start.y);\n }\n g.quadraticCurveTo(thisPoint.x, thisPoint.y, end.x, end.y, smoothness);\n }\n}\n"],"names":[],"mappings":"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"}