Android自定义View【实战教程】4⃣️----BitmapShader详解及圆形、圆角、多边形实现

先知先觉

发布于 2019-01-21 14:53:29

1.5K0

发布于 2019-01-21 14:53:29

文章被收录于专栏：伟大程序猿的诞生伟大程序猿的诞生

BitmapShader 的作用

官方定义：Shader used to draw a bitmap as a texture BitmapShader的作用是使用特定的图片来作为纹理来使用。

简单使用

BitmapShader是Shader的子类，可以通过Paint.setShader（Shader shader）进行设置。 BitmapShader 的构造函数

public BitmapShader(@NonNull Bitmap bitmap, TileMode tileX, TileMode tileY) 三个参数：bitmap 指的是要作为纹理的图片，tileX 指的是在ｘ方向纹理的绘制模式，tileY 指的是Ｙ方向上的绘制模式。

TileMode 源码：

    public enum TileMode {
        /**
         * replicate the edge color if the shader draws outside of its
         * original bounds
         */
        CLAMP   (0),
        /**
         * repeat the shader's image horizontally and vertically
         */
        REPEAT  (1),
        /**
         * repeat the shader's image horizontally and vertically, alternating
         * mirror images so that adjacent images always seam
         */
        MIRROR  (2);

        TileMode(int nativeInt) {
            this.nativeInt = nativeInt;
        }
        final int nativeInt;
    }

CLAMP 拉伸:横向的最后一个横行像素，不断的重复，纵项的那一列像素，不断的重复； REPEAT 重复:就是横向、纵向不断重复这个bitmap MIRROR 镜像:横向不断翻转重复，纵向不断翻转重复；

使用：

//创建
BitmapShader shader=new BitmapShader(bitmap,TileMode.CLAMP,TileMode.CLAMP);
Paint paint=new Paint();
//为paint 设置 Shader
paint.setShader(shader);
//这样就可以使用shader的纹理去覆盖绘制的图形的表面了,其中根据：CLAMP,REPEAT,MIRROR，
//来确定纹理的绘制模式
canvas.draw**(***,paint);

案例

以下demo都用这张图片：

基本使用

public class ShaderView extends View {
    private int mWidth;
    private int mHeight;
    private BitmapShader bmpShader;
    private Paint mPaint;

    private RectF bmpRect;

    public ShaderView(Context context) {
        this(context, null);
    }

    public ShaderView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ShaderView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mWidth = w; //屏幕宽
        mHeight = h; //屏幕高
        //Logger.e("w: " + w + " h:" + h + " oldw: " + oldw + " oldh : " + oldh);
        bmpRect = new RectF(0, 0, mWidth, mHeight);

        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.dlw);

        //Shader.TileMode里有三种模式：CLAMP（拉伸）、MIRROR（镜像）、REPETA（重复）
        bmpShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.REPEAT);

        mPaint = new Paint((Paint.ANTI_ALIAS_FLAG));
        mPaint.setShader(bmpShader); //设置BitmapShader之后相当于绘制了底层的图片背景
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //矩形
        canvas.drawRect(bmpRect, mPaint);

    }
}

不同TileMode的展示效果

 bmpShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.REPEAT);

bmpShader = new BitmapShader(bitmap, Shader.TileMode.MIRROR, Shader.TileMode.MIRROR);

bmpShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

bmpShader = new BitmapShader(bitmap, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);

进阶使用

圆形、圆角、多边形实现

先看图：

是不很酷，直接代码拿走你就能用： 自定义样式

 <declare-styleable name="RoundImageView">
        <attr name="borderRadius" format="dimension" />
        <attr name="type">
            <enum name="circle" value="0" />
            <enum name="round" value="1" />
            <enum name="multi" value="3" />
        </attr>
        <attr name="angleCount" format="integer" />
        <attr name="currentAngle" format="integer" />
    </declare-styleable>

自定义View

public class MultiView extends ImageView {
    /**
     * 图片的类型，圆形or圆角or多边形
     */
    private Context mContext;

    /**
     * 传输类型
     */
    private int type;

    /**
     * 圆形
     */
    public static final int TYPE_CIRCLE = 0;

    /**
     * 圆角
     */
    public static final int TYPE_ROUND = 1;

    /**
     * 多边形
     */
    public static final int TYPE_MULTI = 3;

    /**
     *默认多边形角的个数
     */
    public static final int ANGLECOUNT = 5;

    /**
     * 默认开始绘制的角度
     */
    public static final int CURRENTANGLE = 180;

