Android画圆角矩形图片,并在图片上写字

参考博文:

2011.10.10——— android 画图之setXfermode

刚做一个应用,UI设计的效果是需要在Android中用已有的图片画出一个矩形图形,并且要在图形上写不同的字样。

参考了上面的博文,制定的实现思路如下:

1、创建一个drawable对象,一个输出的Bitmap并以此创建一个画布

        //根据源文件新建一个darwable对象  
        Drawable imageDrawable = getResources().getDrawable(id);
        // 新建一个新的输出图片  
        Bitmap output = Bitmap.createBitmap(169, 169, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(output); 

2、创建圆角矩形

        // 新建一个矩形  
        RectF outerRect = new RectF(0, 0, 169, 169); 
        // 产生一个红色的圆角矩形  或者任何有色颜色,不能是透明!
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setColor(Color.RED);
        canvas.drawRoundRect(outerRect, 10, 10, paint);
3、在矩形上画图形

        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        imageDrawable.setBounds(0, 0, 169, 169);
        imageDrawable.draw(canvas);

4、写字

        paint.setTextSize(24);
        paint.setColor(Color.WHITE);
        paint.setTextAlign(Paint.Align.CENTER);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP));
        canvas.drawText(s , 85 , 159 , paint);

这样,就完成了想要的效果。

Android画圆角矩形图片,并在图片上写字_第1张图片

这是调用了9次,每一次用不同的背景图。


总结,在上面的实现过程中,使用了两次        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP));

不过(PorterDuff.Mode.SRC_ATOP)并不相同。而实现的关键正在此处!

先看不同的Mode值是代表了什么样的效果。但在此之前,需明确两个变量:dst,src(dst是画布原有的图形,src是新画上去的图形)。

Android画圆角矩形图片,并在图片上写字_第2张图片

因此这就是我的实现逻辑:

先画圆角矩形,这时圆角矩形是dst,然后画图形,图形是src,使用Mode是srcIn,这样就形成了圆角矩形;

接下来,圆角矩形图形是dst,然后画文字,文字是src,使用Mode是srcATop,这样就形成了在圆角图形上写字的效果。



你可能感兴趣的:(Android)