美文网首页
自定义View-1Canvas

自定义View-1Canvas

作者: 玄策 | 来源:发表于2017-05-16 11:03 被阅读51次

参考资料

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已废弃。不建议使用






相关文章

  • 自定义View-1Canvas

    参考资料 kelin//view的绘制流程,比较详细的过源码 有注释* 郭霖自定义view系列 鸿洋自定义view...

  • Dialog

    安卓dialog的使用+如何自定义dialog自定义Dialog自定义Dialog 自定义

  • django的自定义filter和自定义simple_tag

    django的自定义filter和自定义simple_tag 自定义filter: 自定义filter: 简单示例...

  • 自定义tabbarController

    要自定义tabBarController,就要自定义tabBar.要自定义tabBar就要自定义item.所以,咱...

  • 第三方

    ZYSideSlipFilter 侧边栏条件筛选器,支持自定义事件,自定义筛选栏目,自定义所有。。。样式完全自定义...

  • Android 高德地图 自定义Location小蓝点

    设置自定义定位蓝点 自定义Location小蓝点,自定义功能

  • vue 有自定义指令

    vue 的自定义指令,分为全局自定义指令和局部自定义指令,局部自定义指令等价于局部组件。 自定义指令可以对DOM进...

  • Android相关知识点博客记录

    自定义属性 Android自定义View(二、深入解析自定义属性) Android中XML的命名空间、自定义属性 ...

  • CocoaLumberjack源码分析

    1.使用 自定义custom context,自定义flag 自定义日志的格式 自定义日志级别,取消DDLog实现...

  • Android View(转)

    自定义View的原理自定义View基础 - 最易懂的自定义View原理系列自定义View Measure过程 - ...

网友评论

      本文标题:自定义View-1Canvas

      本文链接:https://www.haomeiwen.com/subject/xsqiattx.html