Winner? Loser? No matter

[關鍵字][Android / setPolyToPoly() / Canvas / Bending Image / Bended Image / Cylindrical shape / Curve Image / Bitmap]

在上一篇中，我說明了 setPoyToPoly 這個 method 如何改變一張圖的四個點位置，

那在這一篇裡頭，我們試著把圖變成這樣：

1:  Bitmap generateTwoCombined(Bitmap originBitmap){  
2:            
3:          Bitmap combineBm = Bitmap.createBitmap(920, 552, Config.ARGB_8888);  
4:          Canvas canvas = new Canvas(combineBm);  
5:            
6:          // {x1, y1, x2, y2, x3, y3, x4, y4}   
7:          float[] src = {0, 0, 320, 0, 320, 552, 0, 552};  
8:          float[] dst = {0, 0, 320, 100, 320, 452, 0, 552};  
9:          Matrix matrix = new Matrix();  
10:          canvas.save();  
11:          matrix.setPolyToPoly(src, 0, dst, 0, src.length >> 1);  
12:          canvas.clipRect(new Rect(0, 0, 320, 552)); // 裁切的範圍  
13:          canvas.concat(matrix);  
14:          canvas.drawBitmap(originBitmap, 0, 0, new Paint());  
15:          canvas.restore();  
16:            
17:          // {x1, y1, x2, y2, x3, y3, x4, y4}   
18:          float[] src2 = {320, 0, 920, 0, 920, 552, 320, 552};  
19:          float[] dst2 = {320, 100, 920, 0, 920, 552, 320, 452};  
20:          canvas.save();  
21:          matrix.setPolyToPoly(src2, 0, dst2, 0, src2.length >> 1);  
22:          canvas.clipRect(new Rect(320, 0, 920, 552)); // 裁切的範圍  
23:          canvas.concat(matrix);  
24:          canvas.drawBitmap(originBitmap, 0, 0, new Paint());  
25:          canvas.restore();  
26:            
27:          return combineBm;  
28:            
29:      }  

這裡做的事情，將這張圖切成兩次處理，第一次讓左半變形，

第二次讓右半變形，然後將兩張圖接合在同一張 Canvas 上，

就造成這樣的效果。 

使用上面的這個 Method，我們在 Activity 裏，可以產生出我們想要的 Bitmap，

1:  protected void onCreate(Bundle savedInstanceState) {  
2:          super.onCreate(savedInstanceState);  
3:          setContentView(R.layout.activity_main);  
4:            
5:          ImageView originImageView = (ImageView) findViewById(R.id.origin_img);  
6:          ImageView afterImageView = (ImageView) findViewById(R.id.after_img);  
7:            
8:          Bitmap originBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.lamb);  
9:          Bitmap scaledBitmap = Bitmap.createScaledBitmap(originBitmap, 920, 552, false);  
10:            
11:          originImageView.setImageBitmap(scaledBitmap); // 把原圖填入當作對照組  
12:            
13:          Bitmap afterBitmap = generateTwoCombined(scaledBitmap);  
14:            
15:          afterImageView.setImageBitmap(afterBitmap);  
16:                    
17:                    
18:      }  

 第13行，產生出來的 Bitmap，即可運用填入其他的 View 裡頭。

我們懂了進階的使用 PolyToPoly，那你可以猜想我接下來怎麼利用這個方式，

產生出彎曲的圖案嗎？請接著看下去～