
上QQ阅读APP看书,第一时间看更新
1.3.2 剪裁图形内部区域
有时候为了美观,并不会显示整个图像,而是显示剪裁后的图像,比如QQ的圆形头像、微信的圆角矩形头像都剪成了圆润的模样。
图形剪裁正是位图图形的拿手好戏,只要调用画笔工具的setShader方法,设置位图着色器之后再调用画布工具的draw***方法即可剪裁出指定几何形状的图像。比如下面的定义椭圆图形的代码,寥寥几行便实现了椭圆剪裁功能:
(完整代码见picture\src\main\java\com\example\picture\widget\OvalDrawable.java)

又如下面定义圆角矩形的代码,简洁程度不遑多让:
(完整代码见picture\src\main\java\com\example\picture\widget\RoundDrawable.java)

再如下面的定义圆形的代码,其精炼程度毫不逊色:
(完整代码见picture\src\main\java\com\example\picture\widget\CircleDrawable.java)

接下来只要在活动页面的代码中设置上述图形,就能显示几何剪裁之后的图像。运行并测试该App,图形剪裁效果如图1-22~图1-25所示。图1-22为尚未剪裁的画面,图1-23为圆形剪裁后的画面,图1-24为椭圆剪裁后的画面,图1-25为圆角矩形剪裁后的画面。

图1-22 尚未剪裁的画面

图1-23 圆形剪裁后的画面

图1-24 椭圆剪裁后的画面

图1-25 圆角矩形剪裁后的画面