自定義檢視---圓角柱狀圖（一）

一、寫在前文

之前寫過一篇部落格 -- 巧妙使用WilliamChart繪製出只有兩個圓角的柱狀圖，當時是專案需要，所以用了第三方的庫去實現只有頂部帶兩個圓角的柱狀圖。雖然最終是實現了效果，但是第三方的圖表自定義不夠，例如控制柱狀圖的間距，高度等等。所以，最終決定自己去繪製圓角柱狀圖。

二、分析需求

首先是繪製圓角矩形，系統為我們提供的API為 drawRoundRect 引數如下：

對與rect,paint就不用解釋了， 那麼rx,ry具體是什麼呢，請接著往下看：

其實rx,ry就是確定橢圓的兩個焦半徑，使用drawRoundRect時，會根據給定的rx，ry在矩形裡面繪製4個四分之一橢圓，每個橢圓的位置以及大小由矩形的每個頂點加上rx，ry確定，由此可見效果如下：

由此可以推導，如果rx,ry其中一個等於0，那麼繪製的最終形狀還是原先的矩形， 如果矩形是正方形並且rx,ry 都等於正方形邊長的二分之一，那麼最終的形狀為一個圓。可是到這裡還是不夠，需求是隻有頂部帶兩個圓角的柱狀圖，現在可是帶了四個圓角。

接下來還需要使用另外一個API，canvas的 clipRect方法，它可以設定畫布需要顯示的區域，換而言之，我們只要將顯示區域設定小一點，使底部的圓角不在區域內即可。

三、程式碼實現

設定一個長寬都為100的正方形，將畫布的顯示矩陣底部的區域減少圓角的大小即可。

   Paint paint = new Paint();
   paint.setColor(Color.parseColor("#47b484"));
   RectF rect = new RectF(100, 100, 200, 200);
   int radius = 10;
   canvas.clipRect(100, 100, 200, 200 - radius );  // 必須先設定顯示區域再繪製
   canvas.drawRoundRect(rect, radius , radius , paint);
複製程式碼

效果如下：

四、總結

一開始在思考這個問題的時候，一直糾結於繪製圓角的數量，可是系統並沒有提供此類的API，直到後來，換個角度一想，通過裁剪矩形同樣可以實現自己的需求。這只是開始的第一步，這個系列接下來我會繼續完善，請大家敬請期待。