復(fù)刻畫(huà)龍產(chǎn)品vue實(shí)現(xiàn)新春氣泡兔

更新時(shí)間：2023年01月16日 08:34:40 作者：小鑫同學(xué)

這篇文章主要為大家介紹了復(fù)刻畫(huà)龍產(chǎn)品之使用vue實(shí)現(xiàn)新春氣泡兔示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

??推薦幾個(gè)好用的工具

var-conv 適用于VSCode IDE的代碼變量名稱(chēng)快速轉(zhuǎn)換工具
generator-vite-plugin 快速生成Vite插件模板項(xiàng)目
generator-babel-plugin 快速生成Babel插件模板項(xiàng)目

進(jìn)入正題

復(fù)刻掘金一篇畫(huà)龍的文章，在兔年春節(jié)來(lái)臨之際獻(xiàn)上一幅新春氣泡兔，創(chuàng)意雖舊但技術(shù)永存，在線(xiàn)協(xié)作編寫(xiě)代碼更輕松。

剪影圖：

1. 初始化容器

通過(guò) PIXI 中的 Application 對(duì)象初始化一個(gè)寬600、高1000、白色背景的容器，并通過(guò)appendChild添加到當(dāng)前組件的模板中：

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

2. 實(shí)現(xiàn)添加Sprite函數(shù)：

Sprite是PIXI中一個(gè)重要的概念，最后的氣泡兔就是由一個(gè)個(gè)的Sprite拼出來(lái)的，最后再把每一個(gè)Sprite添加到stage中：

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);
}

3. 核心三步繪制氣泡兔

3.1 加載剪影圖片，獲取像素?cái)?shù)據(jù)

剪影圖片是一張由黑色主體和透明背景或純色背景構(gòu)成的一張圖片，我們要加載這張剪影圖片并獲取到每個(gè)像素的數(shù)據(jù)。

下面是通過(guò)canvas來(lái)加載圖片的過(guò)程，并通過(guò)getImageData()函數(shù)獲取到了一個(gè)包含以 RGBA 為順序的一維數(shù)組數(shù)據(jù)：

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 類(lèi)型
    const imageData = ctx.getImageData(0, 0, image.width, image.height).data;
    consoel.log(imageData) // 長(zhǎng)度 = 高度 × 寬度 × 4 bytes
  }
}

3.2 搞清楚每個(gè)像素的顏色

需要通過(guò)雙層循環(huán)來(lái)逐行對(duì)剪影圖片中的每一個(gè)像素進(jìn)行檢查，在遍歷時(shí)可以指定一個(gè)固定的step來(lái)控制遍歷點(diǎn)的密度，在獲取每一個(gè)position的時(shí)候要保持是一組RGBA4位的長(zhǎng)度的倍數(shù)，這樣在拿到每個(gè)點(diǎn)以后，通過(guò)下標(biāo)來(lái)分別獲取到R\G\B\A四個(gè)值：

const imageData = ctx.getImageData(0, 0, image.width, image.height).data;
const step = 20; // 控制每個(gè)點(diǎn)的密度
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個(gè)字節(jié)表示一組RGBA數(shù)據(jù)
    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 繪制氣泡
    }
  }
}

3.3 著手繪制氣泡兔

在獲取到每一組的RGBA數(shù)據(jù)后，如果R、G、B均為 0 且透明度非 0，那么代表這個(gè)位置需要繪制氣泡了，繪制的氣泡大小隨機(jī)產(chǎn)生：

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);
}

氣泡兔：

總結(jié)

本小節(jié)就到此結(jié)束了，文中提到的加載圖片、獲取像素點(diǎn)、遍歷每個(gè)像素獲取RGBA數(shù)據(jù)都搞清楚了嗎？破解登錄時(shí)遇到的滑動(dòng)驗(yàn)證碼是不是也可以用到這里面的知識(shí)點(diǎn)呢？大家可以發(fā)散一下思維。再次祝各位同學(xué)，兔年大吉、新春快樂(lè)~

以上就是復(fù)刻畫(huà)龍產(chǎn)品vue實(shí)現(xiàn)新春氣泡兔的詳細(xì)內(nèi)容，更多關(guān)于vue新春氣泡兔的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: