绘图中的其他知识点总结

作者: JeremyDai | 来源:发表于2016-06-24 14:19 被阅读71次

绘图中的其他知识点总结
如何学习，才能收获最大化？
你成®MM培训计划-图十
如何绘制好看的思维导图
一个5年Java工程师的面试总结
LeetCode 专题：拓扑排序
SpringCloud全家桶以及配合的常用框架
绘本讲师训练营【2期】15|21读出图中的语言
Kotlin 入门（五）：其他知识点总结
一般将来时知识小测知识点总结

Draw

Canvas 可以绘制的对象：弧线（arcs）、填充颜色(argb和color)、圆(circle和oval)、Bitmap、点（point）、线（line）、矩形（Reat）、图片（Picture）、圆形矩形（RoundRect）、文本（text）、顶点（Vertices）、路径（path）。

Canvas不仅仅可以draw一些图形、图片，其本身也提供了可操作的方法：rorate(旋转)、scale(压缩)、translate(平移)、skew(扭曲)等。

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

 for (int i = 0; i < 360; i = i + 6) {
     canvas.save();
     canvas.rotate(i, 100, 100);
     canvas.drawLine(100, 0, 100, 10, new Paint());
     canvas.restore();
 }
}

效果

Matrix

canvas 类当中drawBitmap(Bitmap bitmap,Matrix matrix,Paint paint)方法当中有个参数是matrix类型，它是个3x3矩阵。Matrix在android中的主要作用是图像变换、如平移、旋转、缩放、扭曲等。
Matrix提供了Translate(平移)、Scale(缩放)、Rotate(旋转)、Skew(扭曲)四中变换操作，这4种操作实质上都是调用了setValues方法来设置矩阵数组来达到效果。除translate外，scale、rotate、skew 都是围绕一个中心点来进行的，如果不指定，默认情况下是围绕（0，0）来进行相应的变换的。
Matrix提供的四种操作，每一种都有pre、set、post三种形式。原因是矩阵乘法不满足乘法交换律，因此左乘还是右乘最终的效果都不一样。我们可以把Matrix变换想象成一个队列，队列里面包含了若干个变换操作，队列中每个操作按照先后顺序操作变换目标完成变换，pre相当于向队首增加一个操作，post相当于向队尾增加一个操作，set相当于清空当前队列重新设置。
下面的例子和解释很重要。
例1

//这段代码只有translate(100, 100)生效，因为第二个set会把之前队列中的操作清除。
Matrix m = new Matrix();
m.setRotate(100); 
m.setTranslate(100, 100);```
例2

//这段代码先执行translate(100, 100)，后执行rotate(100)
Matrix m = new Matrix();
m.setTranslate(100, 100);
m.postRotate(100);```
例3

//这段代码先执行rotate(100)，后执行translate(100, 100)
Matrix m = new Matrix();
m.setTranslate(100, 100);
m.preRotate(100);```
例4

//这段代码的执行顺序：translate(100f, 100f) -> scale(2f, 2f) -> scale(0.5f, 0.5f) -> translate(50f, 50f)
Matrix m = new Matrix();
m.preScale(2f, 2f);
m.preTranslate(100f, 100f);
m.postScale(0.5f, 0.5f);
m.postTranslate(50f, 50f);```
例5

