tsParticles 粒子描边Stroke配置迁移指南从 particles.stroke 到 particles.paint.stroke【免费下载链接】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 中粒子描边Stroke配置的官方文档展开说明描边选项为何从旧路径particles.stroke迁移至particles.paint.stroke并结合引擎源码engine/src深入讲解paint分组下stroke的完整参数、默认值与渲染原理。读完本文你将掌握在 JSON 配置或tsParticles.load()代码中正确书写粒子描边宽度、颜色、透明度并理解其与paint.fill、paint.color的协作关系。背景为什么 Stroke 选项被归入paint分组在 Stroke.md 中明确指出Stroke 选项已被归档到 Particles Paint 文档中新的配置路径为particles.paint.stroke。这是 tsParticles 将粒子「填充」与「描边」两类绘制选项统一收拢到paint命名空间的设计调整旧路径particles.stroke新路径particles.paint.stroke从源码可以印证这一分组意图。IPaint.ts 注释写明paint是“grouping fill and stroke so variants can be selected together”即让填充与描边可以作为同一套变体variant被整体选择Paint.ts 类则通过懒加载方式持有fill与stroke两个子选项loadLazyProperty(this, fill, data.fill, () new Fill()); loadLazyProperty(this, stroke, data.stroke, () new Stroke());paint分组结构与颜色回退规则Paint.md 给出的paint属性表如下KeyTypeNotescolorIColor默认填充/描边颜色回退值fallbackfillIColorFill粒子内部颜色选项strokeSingleOrMultiple描边轮廓选项对应IStroke关键回退规则paint.color是 fill 和 stroke 的基准颜色。当paint.fill.color或paint.stroke.color未设置时引擎使用paint.color一旦两者自身设置了color则优先于paint.color。默认值在 ParticlesOptions.ts 中初始化保持历史行为——粒子默认白色且填充this.paint.color new AnimatableColor(); this.paint.color.value #fff; this.paint.fill new Fill(); this.paint.fill.enable true;即paint.color.value默认#fffpaint.fill.enable默认truepaint.stroke完整参数解析描边选项对应接口 IStroke.ts其实现类 Stroke.ts 包含三个字段字段类型默认值说明colorIAnimatableColor \| IRangeColor继承paint.color描边颜色支持颜色动画IAnimatableColor或随机范围色IRangeColoropacityRangeValue未设置可选描边透明度可为静态数值或{ min, max }范围对象widthRangeValue0描边线宽同样支持范围值用于在粒子之间随机取宽其中width与opacity都经由loadRangeProperty加载见 Stroke.ts因此二者既可以写死为单个数字也可以写成{ min, max }让每个粒子在范围内随机取值——这与 tsParticles 一贯的RangeValue约定一致。color则通过AnimatableColor.create创建说明描边颜色天然支持value加animation如enable、speed、sync的动画配置。需要注意width的默认值是0这意味着若不配置描边粒子不会有可见轮廓描边只在显式设置width 0时生效。这一点在渲染端也有印证RenderManager.ts 中只有当strokeWidth大于最小线宽时才设置strokeStyle并在绘制阶段对带描边的粒子调用context.stroke()RenderManager.ts。配置示例从迁移前后到完整用法迁移前旧路径已废弃{ particles: { stroke: { width: 2, color: { value: #ffffff } } } }迁移后新路径Paint.md 中的官方描边示例{ paint: { color: { value: #14b8a6 }, stroke: { width: 2, color: { value: #ffffff } } } }进阶范围宽度、透明度与描边颜色动画结合IStroke的字段能力可以写出更丰富的描边配置{ particles: { paint: { color: { value: #14b8a6 }, stroke: { width: { min: 1, max: 4 }, opacity: 0.8, color: { value: #ffffff, animation: { enable: true, speed: 1, sync: false } } } } } }在 JS/TS 中通过tsParticles.load()使用同样结构await tsParticles.load({ id: tsparticles, options: { particles: { paint: { color: { value: #14b8a6 }, stroke: { width: 2, color: { value: #ffffff }, }, }, }, }, });与paint.fill的协作只描边不填充描边与填充是互补关系fill.enable为true时粒子内部被填充为false时仅保留描边轮廓见 Fill.md。若想绘制“空心”粒子可组合配置{ particles: { paint: { color: { value: #14b8a6 }, fill: { enable: false }, stroke: { width: 2, color: { value: #ffffff } } } } }渲染端对此的分工清晰填充色与描边色都来自paint体系RenderManager.ts 通过 updater 的getColorStyles同时取得fill与stroke样式粒子绘制时先fill()再按线宽stroke()二者共用同一套颜色回退逻辑。相关文档索引描边主文档Paint.md填充选项Fill.md颜色模型IColor、IAnimatableColor、IRangeColorColor.md粒子选项根文档Particles.md选项总览Options.md【免费下载链接】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），仅供参考
tsParticles 粒子描边（Stroke）配置迁移指南：从 particles.stroke 到 particles.paint.stroke
tsParticles 粒子描边Stroke配置迁移指南从 particles.stroke 到 particles.paint.stroke【免费下载链接】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 中粒子描边Stroke配置的官方文档展开说明描边选项为何从旧路径particles.stroke迁移至particles.paint.stroke并结合引擎源码engine/src深入讲解paint分组下stroke的完整参数、默认值与渲染原理。读完本文你将掌握在 JSON 配置或tsParticles.load()代码中正确书写粒子描边宽度、颜色、透明度并理解其与paint.fill、paint.color的协作关系。背景为什么 Stroke 选项被归入paint分组在 Stroke.md 中明确指出Stroke 选项已被归档到 Particles Paint 文档中新的配置路径为particles.paint.stroke。这是 tsParticles 将粒子「填充」与「描边」两类绘制选项统一收拢到paint命名空间的设计调整旧路径particles.stroke新路径particles.paint.stroke从源码可以印证这一分组意图。IPaint.ts 注释写明paint是“grouping fill and stroke so variants can be selected together”即让填充与描边可以作为同一套变体variant被整体选择Paint.ts 类则通过懒加载方式持有fill与stroke两个子选项loadLazyProperty(this, fill, data.fill, () new Fill()); loadLazyProperty(this, stroke, data.stroke, () new Stroke());paint分组结构与颜色回退规则Paint.md 给出的paint属性表如下KeyTypeNotescolorIColor默认填充/描边颜色回退值fallbackfillIColorFill粒子内部颜色选项strokeSingleOrMultiple描边轮廓选项对应IStroke关键回退规则paint.color是 fill 和 stroke 的基准颜色。当paint.fill.color或paint.stroke.color未设置时引擎使用paint.color一旦两者自身设置了color则优先于paint.color。默认值在 ParticlesOptions.ts 中初始化保持历史行为——粒子默认白色且填充this.paint.color new AnimatableColor(); this.paint.color.value #fff; this.paint.fill new Fill(); this.paint.fill.enable true;即paint.color.value默认#fffpaint.fill.enable默认truepaint.stroke完整参数解析描边选项对应接口 IStroke.ts其实现类 Stroke.ts 包含三个字段字段类型默认值说明colorIAnimatableColor \| IRangeColor继承paint.color描边颜色支持颜色动画IAnimatableColor或随机范围色IRangeColoropacityRangeValue未设置可选描边透明度可为静态数值或{ min, max }范围对象widthRangeValue0描边线宽同样支持范围值用于在粒子之间随机取宽其中width与opacity都经由loadRangeProperty加载见 Stroke.ts因此二者既可以写死为单个数字也可以写成{ min, max }让每个粒子在范围内随机取值——这与 tsParticles 一贯的RangeValue约定一致。color则通过AnimatableColor.create创建说明描边颜色天然支持value加animation如enable、speed、sync的动画配置。需要注意width的默认值是0这意味着若不配置描边粒子不会有可见轮廓描边只在显式设置width 0时生效。这一点在渲染端也有印证RenderManager.ts 中只有当strokeWidth大于最小线宽时才设置strokeStyle并在绘制阶段对带描边的粒子调用context.stroke()RenderManager.ts。配置示例从迁移前后到完整用法迁移前旧路径已废弃{ particles: { stroke: { width: 2, color: { value: #ffffff } } } }迁移后新路径Paint.md 中的官方描边示例{ paint: { color: { value: #14b8a6 }, stroke: { width: 2, color: { value: #ffffff } } } }进阶范围宽度、透明度与描边颜色动画结合IStroke的字段能力可以写出更丰富的描边配置{ particles: { paint: { color: { value: #14b8a6 }, stroke: { width: { min: 1, max: 4 }, opacity: 0.8, color: { value: #ffffff, animation: { enable: true, speed: 1, sync: false } } } } } }在 JS/TS 中通过tsParticles.load()使用同样结构await tsParticles.load({ id: tsparticles, options: { particles: { paint: { color: { value: #14b8a6 }, stroke: { width: 2, color: { value: #ffffff }, }, }, }, }, });与paint.fill的协作只描边不填充描边与填充是互补关系fill.enable为true时粒子内部被填充为false时仅保留描边轮廓见 Fill.md。若想绘制“空心”粒子可组合配置{ particles: { paint: { color: { value: #14b8a6 }, fill: { enable: false }, stroke: { width: 2, color: { value: #ffffff } } } } }渲染端对此的分工清晰填充色与描边色都来自paint体系RenderManager.ts 通过 updater 的getColorStyles同时取得fill与stroke样式粒子绘制时先fill()再按线宽stroke()二者共用同一套颜色回退逻辑。相关文档索引描边主文档Paint.md填充选项Fill.md颜色模型IColor、IAnimatableColor、IRangeColorColor.md粒子选项根文档Particles.md选项总览Options.md【免费下载链接】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），仅供参考
