摘要：而微信小程序中也剛好有進(jìn)度條這個(gè)組件。推薦和意見(jiàn)反饋推薦給朋友意見(jiàn)反饋這個(gè)兩個(gè)功能就是用了，微信小程序的組件，這里需要注意的就是，在清除的默認(rèn)樣式時(shí)，需要把的偽元素的邊框也去掉。總結(jié)這次做的這個(gè)九宮格心形拼圖的小程序，第一版已經(jīng)上線了。

前幾天在朋友圈看到好幾次這種圖片。

這種圖片，是用九張圖片拼成的一個(gè)心形。

感覺(jué)很有趣，就上網(wǎng)查了查怎么做，大部分的說(shuō)法就是用美圖秀秀的拼圖功能來(lái)做， 在微信小程序中也有專門做心形拼圖的小程序，我都試了試之后，感覺(jué)還可以更加簡(jiǎn)單一些，于是我就自己做了個(gè)小程序。

1、有兩個(gè) canvas，一個(gè)小的 canvas 顯示最后會(huì)是什么樣子，一個(gè)大的 canvas 用來(lái)最后進(jìn)行截圖，生成圖片，保存到相冊(cè)。
通過(guò)CSS的定位，把大的 canvas 移到屏幕外面不讓用戶看到就可以了。
而如果用小的canvas 保存圖片的話，最后的圖片有些模糊。

2、canvas 可以看成一個(gè) 9 * 9 的網(wǎng)格，

用一個(gè)叫 heart 的數(shù)組來(lái)表示就是這樣的。

用其中的小格子，來(lái)拼出心形，根據(jù)數(shù)組的內(nèi)容在 canvas 上進(jìn)行渲染。

這個(gè)小程序有 選擇單張圖片，選擇多張圖片，補(bǔ)充圖片，保存圖片，重置，推薦，意見(jiàn)反饋，這幾個(gè)功能。

當(dāng)用戶點(diǎn)擊心形區(qū)域的時(shí)候，就可以選擇單張圖片，調(diào)用 wx.chooseImage 就可以從本地相冊(cè)選擇圖片，然后就把這張圖，畫在 canvas上，具體畫的位置就是用戶點(diǎn)擊的位置。

在小的 canvas上綁定 touchend 事件，觸發(fā)事件后，事件中有一個(gè) changedTouches 屬性，這是一個(gè)保存了，當(dāng)前變化的觸摸點(diǎn)信息的數(shù)組，這個(gè)數(shù)組中的元素有 x 和 y 屬性，也就是觸摸點(diǎn)距離 canvas 左上角的距離。

// 觸摸點(diǎn)在 x 軸的值
var x = e.changedTouches[0].x;
// 觸摸點(diǎn)在 y 軸的值
var y = e.changedTouches[0].y;

有 x 軸 和 y 軸的距離后，算出具體應(yīng)該畫在哪個(gè)格子上。

//grid 表示一個(gè)格子的寬度

// 確定 x 軸是在第幾個(gè)格子
x = Math.floor(x / grid);

// 確定 y 軸是在第幾個(gè)格子
y = Math.floor(y / grid);

知道在哪個(gè)格子畫之后，就要確定畫圖片的哪部分了，因?yàn)樗械母褡佣际钦叫蔚?，但是用戶選擇的圖片不一定是正方形，如果壓縮成正方形會(huì)很難看，所以我畫的時(shí)候，選擇了正中間的部分來(lái)畫，

通過(guò) wx.getImageInfo 來(lái)獲取圖片信息，以短邊為正方形的寬，然后從（長(zhǎng)邊 - 短邊）/2 的地方來(lái)畫。

// 獲取圖片的寬和高
var width = res.width;
var height = res.height;

//  如果圖片不是正方形，只畫中間的部分
// sWidth 表示正方形的寬
var sWidth = width > height ? height : width;
// sx 是源圖像的矩形選擇框的左上角 X 坐標(biāo)
var sx = 0;
// sy 是源圖像的矩形選擇框的左上角 y 坐標(biāo)
var sy = 0;
if (width > height) {
    sx = (width - height) / 2;
}
if (width < height) {
    sy = (height - width) / 2;
}

知道畫什么，在哪里畫之后，調(diào)用 canvasContext.drawImage 來(lái)畫就可以了。

選擇多張圖片，同樣是調(diào)用 wx.chooseImage 方法，成功選擇多張圖片后，返回的對(duì)象中有一個(gè) tempFilePaths 屬性，這個(gè)屬性保存了，圖片的本地文件路徑列表。

然后遍歷 heart 數(shù)組，也就是保存心形數(shù)據(jù)的數(shù)組，如果數(shù)組中某個(gè)元素的值是1，也就是說(shuō)在心形范圍內(nèi)，就按順序從 tempFilePaths 中取一張圖片畫上去，畫的時(shí)候同樣的，如果不是正方形就只畫中間的部分。

在 image 的文件中，有保存幾張圖片，用來(lái)補(bǔ)充心形，他們的路徑保存在一個(gè)數(shù)組中。

 // 用來(lái)補(bǔ)充心形的圖片
 images: [
   "../../images/1.jpg",
   "../../images/2.jpg",
   "../../images/3.jpg",
   "../../images/4.jpg",
   "../../images/5.jpg",
   "../../images/6.jpg",
   "../../images/7.jpg",
   "../../images/8.jpg",
   "../../images/9.jpg",
   "../../images/10.jpg",
 ]

然后就是遍歷 heart 數(shù)組，如果數(shù)組的某個(gè)元素的值是1，就隨機(jī)從這組圖片中選擇一張畫上去。

