复刻画龙产品vue实现新春气泡兔

const initContainer = () => {
  const app = new PIXI.Application({ 
    width: 600, 
    height: 1000, 
    background: 'fff' 
  });
  container.value.appendChild(app.view);
  return app;
} 

const setSprite = (app: any, x: any, y: any, size: any, scale: any) => {
  let sprite = PIXI.Sprite.from('circle.png');
  sprite.width = size;
  sprite.height = size;
  sprite.x = x * scale - size;
  sprite.y = y * scale - size;
  app.stage.addChild(sprite);
}

const transform = (app: any) => {
  const canvas = document.createElement("canvas") as HTMLCanvasElement;
  const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
  const image = new Image();
  image.src = "rabbit.jpeg";
  image.onload = () => {
    canvas.width = image.width;
    canvas.height = image.height;
    ctx.drawImage(image, 0, 0);
    // Uint8ClampedArray 类型
    const imageData = ctx.getImageData(0, 0, image.width, image.height).data;
    consoel.log(imageData) // 长度 = 高度 × 宽度 × 4 bytes
  }
}

const imageData = ctx.getImageData(0, 0, image.width, image.height).data;
const step = 20; // 控制每个点的密度
for (let y = 0; y < image.height; y += step) {
  for (let x = 0; x < image.width; x += step) {
    const position = (image.width * y + x) * 4;
    // 4个字节表示一组RGBA数据
    const r = imageData[position];
    const g = imageData[position + 1];
    const b = imageData[position + 2];
    const a = imageData[position + 3];
    if (r + g + b === 0 && a !== 0) { // 纯黑
      // TODO 绘制气泡
    }
  }
}

const scale = 0.8; // 控制绘制的整体缩放比
if (r + g + b === 0 && a !== 0) { // 纯黑
  const size = (Math.random() * 10 + 20) / 3;
  let sx = x * scale - size;
  let sy = y * scale - size;
  setSprite(app, sx, sy, size, scale);
}