将logo或图片进行粒子化的动态动画,支持位置,粒子大小、颜色自定义,自适应规则等进行设置。
demo: https://sepveneto.github.io/logo-particle/
涉及到可选链(?.)和空值合并操作符(??),如果有兼容性需求,可以自行修改tsconfig.json
重新打包
Edge ≥ 85 | Firefox ≥ 79 | Chrome ≥ 85 | Safari ≥ 14 |
npm i ./logo-particle-1.0.2.tgz
yarn add ./logo-particle-1.0.2.tgz
pnpm i ./logo-particle-1.0.2.tgz
import { Stage } from 'logo-particle'
const stage = new Stage(document.querySelector('canvas'))
stage.loadImage('/static/github.png', { /* 相关配置 */ }).then((data) => {
stage.start()
stage.switchShape(data)
})
<script src="./index.umd.js"></script>
window.onload = () => {
const node = document.querySelector('#canvas')
const stage = new LOGO_PARTICLE.Stage(node)
stage.loadImage('static/github.jpg', {
/*
相关配置
*/
}).then((data) => {
/*
图片导入成功后解析的坐标集
*/
})
}
{
width?: number, // 渲染宽度
height?: number // 渲染高度
x?: number, // 原点的坐标
y?: number, // 原点的坐标
seeds?: number[][] = [[0, 0]], // 取色的基准点[x,y]
thresh?: number = 10, // 生长准则
type?: FitType = 'none', // 同object-fit
imgGap?: number = 6, // 图片粒子化时的取点规则
origin?: OriginType = 'left-top', // 图片渲染时的原点
particleSize?: number = 2, // 粒子半径
color?: number = 0x000000, // 粒子颜色
}
原则上不会去限制粒子化图片的大小,但是如果图片过大,或取点的值设置得过小,导致粒子过多,会来严重影响性能甚至导致浏览器失去响应。