畫一張圖片，畫多張圖片，補(bǔ)充圖片，他們都是在 canvas 上畫圖片，為了避免已經(jīng)畫了圖片的位置被覆蓋，他們所畫的圖片的等級(jí)是不同的。

補(bǔ)充圖片：1
畫多張圖片：2
畫一張圖片：3

等級(jí)高的可以覆蓋等級(jí)低的，等級(jí)低的不能覆蓋等級(jí)高的，同等級(jí)的，除了畫多張圖片的不能覆蓋，其余的兩種情況，都可以覆蓋。

簡(jiǎn)單意思就是：
補(bǔ)充圖片，補(bǔ)充完了之后，再補(bǔ)充會(huì)把原來(lái)補(bǔ)充的覆蓋掉，但是用戶選擇的圖片不會(huì)被覆蓋掉。
畫多張圖片，可以覆蓋掉補(bǔ)充的圖片，但用戶選擇的圖片也不會(huì)覆蓋掉。
畫一張圖片，不管這個(gè)位置有沒(méi)有圖片，都會(huì)再畫一張。

保存圖片的時(shí)候，就是按順序?qū)Υ蟮?canvas 進(jìn)行截取，然后保存成圖片，主要靠 wx.canvasToTempFilePath 這個(gè)API來(lái)實(shí)現(xiàn)，這個(gè) API ，可以把當(dāng)前畫布指定區(qū)域的內(nèi)容導(dǎo)出生成指定大小的圖片，并返回文件路徑。

這里要注意幾個(gè)細(xì)節(jié)

1、為了避免最后保存的圖片有黑色背景，最好開(kāi)始的時(shí)候就在 canvas 上畫一個(gè) 和 canvas 大小一樣的矩形，矩形填充上顏色。

2、為了保存的圖片，在用戶的相冊(cè)中也能保持心形。需要按下面這個(gè)順序來(lái)保存圖片

3、wx.canvasToTempFilePath 中有兩個(gè)選填的參數(shù) destWidth 和 destHeight，這個(gè)兩個(gè)參數(shù)決定 輸出圖片寬度和高度，如果不是準(zhǔn)確的知道是多少，用默認(rèn)值就可以。

destWidth 和 destHeight 單位是物理像素（pixel），canvas 繪制的時(shí)候用的是邏輯像素（物理像素=邏輯像素 * density），所以這里如果只是使用 canvas 中的 width 和 height（邏輯像素）作為輸出圖片的長(zhǎng)寬的話，生成的圖片 width 和 height 實(shí)際上是縮放了到 canvas 的 1 / density 大小了，所以就顯得比較模糊了。

而默認(rèn)值是 width * 屏幕像素密度

文檔中提到的屏幕像素密度，應(yīng)該不是指每英寸屏幕所擁有的像素?cái)?shù)，而是指設(shè)備像素比（pixelRatio），也就是用多少個(gè)物理像素去顯示 1px 的 CSS 像素。
用API wx.getSystemInfo 可以查看設(shè)備像素比

wx.getSystemInfo({
  success: function(res) {
    console.log(res.pixelRatio)
  }
})

這里如果我的理解有誤，還請(qǐng)知道的小伙伴指出。

說(shuō)了這么多，主要就是想說(shuō)用默認(rèn)的值其實(shí)就已經(jīng)很清晰了。

4、因?yàn)橐４?張圖片，所以需要一些時(shí)間，這個(gè)時(shí)候就需要一個(gè)進(jìn)度條了，保存圖片的時(shí)候，顯示進(jìn)度條，禁用保存按鈕，畢竟點(diǎn)擊一下按鈕就是9張圖片，所以這個(gè)時(shí)候還是禁用了好，每保存一張圖片進(jìn)度條的值就 +12 ，超過(guò)100的時(shí)候，就表示 9張圖片都保存好了。

而微信小程序中也剛好有進(jìn)度條（progress）這個(gè)組件。

這個(gè)功能就是遍歷 heart 數(shù)組，用一種顏色，根據(jù)數(shù)組內(nèi)容，把心形畫出來(lái)。然后再在 x 軸 和 y 軸上畫兩條線，行成九宮格的樣子。

 推薦給朋友
 意見(jiàn)反饋

這個(gè)兩個(gè)功能就是用了，微信小程序的 button 組件，這里需要注意的就是，在清除 button 的默認(rèn)樣式時(shí)，需要把 button 的 after 偽元素的邊框也去掉。

button::after{
  border: 0; 
}

有一些地方是小程序在替用戶做選擇，比如，如果所選擇的圖片不是正方形，就畫中間的部分，但是中間的部分不一定是用戶想要的，而如果每張圖片都要用戶自己來(lái)選擇畫哪部分，顯然是有些麻煩了，這里還可以繼續(xù)優(yōu)化下。

還有在補(bǔ)充圖片的時(shí)候，補(bǔ)充的圖片也不一定是用戶喜歡的，所以這部分再考慮是不是可以加一些標(biāo)簽，用戶選擇不同的標(biāo)簽，來(lái)補(bǔ)充符合標(biāo)簽的圖片，類似 QQ音樂(lè)的歌詞海報(bào)這樣。

這次做的這個(gè)九宮格心形拼圖的小程序，第一版已經(jīng)上線了。

開(kāi)源地址：https://github.com/FEWY/jigsaw
如果你喜歡這個(gè)小程序的話，可以 star 支持一下。

這個(gè)小程序不管在代碼，還是功能上都還有許多地方可以繼續(xù)優(yōu)化，如果有需要的朋友可以直接拿去改。