六芒星写轮眼
今天突然看到自己的发泥盒(一个六边形的盒子)，所以突发奇想想封装一个这样的ImageView控件，之后用，有什么用，不告诉你。发泥盒我就不发照片了，以免认为我在做广告。
PS：我只写干货，如果你发现文中有不是干货的地方，你就当没看见。
题目可能有些不清楚，其实是要实现一个正六边形的ImageView。感觉这个也没什么好写的。圆形呀，圆角矩形呀，类似的这些基本都写烂了，你就随便看看好了。
实现这个东西，本人想到两种方法：
- Xformode
- Shader
Xformode可以说是处理这种万能的方法。用过的应该都懂。但是它的性能不高，因为每次都它要画两次，一个蒙板一个原图，然后两个图叠加做相应的计算。所以如果不是其他方法都不行，我是绝对不会用它的。
那么Shader貌似是一个好的方案，但是Shader就是需要自己想办法画出一个正六边形了。这个时候我内心OS了一下。靠，我要是画不出个正六边形，我就不做Android了!
正六边形画法
正六边形
在Android中的画法和现实中的画法基本差不多。这个其实看成一个简单的多边形，使用Android中的Path就好了。只是需要确定几个关键点的坐标。这里我们假设宽度撑满。高度居中。那么我们的代码基本就是这个样子：
正六边形的边长l就是宽的一半，正六边形的高是 Math.sqrt(3)*l ，然后可以算出正六边形顶部的top值，之后只要依次遍历连接每个点，即可画出正六边形。
代码如下：
float l = (float) (getWidth() / 2);
float h = (float) (Math.sqrt(3)*l);
float top = (getHeight() - h) / 2 ;
mPath.reset();
mPath.moveTo(l/2,top);
mPath.lineTo(0,h/2+top);
mPath.lineTo(l/2,h+top);
mPath.lineTo((float) (l*1.5),h+top);
mPath.lineTo(2*l,h/2+top);
mPath.lineTo((float) (l*1.5),top);
mPath.lineTo(l/2,top);
mPath.close();
设置Shader
对于Shader还不了解的人，可以去搜一搜其他博客，讲这个的已经很多了，我就不再讲一遍了。这里我们使用的是BitmapShader，这个类名副其实，它可以把一个Bitmap做为我们的渲染对象，在设置Bitmap的时候把Bitmap初始化BitmapShader，然后设置给Paint。直接上代码了。
// 先把要设置的bitmap设置给一个BitmapShader
shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP) ;
// 然后给Paint设置shader
mPaint.setShader(shader) ;
使用Shader绘制正六边形
我们重写onDraw方法：
@Override
public void onDraw(Canvas canvas) {
canvas.drawPath(mPath,mPaint);
}
看下效果：
效果图
封装到Drawable中
写完之后，发现功能简单相对独立，没有使用自定义View的必要，因此将其封装成Drawable，使用起来也将更加方便。代码如下：
public class HiveDrawable extends Drawable {
// 用于记录边界信息的Rect
Rect mRect = new Rect();
Paint mPaint;
Path mPath ;
BitmapShader mShader;
Bitmap mBitmap ;
public HiveDrawable() {
this(null) ;
}
public HiveDrawable(Bitmap bitmap) {
init();
setBitmap(bitmap);
}
private void init() {
initPaint() ;
initPath() ;
}
private void ensurePaint(){
if (mPaint == null) {
mPaint = new Paint() ;
}
}
private void ensurePath(){
if (mPath == null) {
mPath = new Path() ;
}
}
private void initPaint() {
ensurePaint();
mPaint.setAntiAlias(true);
mPaint.setStyle(Paint.Style.FILL);
mPaint.setStrokeWidth(3f);
}
public Bitmap getBitmap() {
return mBitmap;
}
// 设置Bitmap的时候初始化shader，并设置给paint
public void setBitmap(Bitmap bitmap) {
this.mBitmap = bitmap;
if (bitmap == null) {
mShader =null ;
} else {
mShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP) ;
mPaint.setShader(mShader) ;
}
}
// 初始化好Path要走的路径
private void initPath() {
ensurePath();
float l = (float) (mRect.width() / 2);
float h = (float) (Math.sqrt(3)*l);
float top = (mRect.height() - h) / 2 ;
mPath.reset();
mPath.moveTo(l/2,top);
mPath.lineTo(0,h/2+top);
mPath.lineTo(l/2,h+top);
mPath.lineTo((float) (l*1.5),h+top);
mPath.lineTo(2*l,h/2+top);
mPath.lineTo((float) (l*1.5),top);
mPath.lineTo(l/2,top);
mPath.close();
}
@Override
public void draw(Canvas canvas) {
canvas.drawPath(mPath,mPaint);
}
@Override
public void setAlpha(int alpha) {
if (mPaint != null) {
mPaint.setAlpha(alpha);
}
}
@Override
public void setColorFilter(ColorFilter colorFilter) {
if (mPaint != null) {
mPaint.setColorFilter(colorFilter) ;
}
}
@Override
public int getOpacity() {
return 0 ;
}
// 设置边界信息
@Override
public void setBounds(int left, int top, int right, int bottom) {
super.setBounds(left, top, right, bottom);
mRect.set(left, top, right, bottom);
initPath();
}
@Override
public int getIntrinsicWidth() {
if (mBitmap != null) {
return mBitmap.getWidth();
} else {
return super.getIntrinsicWidth() ;
}
}
@Override
public int getIntrinsicHeight() {
if (mBitmap != null) {
return mBitmap.getHeight() ;
}
return super.getIntrinsicHeight();
}
}
HiveDrawable 的使用：
// imageView是一个ImageView直接通过ImageDrawable方法设置一个HiveDrawable进来即可。
imageView.setImageDrawable(new HiveDrawable(BitmapFactory.decodeResource(getResources(),R.drawable.img_1)));
运行效果是一样的，就不展示了。
网友评论