自定义View-1Canvas

参考资料

kelin//view的绘制流程,比较详细的过源码 有注释*

郭霖自定义view系列

鸿洋自定义view

鸿洋自定义ViewGroup

GcsSloop的自定义View教程!

实例-自定义view列表左滑删除

自定义View控件

饼图

打钩提示

Loading进度条(绚丽版)http://www.gcssloop.com/customview/Canvas_PictureText

雷达图(蜘蛛网图)http://www.gcssloop.com/customview/Path_Basic

弹性的圆 http://www.jianshu.com/p/791d3a791ec2

小飞机沿路径效果http://www.gcssloop.com/customview/Path_PathMeasure

Matrix 打造个性的图片预览与多点触控 http://www.imooc.com/learn/239

setPolyToPoly制造3D效果http://blog.csdn.net/lmj623565791/article/details/44278417

3D立体旋转 http://www.gcssloop.com/customview/matrix-3d-camera

九宫格RecyclerView左滑删除http://www.jianshu.com/p/304707754ff9


自定义View-坐标系

-View的坐标系是相对于父控件而言的

自定义View-1Canvas_第1张图片

-MotionEvent中的get()和getRaw的区别

自定义View-1Canvas_第2张图片

自定义View-角度与弧度

屏幕坐标系中增大方向为顺时针方向,圆一周对应的角度为360度,对应的弧度为2π。

公式 : 180/π = deg(角度)/rad(弧度)

Math.toDegrees() 弧度转化为角度

Math.toRadians() 角度转化为弧度

自定义View-颜色

```Java

int color = Color.Gray; //灰色

int color = Color.argb(127,255,0,0);  //半透明红色

int color = 0xaaff0000;  //带透明度的红色

int color = getResources().getColor(R.color.myColor);

```

``` xml

#f00  //16位低精度-不带透明通道红色

#af00 //16位低精度-带透明通道红色

#ff0000 //32位高精度-不带透明通道红色

#aaff0000 //32位高精度-带透明通道红色

```


自定义View-分类与流程

自定义View-1Canvas_第3张图片

-构造函数

//一般直接new一个View的时候使用

 public void SloopView(Context context)

//一般在layout文件中调用的时候使用,关于它所有属性会被传入attrs

public void SloopView(Context context,AttributeSet attrs)

public void SloopView(Context context,AttributeSet attrs,int defStyleAttr)

public void SloopView(Context context,AttributeSet attrs,int defStyleAttr,int defStyleRes)

-onMeasure

MeasureSpec.getSize(widthMeasureSpec); //宽度的确切数值

MeasureSpec.getMode(widthMeasureSpec);  //宽度的测量模式

UNSPECIFIED //子View可以设置为任意大小

EXACTLY //父控件已经确切的指定了子View的大小 match_parent || 100dp

AT_MOST //子View具体大小没有尺寸限制,上限一般为父View大小 wrap_content

方法内修改宽高后调用setMeasuredDimension( widthsize, heightsize);

-onSizeChanged

View的大小不仅由View本身控制,而且受父控件的影响,所以我们在确定View大小的时候最好使用系统提供的onSizeChanged回调函数

```java

@Override

protected void onSizeChanged(intw,inth,intoldw,intoldh){

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

}

```

-onLayout

确定子View的位置,在自定义ViewGroup中会用到,他调用的是子View的layout函数

-onDraw


自定义View-Canvas绘制图形

-常用操作速查

自定义View-1Canvas_第4张图片

-Paint

setAntiAlias 抗锯齿

setColor 画笔颜色

setARGB 画笔argb值

setAlpha alpha值

setTextSize 字体尺寸

setTypeface 设置或清除字体样式

setTextAlign 左对齐(LEFT),居中对齐(CENTER),右对齐(RIGHT)

measureText  测量文本大小(注意,请在设置完文本各项参数后调用)

setStyle  画笔模式  //Paint.Style.STROKE描边 - FILL填充 - FILL_AND_STROKE描边加填充

setStrokeWith 画笔宽度

setStrokeCap 画笔笔触风格 Paint.Cap.ROUND圆形

getColor 得到画笔颜色

getAlpha 得到alpha值

-关于圆角矩形

// 第一种

RectFrectF=newRectF(100,100,800,400);

canvas.drawRoundRect(rectF,30,30,mPaint);

// 第二种 API>=21

canvas.drawRoundRect(100,100,800,400,30,30,mPaint);

与矩形相比,圆角矩形多出2个参数 rx和ry。

自定义View-1Canvas_第5张图片

RectFrectF=newRectF(100,100,800,400);

//当rx为(800-100/2)宽的一半,ry为矩形高的一半时,即和椭圆一个效果。若矩形为正方形,则效果为一个圆

canvas.drawRoundRect(rectF,350,150,mPaint); 