    /**
     * 多边形的半径
     */
    private int startRadius;

    /**
     * 多边形角的个数
     */
    private int angleCount ;

    private int[] angles;

    /**
     * 开始绘制的角度
     */
    private int currentAngle;

    /**
     * 存储角位置的集合
     */
    private List<PointF> pointFList = new ArrayList<>();

    /**
     * 圆角大小的默认值
     */
    private static final int BODER_RADIUS_DEFAULT = 10;

    /**
     * 圆角的大小
     */
    private int mBorderRadius;

    /**
     * 绘图的Paint
     */
    private Paint mBitmapPaint;

    /**
     * 圆角的半径
     */
    private int mRadius;

    /**
     * 3x3 矩阵，主要用于缩小放大
     */
    private Matrix mMatrix;

    /**
     * 渲染图像，使用图像为绘制图形着色
     */
    private BitmapShader mBitmapShader;

    /**
     * view的宽度
     */
    private int mWidth;
    private RectF mRoundRect;

    public MultiView(Context context) {
        this(context, null);
    }

    public MultiView(Context context, AttributeSet attrs) {

        this(context, attrs, 0);

    }

    public MultiView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        this.mContext = context;

        init(context, attrs);

    }

    public void init(Context context, AttributeSet attrs) {
        mMatrix = new Matrix();
        mBitmapPaint = new Paint();
        mBitmapPaint.setAntiAlias(true);

        TypedArray typedArray = context.obtainStyledAttributes(attrs,
                R.styleable.RoundImageView);

        mBorderRadius = typedArray.getDimensionPixelSize(
                R.styleable.RoundImageView_borderRadius, (int) TypedValue
                        .applyDimension(TypedValue.COMPLEX_UNIT_DIP,
                                BODER_RADIUS_DEFAULT, getResources()
                                        .getDisplayMetrics()));// 默认为10dp
        type = typedArray.getInt(R.styleable.RoundImageView_type, TYPE_CIRCLE);// 默认为Circle
        angleCount = typedArray.getInt(R.styleable.RoundImageView_angleCount, ANGLECOUNT);
        currentAngle = typedArray.getInt(R.styleable.RoundImageView_currentAngle, currentAngle);

        typedArray.recycle(); //回收之后对象可以重用
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        /**
         * 如果类型是圆形或多边形，则强制改变view的宽高一致，以小值为准
         */
        if (type == TYPE_CIRCLE) {
            mWidth = Math.min(getMeasuredWidth(), getMeasuredHeight());
            mRadius = mWidth / 2;
            setMeasuredDimension(mWidth, mWidth);
        }

        if (type == TYPE_MULTI) {
            mWidth = Math.min(getMeasuredWidth(), getMeasuredHeight());

            setMeasuredDimension(mWidth, mWidth);

            angles = new int[angleCount];

            for (int i = 0; i < angleCount; i++) {
                int partOfAngle = 360 / angleCount; //每个顶点的角度
                angles[i] = currentAngle + partOfAngle * i;

                startRadius = mWidth / 2;
                float x = (float) (Math.sin(Math.toRadians(angles[i])) * startRadius);
                float y = (float) (Math.cos(Math.toRadians(angles[i])) * startRadius);
                pointFList.add(new PointF(x, y));
            }
        }

    }

    /**
     * 初始化BitmapShader
     */
    private void setUpShader() {
        Drawable drawable = getDrawable();
        if (drawable == null) {
            return;
        }

        Bitmap bmp = drawableToBitamp(drawable);
        // 将bmp作为着色器，就是在指定区域内绘制bmp
        mBitmapShader = new BitmapShader(bmp, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);
        float scale = 1.0f;
        if (type == TYPE_CIRCLE) {
            // 拿到bitmap宽或高的小值
            int bSize = Math.min(bmp.getWidth(), bmp.getHeight());
            scale = mWidth * 1.0f / bSize;

        } else if (type == TYPE_ROUND) {
            Logger.e(
                    "b'w = " + bmp.getWidth() + " , " + "b'h = "
                            + bmp.getHeight());
            if (!(bmp.getWidth() == getWidth() && bmp.getHeight() == getHeight())) {
                // 如果图片的宽或者高与view的宽高不匹配，计算出需要缩放的比例；缩放后的图片的宽高，一定要大于我们view的宽高；所以我们这里取大值；
                scale = Math.max(getWidth() * 1.0f / bmp.getWidth(), getHeight() * 1.0f / bmp.getHeight());
            }

        } else if (type == TYPE_MULTI) {
            Logger.e(
                    "b'w = " + bmp.getWidth() + " , " + "b'h = "
                            + bmp.getHeight());
            // 拿到bitmap宽或高的小值
            int bSize = Math.min(bmp.getWidth(), bmp.getHeight());
            scale = mWidth * 1.0f / bSize;
        }
        // shader的变换矩阵，我们这里主要用于放大或者缩小
        mMatrix.setScale(scale, scale);

        // 设置变换矩阵
        mBitmapShader.setLocalMatrix(mMatrix);
        // 设置shader
        mBitmapPaint.setShader(mBitmapShader);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        if (getDrawable() == null) {
            return;
        }
        setUpShader();

        if (type == TYPE_ROUND) {
            canvas.drawRoundRect(mRoundRect, mBorderRadius, mBorderRadius,
                    mBitmapPaint);
        } else if (type == TYPE_MULTI) {
            //canvas.translate(startRadius,startRadius);

            Path mPath = drawPath();

            canvas.drawPath(mPath, mBitmapPaint);
        } else {
            canvas.drawCircle(mRadius, mRadius, mRadius, mBitmapPaint);
        }
    }

    /**
     * @return 多边形路径
     */
    private Path drawPath() {
        Path mPath = new Path();
        mPath.moveTo(pointFList.get(0).x, pointFList.get(0).y);
        for (int i = 2; i < angleCount; i++) {
            if (i % 2 == 0) {// 除以二取余数，余数为0则为偶数,否则奇数
                mPath.lineTo(pointFList.get(i).x, pointFList.get(i).y);
            }

        }

        if (angleCount % 2 == 0) {  //偶数，moveTo
            mPath.moveTo(pointFList.get(1).x, pointFList.get(1).y);
        } else {                    //奇数，lineTo
            mPath.lineTo(pointFList.get(1).x, pointFList.get(1).y);
        }

        for (int i = 3; i < angleCount; i++) {
            if (i % 2 != 0) {
                mPath.lineTo(pointFList.get(i).x, pointFList.get(i).y);
            }
        }

        mPath.offset(startRadius, startRadius);
        return mPath;
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);

        // 圆角图片的范围
        if (type == TYPE_ROUND)
            mRoundRect = new RectF(0, 0, w, h);
    }

    /**
     * drawable转bitmap
     *
     * @param drawable
     * @return
     */
    private Bitmap drawableToBitamp(Drawable drawable) {
        if (drawable instanceof BitmapDrawable) {
            BitmapDrawable bd = (BitmapDrawable) drawable;
            return bd.getBitmap();
        }
        int w = drawable.getIntrinsicWidth();
        int h = drawable.getIntrinsicHeight();
        Bitmap bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        drawable.setBounds(0, 0, w, h);
        drawable.draw(canvas);
        return bitmap;
    }

    private static final String STATE_INSTANCE = "state_instance";
    private static final String STATE_TYPE = "state_type";
    private static final String STATE_BORDER_RADIUS = "state_border_radius";

    @Override
    protected Parcelable onSaveInstanceState() {
        Bundle bundle = new Bundle();
        bundle.putParcelable(STATE_INSTANCE, super.onSaveInstanceState());
        bundle.putInt(STATE_TYPE, type);
        bundle.putInt(STATE_BORDER_RADIUS, mBorderRadius);
        return bundle;
    }

    @Override
    protected void onRestoreInstanceState(Parcelable state) {
        if (state instanceof Bundle) {
            Bundle bundle = (Bundle) state;
            super.onRestoreInstanceState(((Bundle) state)
                    .getParcelable(STATE_INSTANCE));
            this.type = bundle.getInt(STATE_TYPE);
            this.mBorderRadius = bundle.getInt(STATE_BORDER_RADIUS);
        } else {
            super.onRestoreInstanceState(state);
        }

    }

    public void setType(int type) {
        if (this.type != type) {
            this.type = type;
            if (this.type != TYPE_ROUND && this.type != TYPE_CIRCLE && this.type != TYPE_MULTI) {
                this.type = TYPE_CIRCLE;
            }
            requestLayout();
        }

    }

}