//这段代码的执行顺序：translate(50f, 50f) -> scale(0.8f, 0.8f) -> scale(3f, 3f)
Matrix m = new Matrix();
m.postTranslate(100, 100);   
m.preScale(0.5f, 0.5f);
m.setScale(0.8f, 0.8f);   
m.postScale(3f, 3f);
m.preTranslate(50f, 50f);```
Matrix 映射方法
Matrix提供了mapPoints()，mapRects()，mapVectors()等映射方法，用来获取经Matrix映射后的值。

//这段代码的作用是获取经过平移后该bitmap四个点的坐标
Matrix m = new Matrix();
m.postTranslate(100f, 100f);

float[] src = {
0, 0,
0, bitmap.getHeight(),
bitmap.getWidth(), 0,
bitmap.getWidth(), bitmap.getHeight()
};
float[] dst = new float[8];

m.mapPoints(dst, src);


### Xfermode
XferMode主要是将2张图片合在一起，由用户自己决定是选中图片重叠的部分还是非重叠的部分，可以参考Android官方提供的图片,图中 圆为Dst,正方形为Src
![](https://img.haomeiwen.com/i2154124/796ead1b6739ea1b?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

Xfermode的类型有16种：
private static final Xfermode[] sModes = {
new PorterDuffXfermode(PorterDuff.Mode.CLEAR),
new PorterDuffXfermode(PorterDuff.Mode.SRC),
new PorterDuffXfermode(PorterDuff.Mode.DST),
new PorterDuffXfermode(PorterDuff.Mode.SRC_OVER),
new PorterDuffXfermode(PorterDuff.Mode.DST_OVER),
new PorterDuffXfermode(PorterDuff.Mode.SRC_IN),
new PorterDuffXfermode(PorterDuff.Mode.DST_IN),
new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT),
new PorterDuffXfermode(PorterDuff.Mode.DST_OUT),
new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP),
new PorterDuffXfermode(PorterDuff.Mode.DST_ATOP),
new PorterDuffXfermode(PorterDuff.Mode.XOR),
new PorterDuffXfermode(PorterDuff.Mode.DARKEN),
new PorterDuffXfermode(PorterDuff.Mode.LIGHTEN),
new PorterDuffXfermode(PorterDuff.Mode.MULTIPLY),
new PorterDuffXfermode(PorterDuff.Mode.SCREEN)
};

如果我们想要实现一个圆心图像的话可以使用图中dstin的方式，即在我们的原图上面再画一个实心圆形图。首先我们需要生成iyge圆形的bitmap：

private Bitmap mCircleBitmap;

//生成一个实心圆形Bitmap,这个Bitmap宽高要与当前的View的宽高相同
private Bitmap getCircleBitmap() {
    if (mCircleBitmap == null) {
        mCircleBitmap = Bitmap.createBitmap(2 * mRadius, 2 * mRadius,
                Config.ARGB_8888);
        Canvas canvas = new Canvas(mCircleBitmap);

        mPaint.reset();
        mPaint.setStyle(Style.FILL);
        canvas.drawCircle(mRadius, mRadius, mRadius, mPaint);
    }
    return mCircleBitmap;

}

在将这个圆形图片盖在原图上面

//将两张图片以XferMode（DST_IN）的方式组合到一张照片中
private Bitmap combineBitmap(Drawable drawable, Bitmap maskBitmap) {
int width = drawable.getIntrinsicWidth();
int height = drawable.getIntrinsicHeight();
// 将drawable转bitmap
Bitmap bitmap = Bitmap.createBitmap(width, height, Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
//将图片自动放缩到View的宽高，即2倍的半径
drawable.setBounds(0, 0, mRadius2, mRadius2);
drawable.draw(canvas);

    // 先将XferMode设置好，然后将盖在上面的bitmap绘制出来
    mPaint.reset();
    mPaint.setXfermode(xfermode);
    canvas.drawBitmap(maskBitmap, 0, 0, mPaint);
    mPaint.setXfermode(null);

    return bitmap;
}

//然后将组合得到的bitmaptoin通过canvas绘制到界面上
@Override
protected void onDraw(Canvas canvas) {
//获取设置的src图片
Drawable drawable = getDrawable();
//获取盖在src上面的实心圆形Bitmap
Bitmap circleBitmap = getCircleBitmap();

    //两张图片以XferMode（DST_IN）的方式组合
    Bitmap bitmap = combineBitmap(drawable, circleBitmap);

    //将最终的bitmap画到画板上面
    canvas.drawBitmap(bitmap, 0, 0, mPaint);

}

完整的类代码

package com.hc.circleimage;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Xfermode;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;

public class XfermodeCircleImage extends ImageView {
private int mRadius;
private Paint mPaint;
private Xfermode xfermode;
private Bitmap mCircleBitmap;

public XfermodeCircleImage(Context context) {
    super(context);
    init();
}

public XfermodeCircleImage(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

private void init() {
    mPaint = new Paint();
    xfermode = new PorterDuffXfermode(PorterDuff.Mode.DST_IN);
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    int width = getMeasuredWidth();
    int height = getMeasuredHeight();

    if (width > height) {
        mRadius = height / 2;
    } else {
        mRadius = width / 2;
    }

    setMeasuredDimension(mRadius * 2, mRadius * 2);
}

//生成一个实心圆形Bitmap,这个Bitmap宽高要与当前的View的宽高相同
private Bitmap getCircleBitmap() {
    if (mCircleBitmap == null) {
        mCircleBitmap = Bitmap.createBitmap(2 * mRadius, 2 * mRadius,
                Config.ARGB_8888);
        Canvas canvas = new Canvas(mCircleBitmap);

        mPaint.reset();
        mPaint.setStyle(Style.FILL);
        canvas.drawCircle(mRadius, mRadius, mRadius, mPaint);
    }
    return mCircleBitmap;
}

//将两张图片以XferMode（DST_IN）的方式组合到一张照片中
private Bitmap combineBitmap(Drawable drawable, Bitmap maskBitmap) {
    int width = drawable.getIntrinsicWidth();
    int height = drawable.getIntrinsicHeight();
    // 将drawable转bitmap
    Bitmap bitmap = Bitmap.createBitmap(width, height, Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    //将图片自动放缩到View的宽高，即2倍的半径
    drawable.setBounds(0, 0, mRadius*2, mRadius*2);
    drawable.draw(canvas);

    // 先将XferMode设置好，然后将盖在上面的bitmap绘制出来
    mPaint.reset();
    mPaint.setXfermode(xfermode);
    canvas.drawBitmap(maskBitmap, 0, 0, mPaint);
    mPaint.setXfermode(null);

    return bitmap;
}

@Override
protected void onDraw(Canvas canvas) {
    //获取设置的src图片
    Drawable drawable = getDrawable();
    //获取盖在src上面的实心圆形Bitmap
    Bitmap circleBitmap = getCircleBitmap();

    //两张图片以XferMode（DST_IN）的方式组合
    Bitmap bitmap = combineBitmap(drawable, circleBitmap);

    //将最终的bitmap画到画板上面
    canvas.drawBitmap(bitmap, 0, 0, mPaint);

}

}

这样就可以将一个方形的图片，变成圆形了。

### BitmapShader

BitmapShader是Shader的子类，可以通过Paint.setShader（Shader shader）进行设置、,BitmapShader有啥作用呢，它可以根据你设置的方式（下面介绍）将图片铺满你所选的区域，有哪几种方式“铺”呢？有以下几种：
（1）CLAMP：拉伸，在x方向上是图片的最后一列像素重复平铺，而y方向是最后一行往下拉伸(当bitmap比要绘制的图形小时拉伸位图的最后一个像素；当bitmap比要绘制的图形大时，根据绘制图形剪裁bitmap )
（2）REPEAT： 重复，很容易理解，图片重复平铺过去(当绘画的区域比图片本身要大时会重复，从设置的x或者y轴方向复制bitmap)
（3）MIRROR：镜像，就是将图片翻转。
CLAMP的方式：![](https://img.haomeiwen.com/i2154124/401f6c0f76db8d57?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
REPEAT方式:![](https://img.haomeiwen.com/i2154124/10d19cc1356a10be?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
MIRROR方式:![](https://img.haomeiwen.com/i2154124/e469691be7d7e470?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

使用BitmapShader制作圆形图片的方法非常简单，只需通过Bitmap构造出一个BitmapShader，并将这个BitmapShader设置到当前的Paint当中，用这个Paint绘制一个圆就可以了

package com.hc.circleimage;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Shader.TileMode;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;

public class ShaderCircleImage extends ImageView {

private int mRadius;
private Paint mPaint;

public ShaderCircleImage(Context context) {
    super(context);
    init();
}

public ShaderCircleImage(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

private void init() {
    mPaint = new Paint();
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    int width = getMeasuredWidth();
    int height = getMeasuredHeight();

    if (width > height) {
        mRadius = height / 2;
    } else {
        mRadius = width / 2;
    }

    setMeasuredDimension(mRadius * 2, 2 * mRadius);
}

private Bitmap drawableToBitmap(Drawable drawable) {
    if (drawable instanceof BitmapDrawable) {
        return ((BitmapDrawable) drawable).getBitmap();
    } else {
        int width = drawable.getIntrinsicWidth();
        int height = drawable.getIntrinsicHeight();
        Bitmap bitmap = Bitmap.createBitmap(width, height,
                Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        drawable.setBounds(0, 0, mRadius*2, mRadius*2);
        drawable.draw(canvas);
        return bitmap;
    }
}

@Override
protected void onDraw(Canvas canvas) {
    // 将Drawable转为Bitmap
    Bitmap bmp = drawableToBitmap(getDrawable());
    // 通过Bitmap和指定x,y方向的平铺方式构造出BitmapShader对象
    BitmapShader mBitmapShader = new BitmapShader(bmp, TileMode.CLAMP,
            TileMode.CLAMP);
    // 将BitmapShader设置到当前的Paint对象中
    mPaint.setShader(mBitmapShader);
    // 绘制出一个圆
    canvas.drawCircle(mRadius, mRadius, mRadius, mPaint);

}

}

之前我的文章当中介绍的一个圆形图像也就是用这种方式实现的[CircleImageView](http://www.jianshu.com/p/ef6c5b871db5)
### ClipPath
ClipPath 也可以用来绘制圆形

package com.hc.circleimage;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Path.Direction;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;

public class ClipCircleImage extends ImageView {
private int mRadius;
private Paint mPaint;

public ClipCircleImage(Context context) {
    super(context);
    init();
}

public ClipCircleImage(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

private void init() {
    mPaint = new Paint();
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    int width = getMeasuredWidth();
    int height = getMeasuredHeight();

    if (width > height) {
        mRadius = height / 2;
    } else {
        mRadius = width / 2;
    }

    setMeasuredDimension(mRadius * 2, 2 * mRadius);
}

private Bitmap drawableToBitmap(Drawable drawable) {
    if (drawable instanceof BitmapDrawable) {
        return ((BitmapDrawable) drawable).getBitmap();
    } else {
        int width = drawable.getIntrinsicWidth();
        int height = drawable.getIntrinsicHeight();
        Bitmap bitmap = Bitmap.createBitmap(width, height,
                Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        drawable.setBounds(0, 0, mRadius*2, mRadius*2);
        drawable.draw(canvas);
        return bitmap;
    }
}

@Override
protected void onDraw(Canvas canvas) {
    // 将Drawable转为Bitmap
    Bitmap bmp = drawableToBitmap(getDrawable());
    Path path = new Path(); 
    //按照逆时针方向添加一个圆
    path.addCircle(mRadius, mRadius, mRadius, Direction.CCW);
    //先将canvas保存
    canvas.save();
    //设置为在圆形区域内绘制
    canvas.clipPath(path);
    //绘制Bitmap
    canvas.drawBitmap(bmp, 0, 0, mPaint);
    //恢复Canvas
    canvas.restore();
}

}

绘图中的其他知识点总结
Draw Canvas 可以绘制的对象：弧线（arcs）、填充颜色(argb和color)、圆(circle和ov...
如何学习，才能收获最大化？
根据亲身经历总结以下几点： 1.课前预习，将知识点通过脑图方式进行梳理； 2.课后总结，更新脑图中知识点； 3.坚...
你成®MM培训计划-图十
本图是七下历史书最后一单元的知识点总结。“经济”这一分支上少个答案。因为其他知识点都是按照书上教材内容总结的，唯独...
如何绘制好看的思维导图
思维导图可以将复杂又多的知识点进行总结，还有工作日程或者是工作中遇到的难题进行总结，所以用处还是较大的，那要如何绘...
一个5年Java工程师的面试总结
这个面试总结，除知识点外，其他的面试均可适用！！！非知识点 1、简历要准备好，联系方式一定要正确清晰醒目，项目经...
LeetCode 专题：拓扑排序
知识点总结拓扑排序并非一种排序算法，它能得到一个 AOV 网络的拓扑序列，用于判断有向无环图中是否有环，即可以判...
SpringCloud全家桶以及配合的常用框架
SpringCloud全家桶，以及其他常用的开源框架总结。图中标记颜色的部分，为个人比较喜欢的一个组合。后续会将开...
绘本讲师训练营【2期】15|21读出图中的语言
020224李纯作者指出一本绘本的恰到好处的读一定是发掘图中的故事语言，绘本是读给小朋友们听的书。小朋友会在图中...
Kotlin 入门（五）：其他知识点总结
This表达式为了表示当前的接收者我们使用 this 表达式：1.在类的成员中，...
一般将来时知识小测知识点总结
上周语法小测一般知识点总结将来时的构成 1. 主语+ be going to do +其他 2. 主语+ wil...