復(fù)刻畫龍產(chǎn)品vue實(shí)現(xiàn)新春氣泡兔
??推薦幾個(gè)好用的工具
- var-conv 適用于VSCode IDE的代碼變量名稱快速轉(zhuǎn)換工具
- generator-vite-plugin 快速生成Vite插件模板項(xiàng)目
- generator-babel-plugin 快速生成Babel插件模板項(xiàng)目
進(jìn)入正題
復(fù)刻掘金一篇畫龍的文章,在兔年春節(jié)來(lái)臨之際獻(xiàn)上一幅新春氣泡兔,創(chuàng)意雖舊但技術(shù)永存,在線協(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 類型 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í)候要保持是一組RGBA
4位的長(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ù)刻畫龍產(chǎn)品vue實(shí)現(xiàn)新春氣泡兔的詳細(xì)內(nèi)容,更多關(guān)于vue新春氣泡兔的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue+element UI實(shí)現(xiàn)樹形表格
這篇文章主要為大家詳細(xì)介紹了vue+element UI實(shí)現(xiàn)樹形表格,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-12-12ElementUI修改實(shí)現(xiàn)更好用圖片上傳預(yù)覽組件
這篇文章主要為大家介紹了ElementUI修改實(shí)現(xiàn)更好用圖片上傳預(yù)覽組件示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09Vue?和?Django?實(shí)現(xiàn)?Token?身份驗(yàn)證的流程
這篇文章主要介紹了Vue?和?Django?實(shí)現(xiàn)?Token?身份驗(yàn)證?,Vue.js?和?Django?編寫的前后端項(xiàng)目中,實(shí)現(xiàn)了基于?Token?的身份驗(yàn)證機(jī)制,其他前后端框架的?Token?實(shí)現(xiàn)原理與本文一致,需要的朋友可以參考下2022-08-08elementUI使用el-upload上傳文件寫法及避坑總結(jié)(上傳圖片/視頻到本地/服務(wù)器及回顯+刪除)
upload上傳是前端開發(fā)很常用的一個(gè)功能,下面這篇文章主要給大家介紹了關(guān)于elementUI使用el-upload上傳文件寫法及避坑的相關(guān)資料,包括上傳圖片/視頻到本地/服務(wù)器及回顯+刪除,需要的朋友可以參考下2023-03-03vue.js 初體驗(yàn)之Chrome 插件開發(fā)實(shí)錄
這篇文章主要介紹了vue.js 初體驗(yàn)之Chrome 插件開發(fā)實(shí)錄 ,需要的朋友可以參考下2017-05-05vue踩坑記錄:屬性報(bào)undefined錯(cuò)誤問(wèn)題
這篇文章主要介紹了vue踩坑記錄:屬性報(bào)undefined錯(cuò)誤問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04