使用

<com.libin.factory.widget.BitmapShader.MultiView   android:layout_width="wrap_content"      android:layout_height="wrap_content"       android:src="@drawable/dlw"
lb:angleCount="20"
lb:type="multi"

注释虽然很详细了，这里还是要给大家多边形公式

多边形公式详解

简单形状展示

首先画一个三角形

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        Path path = new Path();
        path.moveTo(200, 200);
        path.lineTo(75, 75);
        path.lineTo(200, 75);

        Paint paint = new Paint();
        paint.setStrokeWidth(10);
        paint.setColor(Color.BLACK);
        paint.setStyle(Paint.Style.STROKE);
        canvas.drawPath(path, paint);
    }

接下来替换上面的paint，使用bitmapShader：

 @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);

        mWidth = w; //屏幕宽
        mHeight = h; //屏幕高
        //Logger.e("w: " + w + " h:" + h + " oldw: " + oldw + " oldh : " + oldh);
        bmpRect = new RectF(0, 0, mWidth, mHeight);

        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.dlw);

        //Shader.TileMode里有三种模式：CLAMP（拉伸）、MIRROR（镜像）、REPETA（重复）
        bmpShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.REPEAT);

        mPaint = new Paint((Paint.ANTI_ALIAS_FLAG));
        mPaint.setShader(bmpShader); //设置BitmapShader之后相当于绘制了底层的图片背景
    }

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        Path path = new Path();
        path.moveTo(200, 200);
        path.lineTo(75, 75);
        path.lineTo(200, 75);

        canvas.drawPath(path, mPaint);
    }

