tsParticles EmittersShapes 插件详解：用 5 种发射器形状精确控制粒子生成区域

tsParticles EmittersShapes 插件详解用 5 种发射器形状精确控制粒子生成区域【免费下载链接】tsparticlestsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.项目地址: https://gitcode.com/GitHub_Trending/ts/tsparticles导读在 tsParticles 中emitters发射器负责按时间节奏持续生成粒子而粒子究竟从哪里冒出来则由发射器的**形状shape**决定。plugins/emittersShapes/目录下的 5 个独立插件为发射器补充了canvas、circle、path、polygon、square五种开箱即用的形状实现——从最简单的矩形/圆形区域到用任意 HTML Canvas 内容图片、文本、现有画布逐像素决定发射点的高级玩法。阅读本文后你将掌握每种形状的安装方式、emitters.shape.type与对应选项的完整配置方法以及其背后的随机取点算法原理可直接在自己的粒子效果中落地使用。一、EmittersShapes 插件是什么plugins/emittersShapes/下的一组插件是 tsParticles 发射器系统Emitters 插件文档的形状扩展。它们不定义任何顶层top-level的 options 配置节而是通过向发射器注册IEmitterShapeGenerator实现让你在emitters.shape.type中按名称选用形状。这种设计意味着形状是发射器的一个属性而不是独立的配置项。你只需要在启动粒子引擎前注册对应的形状插件然后按下面的结构配置即可{ emitters: { shape: { type: circle, options: {} } } }其中type填写形状名如circle、pathoptions传入该形状专有的配置不同形状见下文各小节。二、5 种发射器形状一览包名package形状名type说明tsparticles/plugin-emitter-shape-canvascanvas以 HTML Canvas 内容图片、文本、现有画布为发射区域逐像素随机取点tsparticles/plugin-emitter-shape-circlecircle圆形发射区域tsparticles/plugin-emitter-shape-pathpath基于 SVG Path 折线路径的发射区域tsparticles/plugin-emitter-shape-polygonpolygon多边形发射区域可配置边数与旋转角tsparticles/plugin-emitter-shape-squaresquare正方形/矩形发射区域发射器默认形状每个包在仓库中对应plugins/emittersShapes/shape/目录遵循统一的源码组织方式例如 circle 形状的核心实现位于 EmittersCircleShape.ts生成器位于 EmittersCircleShapeGenerator.ts。生成器实现IEmitterShapeGenerator.generate()由发射器在初始化时调用返回具体的形状实例——这是所有形状插件统一的接入机制。三、square发射器默认的矩形区域square是发射器的默认形状在 Emitters.md 中EmitterShape默认值为{ type: square, options: {} }因此在不显式配置形状时粒子默认从矩形区域内生成。该形状无需任何 options。它的行为受发射器的两个基础属性影响fill: true默认粒子在矩形内部随机生成。从 EmittersSquareShape.ts 的randomPosition()可见内部取点使用position offset * (getRandom() - 0.5)即在 x/y 两个维度上均匀随机分布。fill: false粒子只在矩形的四条边上生成。实现中通过getRandomSize(4)随机选中上/右/下/左Sides枚举一条边再在该边上随机取点见 EmittersSquareShape.ts。{ emitters: { shape: { type: square }, size: { width: 40, height: 10, mode: percent }, fill: true, rate: { quantity: 2, delay: 0.1 } } }四、circle圆形与圆环发射区域circle形状通过极坐标随机取点。核心实现在 EmittersCircleShape.ts以椭圆方程计算当前随机角度对应的最大半径radius (a*b) / sqrt((b*cosθ)² (a*sinθ)²)其中a、b分别为宽高的一半fill: true时半径取maxRadius * sqrt(getRandom())使用sqrt保证整圆面积上的概率密度均匀否则圆心附近会聚集过多粒子fill: false时半径直接取maxRadius粒子只会出现在圆周上。注意该实现同时支持宽高不等的椭圆发射区域。最小配置示例如下{ emitters: { shape: { type: circle }, position: { x: 50, y: 30 }, size: { width: 20, height: 20, mode: percent }, rate: { quantity: 3, delay: 0.2 } } }五、polygon可旋转的多边形发射区域polygon形状生成一个正多边形作为发射区域配置项定义在 EmittersPolygonShapeOptions.ts选项类型默认值说明sidesnumber5多边形边数如 5 五边形3 三角形6 六边形anglenumber0多边形整体旋转角度内部通过degToRad转为弧度在 EmittersPolygonShape.ts 中多边形顶点由generateRandomPolygon()基于发射器位置、size.width / 2半径与旋转角计算得出fill: true时在内部取点generateRandomPointWithinPolygonfill: false时在多边形周长上取点generateRandomPointOnPolygonPerimeter。顶点算法与取点工具位于 utils.ts。{ emitters: { shape: { type: polygon, options: { sides: 6, angle: 15 } }, position: { x: 50, y: 50 }, size: { width: 30, height: 30, mode: percent }, fill: false } }六、path用折线路径定义发射区域path形状用一系列百分比坐标点折线来描绘发射区域轮廓配置项定义在 EmittersPathShapeOptions.ts选项类型默认值说明pointsICoordinates[][]定义路径的坐标点数组坐标为百分比0–100缺省单项时回退为{ x: 50, y: 50 }在 EmittersPathShape.ts 中每个百分比坐标会被换算为实际像素坐标offset point * size / 100并用Path2D依次moveTo/lineTo首尾闭合发射器resize时会重新计算路径。取点时fill: truegenerateRandomPointWithinPath()在路径内部取点fill: falsegenerateRandomPointOnPathPerimeter()在路径周长上取点。两点取点算法均依赖离屏 Canvas 的isPointInPath判断实现在 utils.ts。一个五角星形路径的示例{ emitters: { shape: { type: path, options: { points: [ { x: 50, y: 0 }, { x: 61, y: 35 }, { x: 98, y: 35 }, { x: 68, y: 57 }, { x: 79, y: 91 }, { x: 50, y: 70 }, { x: 21, y: 91 }, { x: 32, y: 57 }, { x: 2, y: 35 }, { x: 39, y: 35 } ] } }, rate: { quantity: 5, delay: 0.1 } } }七、canvas把任意画面变成发射区域图片/文本/现有画布canvas是功能最丰富的形状它把一张图片、一段文本或一个现有的 HTML Canvas 渲染为像素数据然后只在不透明像素处随机生成粒子从而让粒子效果“临摹”任意图形。其选项定义在 EmittersCanvasShapeOptions.ts完整参数如下选项类型默认值说明elementHTMLCanvasElementundefined直接传入一个 Canvas 元素作为像素来源selectorstringCSS 选择器用于从 DOM 中查找 Canvas 元素imageHTMLImageElementundefined图片元素使用其src加载绘制textTextOptions见下方子选项以文本作为像素来源pixelsPixelsOptions{ offset: 4 }像素采样步长offset值越大发射点越稀疏、性能越好scalenumber1形状的缩放系数用于放大/缩小发射区域filterstring \| ((pixel: IRgba) boolean)pixel pixel.a 0像素过滤函数决定哪些像素允许生成粒子在 EmittersCanvasShape.ts 的init()中四种来源按优先级依次尝试image通过getImageData(url, offset, renderSettings)异步加载图片并采样像素element或selector取到 Canvas 后通过getCanvasImageData()读取其 2D 上下文像素text通过getTextData()先把文本按指定字体渲染到离屏画布再采样来自tsparticles/canvas-utils。randomPosition()EmittersCanvasShape.ts在width * height的像素网格中随机选点用filter(pixel)判断该像素是否“可用”默认仅要求 alpha 0最多重试maxRetries 100次命中后按scale换算为实际坐标并返回该像素的颜色与透明度——这意味着发射出的粒子还能自动带上图形本身的颜色color: { ...pixel }、opacity: pixel.a。7.1 用文本作为发射区域text子选项TextOptions.ts包含选项类型默认值说明colorstring#000000绘制文本的颜色textstring要绘制的文本内容font.familystringVerdana字体族TextFontOptions.tsfont.sizestring \| number32字号font.stylestring字体样式如italicfont.variantstring字体变体如small-capsfont.weightstring字重如boldlines.separatorstring\n多行文本的分隔符TextLinesOptions.tslines.spacingnumber0行间距像素文本形状配置示例{ emitters: { shape: { type: canvas, options: { text: { text: Hi!, color: #ffffff, font: { family: Arial, size: 64, weight: bold }, lines: { spacing: 4 } }, pixels: { offset: 6 }, scale: 1.2 } }, rate: { quantity: 8, delay: 0.05 } } }7.2 用现有 Canvas 元素或图片作为发射区域如果页面上已有一个画布例如用脚本画出的 Logo 或图形可用selector或element直接引用也可以传入一个图片元素{ emitters: { shape: { type: canvas, options: { selector: #myCanvas, pixels: { offset: 2 }, filter: myPixelFilter } } } }filter的用法值得注意在 EmittersCanvasShape.ts 中如果传入字符串实现会去globalThis即window上查找同名函数并用作过滤回调因此你可以把过滤逻辑写成全局函数window.myPixelFilter (pixel) pixel.r 200 pixel.a 0;也可以用内联函数TS/JS 配置实现同样的效果例如只让偏红的像素发射粒子。八、如何在项目中接入使用8.1 安装与注册这些形状插件都是独立的 npm 包与tsparticles/plugin-emitters配合使用。以 circle 为例npm install tsparticles/plugin-emitter-shape-circle然后在初始化时通过initParticlesEngine注册各包均提供 ESM 与懒加载入口见各包src/index.ts与src/index.lazy.tsimport { initParticlesEngine } from tsparticles/engine; import { loadEmittersPlugin } from tsparticles/plugin-emitters; import { loadEmittersShapeCircle } from tsparticles/plugin-emitter-shape-circle; await initParticlesEngine(async (engine) { await loadEmittersPlugin(engine); await loadEmittersShapeCircle(engine); });提示由于形状通过emitters.shape.type名称解析注册哪个包就启用哪种形状未注册的形状名将无法解析请确保注册与配置一一对应。完整的发射器选项position、size、rate、life、particles等参见 Emitters 插件文档。8.2 与fill属性的配合fill是控制所有形状行为方式的通用开关默认truefill: true粒子在形状内部生成fill: false粒子只在形状的轮廓/边界上生成。它对五种形状全部生效square 只在四条边上、circle 只在圆周上、polygon 只在周长上、path 只在路径轮廓上、canvas 则只取通过filter的像素点。设计“描边式”或“空心式”发射效果时优先利用这个属性而不是调整size。九、实现原理小结统一的形状抽象从源码结构看所有形状插件都遵循同一套抽象tsparticles/plugin-emitters中的IEmitterShapeGenerator/EmitterShapeBaseGenerator 注册每个插件导出loadEmittersShapeXxx(engine)向引擎注册生成器供emitters.shape.type按名解析形状实例化generate()接收容器、位置、尺寸、fill与选项构造形状实例init()异步准备形状数据canvas 形状在此采样像素其余形状为空实现randomPosition()每次生成粒子时调用返回一个随机坐标canvas 形状额外返回颜色与透明度resize()容器尺寸变化时重建几何path、polygon 实现了重建逻辑。理解这条调用链后如果需要自定义全新形状也可以参考任一插件的目录结构circle 包是最简参考实现自行扩展。结语EmittersShapes 系列插件把“从哪里发射粒子”从固定矩形扩展为圆形、多边形、SVG 路径乃至任意图片/文本像素区域配合fill开关即可自由组合出喷泉、圆环、图形描边、像素文字等丰富的发射形态。只需按本文所述注册对应插件并在emitters.shape.type中选用形状再对照各形状的options微调参数即可在 tsParticles 中实现高度可控的粒子发射区域。【免费下载链接】tsparticlestsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.项目地址: https://gitcode.com/GitHub_Trending/ts/tsparticles创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考