eschere / particlesystem

A canvas 2d particle system, support wechat miniprogram

demo

demo

粒子系统

一款基于canvas 2d的粒子系统，支持微信小程序。
小程序不支持获取canvas对象和其他dom操作, 所以粒子系统不包含canvas和context创建过程。

命令

// 安装依赖
yarn

// 运行测试
yarn test

// 编译ts
yarn build

// 打包umd版本
yarn build:umd

用法

导入粒子系统

const ParticleSystem = require('ParticleSystem');

也可以直接<script src="ParticleSystem.js"></script>形式引入，可以获取全局变量ParticleSystem

基础用法

canvas创建和属性设置需要开发者自己完成，粒子系统需要接收canvas画布上下文对象ctx

const ctx = canvas.getContext('2d');
const img = new Image();

img.src = './snow.png';
img.onload = function () {
  // 创建一个粒子系统
  const particle = new ParticleSystem(
    img,
    {
      width: img.width,
      height: img.height
    },
    config // 粒子系统的具体配置
  );

  // 开始
  particle.start();

  // 结束
  particle.stop();
};

构造函数

new ParticleSystem(texture, textureInfo, config, [ctx, [canvasInfo]])。

texture: 粒子纹理，在浏览器环境中为具体的图形对象Image,在微信小程序环境为本地图片路径。

textureInfo: {width: number, height: number} 粒子系统不提供兼容性的图片属性获取方法，所以需要手动传入图片的尺寸，以便进行等比例缩放。

config:

{
  gravity: {
    x: 10, // 横向加速度
    y: 80 // 纵向加速度
  },
  emitterX: 200, // 发射位置x坐标
  emitterY: -10, // 发射位置y坐标
  emitterXVariance: 200, // 发射位置x方向变化范围
  emitterYVariance: 10, // 发射位置y方向变化范围
  maxParticles: 10, // 最大粒子数
  endRotation: Math.PI * 4, // 结束时粒子旋转角度
  endRotationVariance: Math.PI * 2, // 结束时粒子旋转角度变化范围
  speed: 50, // 发射速度
  angle: Math.PI / 2, // 发射角度
  angleVariance: Math.PI / 2, // 发射角度变化范围
  startSize: 15, // 开始大小
  startSizeVariance: 5, // 开始大小变化范围
  lifespan: 5000 // 单个粒子生命周期
}

以上参数皆为必填项。

ctx: 画布上下文对象，以下情况可以不传该参数：

1. 使用particle.startOnlyData(cb)方式启动仅获取数据模式。

canvasInfo: {width: number, height: number}canvas尺寸信息，以确保画布能被整体刷新，以下情况可以省略此参数：

1. 你使用particle.update(dt)的方式重绘画布，而不是particle.start()
2. 你的运行环境中支持ctx.clearRect(0, 0)清除画布内容
3. 微信小程序中支持ctx.draw()清楚上次绘制的画布信息，所以也不需要传

开始运行

particle.start()

结束运行

particle.stop()

回调函数

particle.onstopped

改变参数

particle.changeConfig(config)

改变纹理

particle.changeTexture(texture, textureInfo)

增加力量体

particle.addBody(x: number, y: number, widened: number, scale: number, attract: boolean = false)

x: 力量体位置 y: 力量体位置 widened: 力量作用范围 scale: 力量作用系数 attract: 力量作用类型，默认为false（吸引力）

返回值：body，力量体

删除力量体

particle.addBody(body)

改变力量体属性

body.setBody(...config)

参数列表同addBody

particlesystem's Issues

本地图片路径问题，谢谢

onLoad() {
const query = uni.createSelectorQuery();
console.log(query);
query
.select("#mycanvas")
.fields({ node: true, size: true })
.exec(res => {
console.log(res);
const canvas = res[0].node;
const ctx = canvas.getContext("2d");
const particle = new ParticleSystem(
"./logo.png", //本地图片
{
width: 60,
height: 60
},
this.config,
ctx
);

    // 开始
    particle.start();
  });

},
你好，我们在小程序里用使用本地图片，报错，直接用路径不可以。
The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'

请问应该怎么改一下？谢谢了