类似微信聊天发送的图片缩略图中的三角图片的实现

下图是最终要达到的效果：

image.png

大概的思路：我们需要一张做好的.9图片：

image.png

第一步先实先没有边框的效果：

Bitmap bitmap_in = BitmapFactory.decodeResource(getResources(), R.drawable.pic );//原图

      Bitmap bitmap_bg = BitmapFactory.decodeResource(getResources(), R.drawable.chat_adapter_to_bg );//.9图片

public Bitmap getRoundCornerImage(Bitmap bitmap_bg , Bitmap bitmap_in) {

       // 创建一个空的bitmap对象

      Bitmap roundConcerImage = Bitmap.createBitmap(300, 300, Config. ARGB_8888);

       // 把空的bitmap对象装入Canvas中

      Canvas canvas = new Canvas(roundConcerImage );

       // 创建一个画笔

      Paint paint = new Paint();

       // 绘制矩形区域（左上角的坐标是0.0右下角的坐标是500.500）

      Rect rect = new Rect(0, 0, 300, 300);

       // 左上角的坐标是（0,0），右下角的坐标是（图片的宽，图片的高）

      Rect rectF = new Rect(0, 0, bitmap_in.getWidth(), bitmap_in .getHeight());

       // canvas绘制位图的时候会出现锯齿，设置该参数是抗锯齿的作用

       // paint.setAntiAlias(true);

       // 创建.9可拉伸背景图

      NinePatch patch = new NinePatch(bitmap_bg , bitmap_bg.getNinePatchChunk(), null);

       // 把指定区域的位置，画上.9背景图

       patch.draw( canvas, rect);

       // 设置两张图片相交时的模式,Mode.SRC_IN模式就是当rectF与 rect相交的时候只显示他们相交的部分，且 rectf覆盖rect

       paint.setXfermode( new PorterDuffXfermode(Mode.SRC_IN ));//实现效果最重要的一行代码

       canvas.drawBitmap( bitmap_in, rectF , rect , paint);

       return roundConcerImage ;

 }

这时图片效果如下：

image.png

接下来就是把绿色的边框加上：

public Bitmap getShardImage(Bitmap bitmap_bg , Bitmap bitmap_in) {

       //创建一个空的bitmap对象

      Bitmap roundConcerImage = Bitmap.createBitmap(300, 300, Config. ARGB_8888);

       //把空的bitmap对象装入canvas中

      Canvas canvas = new Canvas(roundConcerImage );

       //创建一个画笔

      Paint paint = new Paint();

       //创建一个大小为300*300的矩形

      Rect rect = new Rect(0, 0, 300, 300);

       //消除锯齿

       paint.setAntiAlias( true);

       //往画布上画上.9背景图

      NinePatch patch = new NinePatch(bitmap_bg , bitmap_bg.getNinePatchChunk(), null);

       patch.draw( canvas, rect);

       //再创建一个宽高都比上一个 rect小2的rect

      Rect rect2 = new Rect(2, 2, 298, 298);

       //这个就不要设置相交的模式了，因为 rect比rect2小，绿色部分正好会露出来

       canvas.drawBitmap( bitmap_in, rect , rect2 , paint);

       return roundConcerImage ;

 }

最后效果就如第一张图片。它实现的原理实际上是切除图片三角部分那一列的图片，只保留了一个三角图片。