//当rx和ry大于矩形宽高一半的时候,是无法计算出圆弧的,方法会自动修正按照一半处理

canvas.drawRoundRect(rectF,700,400,mPaint);

-关于圆弧

drawArc(@NonNull RectFoval,float startAngle,float sweepAngle,boolean useCenter,@NonNull Paint paint)

startAngle// 开始角度

sweepAngle// 扫过角度

useCenter// 是否使用中心

```java

RectF rectF=new RectF(100,100,600,600);// 绘制背景矩形mPaint.setColor(Color.GRAY);canvas.drawRect(rectF,mPaint);// 绘制矩形mPaint.setColor(Color.BLUE);canvas.drawArc(rectF,0,90,false,mPaint);// 绘制圆弧

RectFrectF2=new RectF(100,700,600,1200);// 绘制背景矩形mPaint.setColor(Color.GRAY);canvas.drawRect(rectF2,mPaint);// 绘制矩形mPaint.setColor(Color.BLUE);canvas.drawArc(rectF2,0,90,true,mPaint);// 绘制圆弧

```


自定义View-1Canvas_第6张图片


自定义view-Canvas画布操作

-位移Translate

注意:位移是基于当前位置移动,而不是每次都基于屏幕左上角的原始坐标点(0,0)移动。

// 在坐标原点绘制一个黑色圆形mPaint.setColor(Color.BLACK);canvas.translate(200,200);canvas.drawCircle(0,0,100,mPaint);

// 在坐标原点绘制一个蓝色圆形mPaint.setColor(Color.BLUE);canvas.translate(200,200);canvas.drawCircle(0,0,100,mPaint);


自定义View-1Canvas_第7张图片

-缩放Scale

public void scale(float sx,float sy)

public final void scale(float sx,float sy,float px,float py)

和位移(translate)一样,缩放也是可以叠加的。

缩放比例(sx,sy)取值范围详解:

自定义View-1Canvas_第8张图片

代码:

自定义View-1Canvas_第9张图片

结果:

自定义View-1Canvas_第10张图片

-旋转Rotate

代码:


自定义View-1Canvas_第11张图片

结果:


自定义View-1Canvas_第12张图片

-错切Skew

public void skew(float sx,float sy)

参数含义:

float sx:将画布在x方向上倾斜相应的角度,sx倾斜角度的tan值,

float sy:将画布在y轴方向上倾斜相应的角度,sy为倾斜角度的tan值.

自定义View-1Canvas_第13张图片

代码:

自定义View-1Canvas_第14张图片

结果:

自定义View-1Canvas_第15张图片

-快照(save)和回滚(restore)

画布的操作是不可逆的,会对后续的操作产生影响,所以会对画布的状态进行保存和回滚。

自定义View-1Canvas_第16张图片

一般用法为:

save();//保存状态

...//具体操作

restore();//回滚到之前的状态

详细用法可参考 http://www.gcssloop.com/customview/Canvas_Convert 

自定义View-1Canvas_第17张图片
自定义View-1Canvas_第18张图片


自定义View-Canvas图片文字

1-drawPicture

此方法使用前请关闭硬件加速,以避免不必要的问题!!!

Picture并不是画图片,而是录制Canvas操作的录像机!

Picture的相关方法

自定义View-1Canvas_第19张图片

代码:

自定义View-1Canvas_第20张图片

结果:

自定义View-1Canvas_第21张图片


2-drawBitmap

自定义View-1Canvas_第22张图片

通常绘制Bitmap 都是读取已有的图片,转换为Bitmap并绘制在Canvas上。

一般使用BitmapFactory

自定义View-1Canvas_第23张图片
自定义View-1Canvas_第24张图片

代码:


自定义View-1Canvas_第25张图片

结果:

自定义View-1Canvas_第26张图片
方法一
自定义View-1Canvas_第27张图片
方法二
自定义View-1Canvas_第28张图片
方法三
自定义View-1Canvas_第29张图片
自定义View-1Canvas_第30张图片

实例:

源码

注意:图片是一组连续的图片组合成为的一张图。如果仅使用一张图想实现效果会有问题,截取的src图片区域会在dst区域会自动缩放。

自定义View-1Canvas_第31张图片
自定义View-1Canvas_第32张图片

3-绘制文字

自定义View-1Canvas_第33张图片

第一类

x,y两个参数是指定文本绘制两个基线,x默认在字符串左侧,y默认在字符串下方

start, end两个参数指定了字符串的取值区间 [start,end)

index, count两个参数指定字符数组的起始下标 和 长度

第二类

float[] pos参数,指定了每个字符的坐标,API16已废弃。不建议使用

自定义View-1Canvas_第34张图片
















你可能感兴趣的:(自定义View-1Canvas)