Clyune Component GalleryVignette · How it works & code
Darkens the edges of the image, drawing attention to the center, commonly used in photography and film.
Runtime logic
Visiting `/filters/vignette`, DemoHost lazy-loads `demos/kits/kit-filters.js` (registry `mod: 'kit-filters'`) and calls `mount(host, { variant: 'vignette' })`. mount resolves the variant to family `vignette`; `withControls` builds the control panel (6 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. 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; hueOf — Hue of a colour (0–360°); clamp — Clamps a value to a range; TAU — Constant 2π; fmt — Number formatting (fixed decimals); F — Formula block HTML; S.clear — Clears with the background colour (translucent = trails); S.onFrame — Registers a per-frame callback; its return value feeds the info panel; ctx.fillText() — Draws filled text; ctx.beginPath() — Starts a new path; ctx.moveTo() — Moves the pen without drawing; ctx.arcTo() — Adds an arc using tangent lines; ctx.closePath() — Closes the current sub-path; ctx.fill() — Fills the current path; ctx.stroke() — Strokes the current path; ctx.createLinearGradient() — Creates a linear gradient; ctx.fillRect() — Fills a rectangle; ctx.arc() — Adds a circular arc (center, radius, start/end angle); ctx.lineTo() — Adds a straight line to a point; ctx.save() — Saves the drawing state (transform, styles, clip); ctx.clip() — Turns the current path into the clipping region; ctx.drawImage() — Draws an image or offscreen canvas
Source code
frontend/src/demos/kits/kit-filters.js: FAM.vignette (L342-L351)
Code walkthrough
L342-351: Calls the factory `fFam()` to produce the full definition (spec + doc + build) from the options below. L342-342: Title shown in the info and control panels: “Vignette”. L342-342: Range/default of the count slider. L342-342: Extra demo-specific slider/toggle: Vignette Strength. L342-342: Range/default of the size slider. L342-342: Default main colour. L343-343: Help text of the count parameter. L343-343: Help text of the extra parameter. L343-343: Help text of the size parameter. L344-344: Preset buttons: name → parameter overrides (5). L345-345: Body of the “Notes” section. L346-346: Main formula of the “Formula” section. L346-346: Second formula line. L347-351: Per-frame draw function: math via `Math.round`, `Math.floor`, `Math.hypot`, `Math.max`; returns readouts `mode`, `cell` to the info panel.
Principles
d = distance of pixels to centre / Half diagonal Brightness factor = 1 - strength · Smooth (d - radius, 0 → 1 - radius) Vignette: Keep the picture dark and focus your eyes on the center, often in photography and movies. The larger the distance of each pixel to the centre, the smaller the coefficient. CSS usually covers the picture with a radial-gradient gradient from transparent to black. 为了在所有浏览器里效果一致，这里没有直接调用 CSS 的 filter，而是把一张会动的风景「照片」先画到一块小画布上，再按 W3C 规范里每个滤镜的公式逐个像素计算颜色，最后放大显示。中间那条竖线左边是原图、右边是滤镜后的结果，竖线会跟着指针移动；把指针放在图上，信息面板会显示这一点滤镜前后的颜色。