java 任意形状_0行代码实现任意形状图片展示--android-anyshape

前言

在Android开发中， 我们经常会遇到一些场景， 需要以一些特殊的形状显示图片， 比如圆角矩形、圆形等等。关于如何绘制这类形状， 网上已经有很多的方案，比如自定义控件重写onDraw方法， 通过canvas的各种draw方法进行绘制等。那么， 更复杂的图形呢？比如，五角星？比如组合图形？又或者是各种奇奇怪怪的不规则图形呢？有同学会说， 如果已知不规则图形的具体形状， 那我们就可以通过连接顶点的方式， 找出path， 然后通过drawPath方法绘制出来啊。嗯。。。很有道理， 但是先不说有些图像，可能顶点巨多， 或者弯弯曲曲很难找出具体的顶点， 难道我们要为每一个特殊的形状， 单独写一个独立的控件， 或者一套独立的代码吗？

可以肯定是可以，但是我觉得， 最好还是不要这么做。。于是我有了一个想法， 用一张图片， 告诉控件，我想要什么样的形状， 然后控件自动按照这个形状， 帮我把图片显示出来。于是有了这个项目－－android-anyshape。

展示

   

 

左边是使用了普通ImageView的展示效果， 右边是使用了项目中AnyshapeImageView的效果。想使用AnyshapeImageView达到右边的样式， 仅需提供三张遮罩图片，通过”anyshapeMask”参数提供给控件即可(下文会说明)。

三张“遮罩”图片如下：

   

   

 

与普通的遮罩图片不同， 这里要求图片的背景完全透明， 即alpha通道的值为0， 而需要显示的图形，对具体的颜色没有任何要求，不透明即可。

使用

控件的使用很简单， 由于继承ImageView， 所以使用方法类似于ImageView，但多了一个重要的自定义参数：anyshapeMask

android:layout_width="150dp"

android:layout_height="150dp"

android:layout_marginTop="20dp"

android:src="@drawable/kumamon"

app:anyshapeMask="@drawable/singlestar"/>

在布局文件中加入这段xml， 展示的就是上面图中那头五角星形状的熊本熊～

实现这个功能的思路其实很简单，通过对一张“遮罩”图片各像素透明度的扫描，获得一个Path对象， 该Path对象包含了所有不透明像素的集合。然后就很简单了， 通过Canvas对象的drawPath方法，将我们要显示的图片刷上去即可。

实现

从Bitmap中提取Path

这是这个项目中最重要的部分。代码如下：

PathInfoManager.getPathFromBitmap:

public Path getPathFromBitmap(Bitmap mask) {

Path path = new Path();

int bWidth = mask.getWidth();

int bHeight = mask.getHeight();

int[] origin = new int[bWidth];

int lastA;

for (int i = 0; i < bHeight; i++) {

mask.getPixels(origin, 0, bWidth, 0, i, bWidth, 1);

lastA = 0;

for (int j = 0; j < bWidth; j++) {

int a = Color.alpha(origin[j]);

if (a != 0 && lastA == 0) {

path.moveTo(j, i);

} else if (a == 0 && lastA !=0 ) {

path.lineTo(j - 1, i);

} else if (a != 0 && j == bWidth - 1) {

path.lineTo(j, i);

}

lastA = a;

}

}

return path;

}

我设计的方案很简单，逐行扫描Bitmap中的像素，实现方法是用getPixels方法获得每行的像素数组，然后遍历分析。步骤如下：

1. 遇到一个不透明像素，进行判断， 如果它的上一个像素不透明， 或者它本身就是行首， 那我们就把它看作一段不透明区域的开头，通过moveTo方法将Path移动到此点；

2. 遇到一个透明像素，进行判断，如果它的上一个像素透明，那我们就把它的上一个像素看作一段不透明区域的结尾， 通过lineTo的方式， 将它与之前的开头像素连接。

3. 重复1、2步， 直到扫描完全行。需要注意的是， 如果行尾是不透明像素， 那就直接连上。防止最后一段不透明区域只有起点没有终点。

这样， 每一行的连接结果，就组成了整张图片的扫描结果～

通过Path，显示图像

先看一下AnyshapeImageView的初始化方法：

public AnyshapeImageView(Context context, AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

this.context = context;

TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.AnyShapeImageView, defStyleAttr, 0);

int n = a.getIndexCount();

for (int i = 0; i < n; i++)

{

final int attr = a.getIndex(i);

if (attr == R.styleable.AnyShapeImageView_anyshapeMask) {

maskResId = a.getResourceId(attr, 0);

if (0 == maskResId) {

//did not set mask

continue;

}

} else if (attr == R.styleable.AnyShapeImageView_anyshapeBackColor) {

backColor = a.getColor(attr, Color.TRANSPARENT);

}

}

a.recycle();

}

其实就是调用通过anyshapeMask参数， 获得“遮罩”图片的资源ID以及背景色。 真正通过资源ID解析获取遮罩的过程放在了onMeaaure中。

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

int mWidth = getMeasuredWidth();

int mHeight = getMeasuredHeight();

