(1)Canvas
我们先来看一下Canvas的官方定义：
The Canvas class holds the "draw" calls. To draw something, you need 4 basic components: A Bitmap to hold the pixels, a Canvas to host the draw calls (writing into the bitmap), a drawing primitive (e.g. Rect, Path, text, Bitmap), and a paint (to describe the colors and styles for the drawing).
那么怎么来理解Canvas，我的理解是：
Canvas是画图(draw)的一个核心类，主要是开启画图的操作。如果我们把android画图比做一个画家画画，那么这是要四个基本的东西。
第一：画家---------Canvas 画家主要是来开启画画的操作
第二：画什么-----a drawing primitive 如画图片，文字等( Rect, Path, text, Bitmap)
第三：画笔--------paint 画笔决定了画画的颜色，样式等( colors and styles )
第四：画在什么上面----Bitmap
1.1 Canvas的关键方法
drawPoint(float x, float y, Paint paint) ------------画点
drawLine(float startX, float startY, float stopX, float stopY, Paint paint) -------------画线
drawCircle(float cx, float cy, float radius, Paint paint) ----------画圆
drawOval(RectF oval, Paint paint) -------画椭圆
drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint) ---------画弧
drawRect(Rect r, Paint paint) -----------画区域(矩形)
drawRoundRect(RectF rect, float rx, float ry, Paint paint) ----------画圆角矩形
drawPath(Path path, Paint paint) -----------画路径
drawText(String text, float x, float y, Paint paint) ------------画文字
drawBitmap(Bitmap bitmap, Rect src, RectF dst, Paint paint) -------画图片
(2)Paint --画笔
官方定义：The Paint class holds the style and color information about how to draw geometries, text and bitmaps.
Paint决定所画东西的样式和颜色信息
2.1 Paint 的关键方法
setARGB(int a, int r, int g, int b) --------------- 设置 Paint对象颜色，参数一为alpha透明值
setAlpha(int a) --------------- 设置alpha不透明度，范围为0~255,数值越小，越透明，颜色上表现越淡。实际上当设成10以下就会有透明的效果了
setAntiAlias(boolean aa)--------------- 是否抗锯齿
setColor(int color) ---------------设置颜色，这里Android内部定义的有Color类包含了一些常见颜色定义
setTextScaleX(float scaleX) ---------------设置文本缩放倍数，1.0f为原始
setTextSize(float textSize)--------------- 设置字体大小
setUnderlineText(booleanunderlineText) ---------------设置下划线
setStyle(Paint.Style style) ----------设置画笔的风格（空心或实心）Style.FILL：实心 Style.STROKE：空心
setStrokeWidth(); ----------------设置空心边框的宽度
setXfermode(Xfermode xfermode) ----------------设置图片叠加显示的方式，这个在图片叠加显示特定效果时，非常有用噢,先画的图片为dest,后画的图片为src
(3)画图的一个Demo
3.1 效果图
3.2 详细源码
3.2.1 CustomViewActivity1.java
public class CustomViewActivity1 extends ActionBarActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//setContentView(R.layout.activity_custom_view_activity1);
setContentView(new MyCustomView01(this));
}
}3.2.2 MyCustomView01.java
package com.example.administrator.customview.customview01;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.RectF;
import android.graphics.Shader;
import android.util.Log;
import android.view.View;
import com.example.administrator.customview.R;
public class MyCustomView01 extends View {
public static final String TAG = "MyCustomView01";
public MyCustomView01(Context context) {
super(context);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Paint paint = new Paint();
paint.setColor(Color.RED);
//draw circle
paint.setTextSize(20);
canvas.drawText("circle:", 10, 30, paint);
canvas.drawCircle(150, 30, 20, paint);
paint.setAntiAlias(true);
paint.setStyle(Paint.Style.STROKE);
canvas.drawCircle(200, 30, 20, paint);
paint.setStrokeWidth(10);
canvas.drawCircle(250,30,20,paint);
//draw point and line
paint.reset();
paint.setColor(Color.GREEN);
paint.setTextSize(20);
canvas.drawText("point and line:", 10, 80, paint);
canvas.drawLine(150, 80, 190, 80, paint);
canvas.drawLine(200, 80, 300, 60, paint);
paint.setStrokeWidth(4);
canvas.drawPoint(350,80,paint);
//drawArc
paint.reset();
paint.setStyle(Paint.Style.STROKE);
paint.setTextSize(10);
paint.setColor(Color.BLUE);
RectF oval1=new RectF(300,20,340,40);
canvas.drawArc(oval1, 0, 180, true, paint);
oval1.set(360, 20, 400, 40);
canvas.drawArc(oval1, 90, 180, false, paint);
oval1.set(320, 30, 360, 60);
canvas.drawArc(oval1, 0, 180, false, paint);
//draw rect
paint.reset();
paint.setTextSize(20);
paint.setColor(Color.GRAY);
canvas.drawText("rect：", 10, 120, paint);
paint.setStyle(Paint.Style.FILL);
canvas.drawRect(60, 100, 100, 140, paint);
//draw Arc and Oval
paint.reset();
paint.setTextSize(20);
paint.setColor(Color.YELLOW);
canvas.drawText("Arc and Oval:", 10, 170, paint);
Shader mShader = new LinearGradient(0, 0, 100, 100,
new int[] { Color.RED, Color.GREEN, Color.BLUE, Color.YELLOW,
Color.LTGRAY }, null, Shader.TileMode.REPEAT);
paint.setShader(mShader);
RectF oval2 = new RectF(130, 110, 230, 210);
//time clock direction
canvas.drawArc(oval2, 0, 90, true, paint);
oval2.set(260,110,390,220);
canvas.drawOval(oval2, paint);
//draw Triangle
paint.reset();
paint.setTextSize(20);
paint.setColor(Color.BLACK);
paint.setAntiAlias(true);
canvas.drawText("Triangle:", 10, 270, paint);
Path path = new Path();
path.moveTo(20, 310);
path.lineTo(140, 250);
path.lineTo(250, 300);
path.lineTo(20, 310);
canvas.drawPath(path, paint);
//draw round corner rect
paint.reset();
paint.setTextSize(20);
paint.setColor(Color.CYAN);
paint.setAntiAlias(true);
canvas.drawText("round corner rect:", 10, 350, paint);
canvas.drawRoundRect(new RectF(310,300,410,370),20,20,paint);
//draw bitmap
paint.reset();
paint.setTextSize(20);
paint.setColor(Color.DKGRAY);
canvas.drawText("bitmap:", 10, 420, paint);
canvas.drawBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.shw_bg),110,370,paint);
//draw circle bitmap
paint.reset();
paint.setTextSize(20);
paint.setColor(Color.GREEN);
paint.setAntiAlias(true);
canvas.drawText("circle bitmap:", 10, 550, paint);
Bitmap src = BitmapFactory.decodeResource(getResources(),R.drawable.shw_bg);
canvas.drawBitmap(createCircleImage(src,100),300,450,paint);
//draw round bitmap
paint.reset();
paint.setTextSize(20);
paint.setColor(Color.BLACK);
paint.setAntiAlias(true);
canvas.drawText("round bitmap:", 10, 580, paint);
Bitmap src_round = BitmapFactory.decodeResource(getResources(),R.drawable.shw_bg);
canvas.drawBitmap(createRoundConerImage(src_round,10),200,550,paint);
}
private Bitmap createCircleImage(Bitmap source, int min)
{
final Paint paint = new Paint();
paint.setAntiAlias(true);
Bitmap target = Bitmap.createBitmap(min, min, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(target);
canvas.drawCircle(min / 2, min / 2, min / 2, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(source, 0, 0, paint);
return target;
}
private Bitmap createRoundConerImage(Bitmap source,int mRadius)
{
Bitmap target = Bitmap.createBitmap(source.getWidth(), source.getHeight(),Bitmap.Config.ARGB_8888);
final Paint paint = new Paint();
paint.setAntiAlias(true);
Canvas canvas = new Canvas(target);
RectF rect = new RectF(0, 0, source.getWidth(), source.getHeight());
canvas.drawRoundRect(rect, mRadius, mRadius, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(source, 0, 0, paint);
return target;
}
}
参考资料：
1.android api之Canvas 和 Paint
2.Android利用canvas画各种图形(点、直线、弧、圆、扁圆、文字、矩形、多边形、曲线、圆角矩形)
http://www.csdn123.com/html/exception/705/705039_705042_705043.htm
3.Android学习笔记09：Paint及Canvas的简单应用
http://www.cnblogs.com/menlsh/archive/2012/11/18/2776003.html
http://blog.chinaunix.net/uid-20771867-id-3260250.html
http://blog.csdn.net/wm111/article/details/7299294
http://wpf814533631.iteye.com/blog/1847661
7.Android学习笔记之详细讲解画圆角图片
http://blog.csdn.net/sjf0115/article/details/7325515
8.Android 完美实现图片圆角和圆形（对实现进行分析）
http://blog.csdn.net/lmj623565791/article/details/24555655
4307
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
