自定义View使用-Canvas,path,paint使用教程

版权声明:转载请注明本文链接 https://blog.csdn.net/qq_31844349/article/details/80338122

期待自定义控件好久了吧,为了以后学习自定义View,今天先来点简单的。

今天我们的教程先讲点简单的学习自定义View之前的基础。

一、我们想创建一个名字为CustomView的类继承View,实现两个方法,就想这样:


再来说下这两个方法的作用:

CustomView(Context context) 这个构造放大的作用是使用Java代码来显示这个控件,比如:TextView text = new TextView(this);这种方式。
CustomView(Context context, @Nullable AttributeSet attrs)

这个是构造方法的作用是使用XML来显示控件,就是我们在XML中显示TextView的那种方式

说完了实现类,下一步我们该使用代码来说下我们在自定义View最基础的几个绘画功能:

    1、先来说下自定义View除了构造方法另外几个必须用到的方法的名字及作用: 

onDraw(Canvas canvas) 这个方法的功能主要是绘画控件
onSizeChanged(int w, int h, int oldw, int oldh) 这个方法的功能是用于计算
onMeasure(int widthMeasureSpec, int heightMeasureSpec) 这个方法的功能是用于测量

    2、画笔(Paint)的三个样式:

FILL 填充
STROKE 描边
FILL_AND_STROKE 填充和描边
        画笔的常用的方法:  
setColor(Color.BLUE)   Color.颜色英文单词 设置画笔颜色
setStyle(Paint.style.XXX) 设置画笔的样式
setStrokeWidth(x) x为画笔粗细的值 设置画笔宽度
setShadowLayer(角度,x,y,颜色) 设置阴影
setAntiAlias(bool) true为抗锯齿,flash为不抗锯齿 设置是否抗锯齿

    3、画布(Canvas)的画图方法:    

drawLine(x起始位置,y的起始位置,x的结束位置,y的结束位置) 画直线
drawRect(左,上,右,下) 画矩形
drawCircle(x,y,半径,画笔);这里的xy坐标指的是圆心 画圆形
drawArc(RectF,起始角度,结束角度,是否有圆中心线,画笔); 这里的RectF是画矩形范围这里的F指的是双精度 画弧
drawText(想要显示的文字,绘制文字在矩形的相对位置,基线,画笔) 画文字

drawColor(Color.颜色的英文单词)

设置背景

drawRGB(颜色的数值) 设置背景
4、(Path)描点连线

    path的几个常用的方法:

lineTo(x,y) 画一条线到x,y坐标,如果这里没有使用moveTo来移动画笔,则默认的起始点是(0,0)
moveTo(x,y) 移动画笔到指定(x,y)位置

这里需要解释下lineTo,在我们使用lineTo画了一条线,如果我们还要接着画一条线就可以直接使用lineTo来画就可以了,这是如果是想换个位置画线则需要使用moveTo来移动画笔的位置来画线。

drawTextOnPath(显示的文字,path,偏移X,偏移Y,画笔) 使文字根据画线的路径来展示

二、既然相关的方法展示完了,那么就来看下这些方法如何使用:

    2.1、设置画笔参数:


    注:在我们开始画图形的时候一定要在onDraw方法中写代码

    2.2、画线条

   代码解释:起始x位置和起始Y位置都是0,结束x位置和结束y位置分别是400,500,使用的画笔就是我们上面定义的话比paint,注意这里创建的画笔一定要是全局变量 ,看下效果:


        2.3、画矩形


    代码官方解释:


       效果图:

这里的因为我的画笔的样式是描边所以这里只有一个边框,大家可以试着把画笔的样式修改成填充试试效果

    2.4、画圆形

    

    代码解释,每个@符分别对应相应的参数:

  效果图:


        2.5、画弧


代码解释,每个@对应一个参数,这里的rect是需要话的一个范围:


效果图:


    2.6、画字


代码解释:


效果图:


    2.7、使用Path来画线


这里需要解释下,我上面说过moveTo是移动画笔,这里我把画笔移动到了50.50的位置开始画线,下面的lineTo(300,300)是画线的终点。

注:这里必须要说明下,在使用path操作的过程中,最后必须 画布.drawPath(path,画笔),如:

    

效果图:


    2.8、根据画线的路径来画字,上面那我们的path已经把线画出来了,这里我就不写画线的教程了


代码解释,每个@对应一个参数:


效果图:


猜你喜欢

转载自blog.csdn.net/qq_31844349/article/details/80338122