Clyune Component GalleryDrawing Board · How it works & code
Exponential Smoothing Brush with Speed-Sensing Line Width
Runtime logic
Visiting `/canvas/draw`, DemoHost lazy-loads `demos/kits/kit-canvas.js` (registry `mod: 'kit-canvas'`) and calls `mount(host, { variant: 'draw' })`. mount resolves the variant to family `draw`; `withControls` builds the control panel (5 presets + sliders). `createCanvasStage` creates the `<canvas>` (HiDPI ≤ 2×, ResizeObserver) and the info panel. The family’s `build(S)` initialises state and returns the per-frame callback. Every `requestAnimationFrame`: read controls, advance a speed-scaled clock (dt ≤ 50 ms), run the frame callback; returned readouts go to the info panel. Pointer down/drag/move updates the interaction (drag handles, hover readouts); when untouched and auto-demo is on, the pointer follows a Lissajous path. Changing parameters: colour/speed/size apply live; structural ones remount; leaving the page cancels rAF, removes listeners and frees resources.
Environment
Canvas 2D: 2D canvas drawing; requestAnimationFrame: Display-synced animation loop; ResizeObserver: Canvas follows container size; Pointer Events: Unified mouse/touch/pen events; devicePixelRatio: Crisp HiDPI rendering (capped at 2×) · react 18.3.1, react-router-dom 6.30.6, vite 5.4.21
Dependencies
react 18.3.1
Imported APIs
withControls — Wraps the demo in the shared control panel (presets, sliders, reset); hot-updates or remounts on change; paramsFromSpec — Turns the spec (colour/speed/size/count/extras) into control-panel parameter definitions; createCanvasStage — Shared Canvas 2D stage: canvas + info panel, HiDPI, one rAF loop, pointer state, idle auto-pointer; makeLayer — Offscreen layer (trails / pixel fields); fadeA — Frame-rate independent fade factor; rgba — Builds an rgba() colour string; clamp — Clamps a value to a range; TAU — Constant 2π; fmt — Number formatting (fixed decimals); F — Formula block HTML; S.onDown — Pointer down; S.onUp — Pointer up; S.isAutoDemo — Whether auto demo is on; S.clear — Clears with the background colour (translucent = trails); S.get — Reads current control values; S.onFrame — Registers a per-frame callback; its return value feeds the info panel; ctx.beginPath() — Starts a new path; ctx.moveTo() — Moves the pen without drawing; ctx.lineTo() — Adds a straight line to a point; ctx.stroke() — Strokes the current path; ctx.drawImage() — Draws an image or offscreen canvas; ctx.arc() — Adds a circular arc (center, radius, start/end angle); ctx.fill() — Fills the current path
Source code
frontend/src/demos/kits/kit-canvas.js: FAM.draw (L180-L231)
Code walkthrough
L182-182: Control definitions (colour/speed/size/count/extras): Brush Color, Brush Width, Smoothness s, Fade Speed, Speed-Sensing Line Width, Auto Demonstration Pen. L183-183: Preset buttons: name → parameter overrides (5). L184-192: Info-panel content: live rows(v), formula, notes, params, steps. L193-230: Init function: sets up state and returns the per-frame callback: registers pointer handlers `S.onDown`, `S.onUp`; draws with Canvas 2D `beginPath`, `moveTo`, `lineTo`, `stroke`, `drawImage`, `arc` …; math via `Math.abs`, `Math.pow`, `Math.hypot`, `Math.max`; returns readouts `strokes`, `len`, `v`, `w`, `s`, `col`, `fade` … to the info panel.
Principles
Smooth point piPiPiPiPiPi+ (1 − s) · (p − p̃) Line width w = Thickness × clamp(1.4 − v/1200, 0.4, 1.4) Long = |p̃ₙ − p̃ₙ₋₁|Chief = ΣΔl 手指或鼠标的原始坐标会抖动。笔刷不直接用原始点，而是让“Nib”Every time we just go to the original point (1 − s) The percentage, it's called Index Smooth ，s The bigger the line, the smoother it is“拖”。 Turning on speed sensors, drawing speed lines is thin, drawing slow lines is thick Certainly like real quills. The painted handwriting is on a screenless canvas, fades > 0 It fades away. Double-click to clear the board.