|
| 1 | +import {Coord, Point} from "./types"; |
| 2 | +import {expandHandle} from "./util"; |
| 3 | + |
| 4 | +const pointSize = 2; |
| 5 | +const infoSpacing = 20; |
| 6 | + |
| 7 | +let ctx: CanvasRenderingContext2D; |
| 8 | +const canvas = document.createElement("canvas"); |
| 9 | +document.body.appendChild(canvas); |
| 10 | + |
| 11 | +const temp = canvas.getContext("2d"); |
| 12 | +if (temp === null) throw new Error("context is null"); |
| 13 | +ctx = temp; |
| 14 | + |
| 15 | +export const canvasClear = () => { |
| 16 | + ctx.clearRect(0, 0, canvas.width, canvas.height); |
| 17 | +}; |
| 18 | + |
| 19 | +export const canvasSize = (width: number, height: number) => { |
| 20 | + canvas.height = height; |
| 21 | + canvas.width = width; |
| 22 | +}; |
| 23 | + |
| 24 | +const drawLine = (a: Coord, b: Coord, style: string) => { |
| 25 | + const backupStrokeStyle = ctx.strokeStyle; |
| 26 | + ctx.beginPath(); |
| 27 | + ctx.moveTo(a.x, a.y); |
| 28 | + ctx.lineTo(b.x, b.y); |
| 29 | + ctx.strokeStyle = style; |
| 30 | + ctx.stroke(); |
| 31 | + ctx.strokeStyle = backupStrokeStyle; |
| 32 | +}; |
| 33 | + |
| 34 | +const drawPoint = (p: Coord, style: string) => { |
| 35 | + const backupFillStyle = ctx.fillStyle; |
| 36 | + ctx.beginPath(); |
| 37 | + ctx.arc(p.x, p.y, pointSize, 0, 2 * Math.PI); |
| 38 | + ctx.fillStyle = style; |
| 39 | + ctx.fill(); |
| 40 | + ctx.fillStyle = backupFillStyle; |
| 41 | +}; |
| 42 | + |
| 43 | +export const drawInfo = (() => { |
| 44 | + let count = 1; |
| 45 | + const positions: Record<string, any> = {}; |
| 46 | + return (label: string, value: any) => { |
| 47 | + if (!positions[label]) { |
| 48 | + positions[label] = count; |
| 49 | + count++; |
| 50 | + } |
| 51 | + ctx.fillText(`${label}: ${value}`, infoSpacing, positions[label] * infoSpacing); |
| 52 | + }; |
| 53 | +})(); |
| 54 | + |
| 55 | +export const drawShape = (debug: boolean, points: Point[]) => { |
| 56 | + if (points.length < 2) throw new Error("not enough points"); |
| 57 | + |
| 58 | + // Draw points. |
| 59 | + for (let i = 0; i < points.length; i++) { |
| 60 | + // Compute coordinates of handles. |
| 61 | + const curr = points[i]; |
| 62 | + const next = points[(i + 1) % points.length]; |
| 63 | + const currHandle = expandHandle(curr, curr.handleOut); |
| 64 | + const nextHandle = expandHandle(next, next.handleIn); |
| 65 | + |
| 66 | + if (debug) { |
| 67 | + drawPoint(curr, ""); |
| 68 | + drawLine(curr, currHandle, "#ccc"); |
| 69 | + drawLine(next, nextHandle, "#b6b"); |
| 70 | + } |
| 71 | + |
| 72 | + // Draw curve between curr and next points. |
| 73 | + ctx.beginPath(); |
| 74 | + ctx.moveTo(curr.x, curr.y); |
| 75 | + ctx.bezierCurveTo(currHandle.x, currHandle.y, nextHandle.x, nextHandle.y, next.x, next.y); |
| 76 | + ctx.stroke(); |
| 77 | + } |
| 78 | +}; |
0 commit comments