if (mWidth != 0 && mHeight != 0) {

if (maskResId <= 0) {

return;

}

PathInfo pi = PathManager.getInstance().getPathInfo(maskResId);

if (null != pi) {

originMaskPath = pi.path;

originMaskWidth = pi.width;

originMaskHeight = pi.height;

} else {

BitmapFactory.Options options = new BitmapFactory.Options();

options.inJustDecodeBounds = true;

BitmapFactory.decodeResource(context.getResources(), maskResId, options);

int widthRatio = (int)(options.outWidth * 1f / mWidth);

int heightRatio = (int)(options.outHeight * 1f / mHeight);

if (widthRatio > heightRatio) {

options.inSampleSize = widthRatio;

} else {

options.inSampleSize = heightRatio;

}

if (options.inSampleSize == 0) {

options.inSampleSize = 1;

}

options.inJustDecodeBounds = false;

Bitmap maskBitmap = BitmapFactory.decodeResource(context.getResources(), maskResId, options);

originMaskPath = PathManager.getInstance().getPathFromBitmap(maskBitmap);

originMaskWidth = maskBitmap.getWidth();

originMaskHeight = maskBitmap.getHeight();

pi = new PathInfo();

pi.height = originMaskHeight;

pi.width = originMaskWidth;

pi.path = originMaskPath;

PathManager.getInstance().addPathInfo(maskResId, pi);

maskBitmap.recycle();

}

}

}

PathInfo：

public class PathInfo {

public Path path;

public int width;

public int height;

}

然而我们看到，用户进行生成Bitmap－获取Path这一系列耗时、耗内存操作之前，先会判断缓存里是否已经有与该资源ID匹配的PathInfo， 如果有， 则不用进行这部分操作。如果没有，根据传入的资源ID，生成PathInfo对象，并存入缓存。同时，根据控件的宽高，对decode做了限制，预防了OOM 和 加载资源过大的问题。

关于这块缓存，下面会说明。

再看onSizeChanged方法：

protected void onSizeChanged(int w, int h, int oldw, int oldh) {

super.onSizeChanged(w, h, oldw, oldh);

vHeight = getHeight();

vWidth = getWidth();

if (originMaskPath != null) {

//scale the size of the path to fit the one of this View

Matrix matrix = new Matrix();

matrix.setScale(vWidth * 1f / originMaskWidth, vHeight * 1f / originMaskHeight);

originMaskPath.transform(matrix, realMaskPath);

}

}

这里的代码， 主要目的是对Path对象进行缩放， 已匹配控件的实际大小。可以看到， 如果不希望展示的形状被拉伸或者变形， 那么AnyshapeImageView的宽高比， 最好和“遮罩”图片的宽高比保持一致。

接下来就是在onDraw里绘制形状并刷上图片了：

@Override

protected void onDraw(Canvas canvas) {

if (null == originMaskPath) {

// if the mask is null, the view will work as a normal ImageView

super.onDraw(canvas);

return;

}

if (vWidth == 0 || vHeight == 0) {

return;

}

paint.reset();

paint.setStyle(Paint.Style.STROKE);

//get the drawable to show. if not set the src, will use backColor

Drawable showDrawable = getDrawable();

if (null != showDrawable) {

Bitmap showBitmap = ((BitmapDrawable) showDrawable).getBitmap();

Shader shader = new BitmapShader(showBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

Matrix shaderMatrix = new Matrix();

float scaleX = vWidth * 1.0f / showBitmap.getWidth();

float scaleY = vHeight * 1.0f / showBitmap.getHeight();

shaderMatrix.setScale(scaleX, scaleY);

shader.setLocalMatrix(shaderMatrix);

paint.setShader(shader);

} else {

//no src , use the backColor to fill the path

paint.setColor(backColor);

}

canvas.drawPath(realMaskPath, paint);

}

缓存

看了上面的博文， 各位一定清楚了，作为参数传入的资源ID，实际上只是为了获取一个Path对象。那么我们可以建立一个Integer－Path的映射关系， 用来缓存已经读取出来的Path。后面需要Path， 只需要通过资源ID去缓存里寻找即可，毕竟读取Path是一个费时间又费资源的操作。

这样看来，我们已经对AnyshapeImageView的使用进行了优化， 毕竟同一个形状的展示，我们只要执行一次从图片中解析Path对象的操作即可。

总结

这个项目，是我花了将近一周时间断断续续完成的。代码不多， 也不复杂，希望能够帮到大家， 或者为大家提供一些思路。

再贴一下项目的地址， 包括demo在内：

https://github.com/lankton/android-anyshape

如果你觉得这个项目，或者这篇博文对你起到了一些帮助，欢迎star支持一下～

更新

2016-05-12

优化了AnyshapeImageView解析遮罩的过程，PathManager中的createPaths(预先解析Path)变得繁琐且不必要，故删除。 简化后的使用可见项目README。

本次更新后对博文上面代码、讲解内容也有改动。

发布到JCenter-20160519

为方便使用，已将library发布到JCenter，开发者可以使用gradle或者maven进行依赖的配置。

gradle

compile 'cn.lankton:anyshape:1.0.0'

maven

cn.lankton

anyshape

1.0.0

pom