将图像渲染为交互式粒子

时间:2024-06-28 09:26:08
【文件属性】:

文件名称:将图像渲染为交互式粒子

文件大小:546KB

文件格式:ZIP

更新时间:2024-06-28 09:26:08

Photo / Image

react-particle-image 将图像渲染为交互式粒子 安装 npm install --save react-particle-image Links Demo (source) Docs Simple Usage codesandbox import * as React from "react"; import ParticleImage, { ParticleOptions } from "react-particle-image"; constparticleOptions: ParticleOptions = { filter: ({ x, y, image }) => { // 获取像素 const pixel = image.get(x, y); // 如果 blue > 50 (range 0-255) return pixel.b > 50; // 为这个像素创建一个粒子; }, 颜色: ({ x, y, image }) => "#61dafb" }; 导出默认函数 App() { return ( ); 复杂的用法代码和框 import * as Re


【文件预览】:
react-particle-image-master
----rollup.config.js(879B)
----public()
--------sample.png(53KB)
--------react-logo.png(29KB)
----yarn.lock(638KB)
----.eslintrc.js(635B)
----src()
--------types.ts(337B)
--------utils.ts(4KB)
--------index.ts(359B)
--------ParticleImage()
--------universe()
--------setupTests.ts(122B)
----.babelrc(73B)
----tsconfig.test.json(87B)
----.storybook()
--------webpack.config.js(284B)
--------config.js(176B)
--------addons.js(127B)
----tsconfig.declaration.json(195B)
----.travis.yml(39B)
----tsconfig.json(1KB)
----README.md(3KB)
----typings()
--------index.d.ts(33B)
----.editorconfig(147B)
----.gitignore(298B)
----package-lock.json(937KB)
----package.json(3KB)
----.nvmrc(8B)

网友评论