文章目录
  1. 1. 参考内容:

不久之前,我被问到如何创建一个像WhatsApp中气泡消息一样的,图像边缘是不规则图形的图片。更多的关于不规则图形方面的知识将在接下来的一系列的《Android切图之不规则形状》中学习到。

在继续下一步之前,我必须承认我忘记是谁问的我关于切图的问题了。如果这个人是正在看此文的你,请联系我,我非常感谢你在一定程度上激励了我写这一系列的文章。

我们用一个很简单的不规则图形开始:我一个圆角矩形。值得注意的是,圆角矩形可以通过Android SDK的API20中的RoundRectShapeDrawable来实现,但是这个不能够实现我们将来需要实现的更为复杂的效果(这些之后的文章中会出现),所以我们将继续使用常规的方法。

我们将要用到的第一个技术就是我们之前可能用过的透明浮层。

浮层的方法是非常简单的。我们把两张图重叠起来:第一张是想要显示圆角的矩形图和第二张是是圆角矩形图。有了这两张图形我们只需要利用Porter Duff的透明规则让浮层透明就可以实现我们想要的效果。

下面是我们需要准备的两张图片:

betty mask

第一张是我们切图系列文章的模特Betty。第二章是圆角矩形的浮层图像。这张绿色的浮层图像只是想让我们能够看到圆角矩形的形状(实际上是没有用的)。

代码是很简单的:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
public Bitmap combineImages(Bitmap bgd, Bitmap fg) {
Bitmap bmp;
int width = bgd.getWidth() > fg.getWidth() ?
bgd.getWidth() : fg.getWidth();
int height = bgd.getHeight() > fg.getHeight() ?
bgd.getHeight() : fg.getHeight();

bmp = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Paint paint = new Paint();
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP));

Canvas canvas = new Canvas(bmp);
canvas.drawBitmap(bgd, 0, 0, null);
canvas.drawBitmap(fg, 0, 0, paint);

return bmp;
}

我们创建的新的Bitmap是源图和浮层图的最大值。我们需要先画浮层图像然后用设置了PorterDuffXFerMode.SRC_STOP的Paint对象来画Betty。最后结果如下图:

part1

OK,我们实现了预设的目标。但是现在的方法存在很多的问题。

首先,我们需要两张相同大小的图片来合成新图。我们可能需要写一些代码来缩小放大图片,但是放大图片的时候会是图片产生模糊。我们也可能会遇到两张图片大小不同导致圆角矩形产生扭曲。

另外一个大问题是这种方法效率不高。为了实现我们想要的效果,我们需要加载两张图片到内存,然后合并他们到第三张图片。如果图片非常大,当我们采用这种方式就很容易产生OutOfMemoryError。

不过,值得庆幸的是,在接下来的文章中我会引入更高效的方法来实现我们想要的效果。

切图之不规则图形系列源码下载,英文原版地址

参考内容:


本文地址 http://94275.cn/2014/07/22/irregular-shapes-part-1/ 作者为 Zhenguo

author:Zhenguo
Author: Zhenguo      Blog: 94275.cn/     Email: jinzhenguo1990@gmail.com
I have almost 10 years of application development experience and have a keen interested in the latest emerging technologies. I use my spare time to turn my experience, ideas and love for IT tech into informative articles, tutorials and more in hope to help others and learn more.
文章目录
  1. 1. 参考内容:
返回顶部