接下来我们再看一组交叉的对比图：

Path path = new Path();
path.moveTo(200, 200);
path.lineTo(75, 75);
path.lineTo(200, 75);
path.lineTo(75,200);

通过上面的例子，我们可以发现就算我们不绘制闭合的路径，使用BitmapShader，仍然会给我们自动path.close();形成一个闭合的路径，并将背景填充进去。而且不管怎么较差背景图都会充满所有的闭合路径中。那么接下来就好理解多边形的公式了。

多边型公式

先看一下代码：

for (int i = 0; i < angleCount; i++) {
                int partOfAngle = 360 / angleCount; //每个顶点的角度
                angles[i] = currentAngle + partOfAngle * i;

                startRadius = mWidth / 2;
                float x = (float) (Math.sin(Math.toRadians(angles[i])) * startRadius);
                float y = (float) (Math.cos(Math.toRadians(angles[i])) * startRadius);
                pointFList.add(new PointF(x, y));
            }

private Path drawPath() {
        Path mPath = new Path();
        mPath.moveTo(pointFList.get(0).x, pointFList.get(0).y);
        for (int i = 2; i < angleCount; i++) {
            if (i % 2 == 0) {// 除以二取余数，余数为0则为偶数,否则奇数
                mPath.lineTo(pointFList.get(i).x, pointFList.get(i).y);
            }

        }

        if (angleCount % 2 == 0) {  //偶数，moveTo
            mPath.moveTo(pointFList.get(1).x, pointFList.get(1).y);
        } else {                    //奇数，lineTo
            mPath.lineTo(pointFList.get(1).x, pointFList.get(1).y);
        }

        for (int i = 3; i < angleCount; i++) {
            if (i % 2 != 0) {
                mPath.lineTo(pointFList.get(i).x, pointFList.get(i).y);
            }
        }

        mPath.offset(startRadius, startRadius);
        return mPath;
 }

首先我们要得到每个角的坐标：

x=Math.sin(2∗PI/360∗angle)∗r 
y=Math.cos(2∗PI/360∗angle)∗r 
x=Math.sin(Math.toRadians（angle）)∗r 
y=Math.cos(Math.toRadians（angle）)∗r

代码里我们把每个角存储道理集合里面，方便后面使用：

for (int i = 0; i < angleCount; i++) {
                int partOfAngle = 360 / angleCount; //每个顶点的角度
                angles[i] = currentAngle + partOfAngle * i;

                startRadius = mWidth / 2;
                float x = (float) (Math.sin(Math.toRadians(angles[i])) * startRadius);
                float y = (float) (Math.cos(Math.toRadians(angles[i])) * startRadius);
                pointFList.add(new PointF(x, y));
            }

我们存储时是按照顺序存储的每个角的坐标值，那么现在等我们有了多边形的每个角的坐标，那么我们使用lineto和moveto就可以实现绘制多边形了。如图我们已经得到坐标的点（方便手绘图）

然后我们要做的就是连线了，这时候奇数和偶数角的图形事不一样的，奇数图形一直lineto就可以完成，偶数图形要进行一次moveto才能完成，看一下下面两个图，体会一下。

六角形的时候有两个起点一个是0，一个是1.

现在我们应该对多边形公式有了一定的认识，不明白的可以联系作者。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2017年04月13日，如有侵权请联系 cloudcommunity@tencent.com 删除

android

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

android

登录后参与评论

0 条评论

热度