自定义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的坐标系是相对于父控件而言的

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


自定义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

<color name="red">#f00</color>  //16位低精度-不带透明通道红色

<color name="red">#af00</color> //16位低精度-带透明通道红色

<color name="red">#ff0000</color> //32位高精度-不带透明通道红色

<color name="red">#aaff0000</color> //32位高精度-带透明通道红色

```


自定义View-分类与流程

-构造函数

//一般直接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绘制图形

-常用操作速查

-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。

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-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);


-缩放Scale

public void scale(float sx,float sy)

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

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

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

代码:

结果:

-旋转Rotate

代码:


结果:


-错切Skew

public void skew(float sx,float sy)

参数含义:

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

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

代码:

结果:

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

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

一般用法为:

save();//保存状态

...//具体操作

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

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


自定义View-Canvas图片文字

1-drawPicture

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

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

Picture的相关方法

代码:

结果:


2-drawBitmap

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

一般使用BitmapFactory

代码:


结果:

方法一
方法二
方法三

实例:

源码

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

3-绘制文字

第一类

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

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

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

第二类

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
















最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,530评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 86,403评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,120评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,770评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,758评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,649评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,021评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,675评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,931评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,751评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,410评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,004评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,969评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,042评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,493评论 2 343

推荐阅读更多精彩内容