在案例中經(jīng)常需要實現(xiàn)這樣一種功能塘匣，我們先獲取到用戶的微信頭像，然后給用戶的頭像添加一些裝飾的圖案并制作出一張新的圖片，最后還可以讓用戶下載下來作為自己的微信頭像栋猖。今天就結(jié)合“給我一面小紅旗”這個demo講一講這種案例該如何實現(xiàn)。
1.首先搭建一個比較簡單的界面汪榔，主體是一個畫布蒲拉，在畫布里添加兩個圖片組件，一張用來顯示當前用戶的頭像痴腌，另一張小圖就是展示小紅旗雌团。
還需要添加一個橫幅，橫幅里面放置一個圖片組件用來展示最終合成的圖片士聪。這里圖片1的素材資源地址與文本變量“打印的圖片”進行數(shù)據(jù)綁定锦援，到時我們直接將合成圖片的URL地址賦給這個文本變量即可。要注意的是將圖片1的長按保存屬性打開剥悟，這樣在手機中長按才能出現(xiàn)保存圖片的界面灵寺。
2.然后我們給后臺添加一個用戶組件，它的作用是發(fā)起微信公眾號登錄区岗，在登錄的回調(diào)中可以獲取當前用戶的信息略板，包括頭像昵稱等。要注意的是在案例的配置中開啟微信公眾號的授權慈缔，初始獲取頭像昵稱選擇“是”叮称，還有填好配置名稱（隨意填一個即可）。
3.接下來就是制作紅旗頭像的事件藐鹤，在點擊事件下我們先讓用戶組件發(fā)起微信公眾號登錄颅拦，將登錄結(jié)果中頭像的值賦給文本變量“頭像”（登錄結(jié)果中頭像的值其實是該頭像圖片在服務器上的URL地址，這個地址本身是一個字符串）教藻。再將畫布中的頭像圖片的素材資源地址設置為文本組件的值（因為畫布的特殊屬性距帅，其內(nèi)部的組件不能進行數(shù)據(jù)綁定）。
最后就是打印畫布了括堤，這時畫布會把它的全部內(nèi)容打印出來生成一張圖片碌秸，在回調(diào)里我們獲取的參數(shù)“打印的圖片”就是打印出來圖片的URL地址，我們把它賦值給文本變量“打印的圖片”悄窃，再讓橫幅顯示讥电，現(xiàn)在用戶就可以看到合成結(jié)果并長按橫幅中的圖片保存到手機里了。
總結(jié)
畫布的打印功能除了可以用于制作頭像轧抗，還經(jīng)常用于制作海報恩敌，可以讓用戶自行設計內(nèi)容、添加修改信息等横媚，最后把畫布打印出來生成用戶自己的專屬海報纠炮。不過有一點要注意月趟，畫布只是打印畫布內(nèi)的組件，比如下圖這種情況恢口，雖然視覺效果上按鈕在畫布里孝宗，但是對象樹中按鈕并不在畫布內(nèi)，打印畫布的結(jié)果是沒有這個按鈕的耕肩。另外就是畫布打印出來的圖片寬高是和畫布一樣的因妇，如果我們要把它賦值給一個圖片組件，那么至少圖片組件的寬高比例要和畫布的比例一致猿诸，否則會出現(xiàn)變形的情況婚被。
