美文网首页
关于canvas那些事儿

关于canvas那些事儿

作者: most_xiaoya | 来源:发表于2018-10-30 12:58 被阅读0次

    实现自定义控件,无非分成这么几步:

      Ⅰ、在OnMeasure()方法中,测量自定义控件的大小,使自定义控件能够自适应布局各种各样的需求。

      Ⅱ、在OnDraw()方法中,利用哼哈二将(Canvas与Paint)来绘制要显示的内容。

      Ⅲ、在OnLayout()方法中来确定控件显示位置。

      Ⅳ、在OnTouchEvent()方法处理控件的触摸事件。


    今天我们主要了解OnDraw()方法。onDraw()方法绘制的关键是canvas的使用:

    1) Canvas 的绘制类方法: drawXXX() (关键参数:Paint)

    2)Canvas 的辅助类方法:范围裁切和几何变换

    对于绘制中的关键参数Paint, 有几个最常用的方法。具体是: 

           Paint.setStyle(Style style) 设置绘制模式

           Paint.setColor(int color) 设置颜色

           Paint.setStrokeWidth(float width) 设置线条宽度

           Paint.setTextSize(float textSize) 设置文字大小

           Paint.setAntiAlias(boolean aa) 设置抗锯齿开关

    剩下的便是结合Paint 在ondraw方法中各种drawXXX() ,具体的有:

    1)canvas.drawColor :画背景色;

    2)drawLine(float startX, float startY, float stopX, float stopY, Paint paint) 画线

         drawLines(float[] pts, int offset, int count, Paint paint) / drawLines(float[] pts, Paint paint) 画线(批量)

          drawLines() 是 drawLine() 的复数版。

    3)drawCircle(float centerX, float centerY, float radius, Paint paint) 画圆

    4)drawRect(float left, float top, float right, float bottom, Paint paint) 画矩形

    5)drawPoint(float x, float y, Paint paint) 画点;

         drawPoints(float[] pts, int offset, int count, Paint paint) / drawPoints(float[] pts, Paint paint) 画点(批量)

    6)drawOval(float left, float top, float right, float bottom, Paint paint) 画椭圆

    7)  drawRoundRect(float left, float top, float right, float bottom, float rx, float ry, Paint paint) 画圆角矩形

    8)  drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean useCenter, Paint paint) 绘制弧形或扇形

    9)  drawPath(Path path, Paint paint) 画自定义图形

          Path 可以描述直线、二次曲线、三次曲线、圆、椭圆、弧形、矩形、圆角矩形。把这些图形结合起来,就可以描述出很多复杂的图形。

          Path 有两类方法,一类是直接描述路径的,另一类是辅助的设置或计算。

           Path 方法第一类:直接描述路径

                第一组: addXxx() ——添加子图形

                   首先 path. addCircle(float x, float y, float radius, Direction dir) 添加圆等各种

                    然后就是canvas.drawPath(path, paint);

                   其他的 Path.add-() 方法和这类似,例如:

                   addOval(float left, float top, float right, float bottom, Direction dir) / addOval(RectF oval, Direction dir) 添加椭圆

                   addRect(float left, float top, float right, float bottom, Direction dir) / addRect(RectF rect, Direction dir) 添加矩形

                    addRoundRect(RectF rect, float rx, float ry, Direction dir) / addRoundRect(float left, float top, float right, float bottom, float rx, float ry, Direction dir) / addRoundRect(RectF rect, float[] radii, Direction dir) / addRoundRect(float left, float top, float right, float bottom, float[] radii, Direction dir) 添加圆角矩形

                     addPath(Path path) 添加另一个 Path

                第二组:xxxTo() ——画线(直线或曲线)

                       lineTo(float x, float y) / rLineTo(float x, float y) 画直线

                       quadTo(float x1, float y1, float x2, float y2) / rQuadTo(float dx1, float dy1, float dx2, float dy2) 画二次贝塞尔曲线

                         cubicTo(float x1, float y1, float x2, float y2, float x3, float y3) / rCubicTo(float x1, float y1, float x2, float y2, float x3, float y3) 画三次贝塞尔曲线

                           moveTo(float x, float y) / rMoveTo(float x, float y) 移动到目标位置

                      另外,第二组还有两个特殊的方法: arcTo() 和 addArc()。它们也是用来画线的,但并不使用当前位置作为弧线的起点。

                       arcTo(RectF oval, float startAngle, float sweepAngle, boolean forceMoveTo) / arcTo(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean forceMoveTo) / arcTo(RectF oval, float startAngle, float sweepAngle) 画弧形

                  这个方法和 Canvas.drawArc() 比起来,少了一个参数 useCenter,而多了一个参数 forceMoveTo 。

                    少了 useCenter ,是因为 arcTo() 只用来画弧形而不画扇形,所以不再需要 useCenter 参数;而多出来的这个 forceMoveTo 参数的意思是,绘制是要「抬一下笔移动过去」,还是「直接拖着笔过去」,区别在于是否留下移动的痕迹。

                     addArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle) / addArc(RectF oval, float startAngle, float sweepAngle)

                     close() 封闭当前子图形:作用是把当前的子图形封闭,即由当前位置向当前子图形的起点绘制一条直线。

        Path 方法第二类:辅助的设置或计算

            Path.setFillType(Path.FillType ft) 设置图形自相交时的填充算法 FillType 的取值有四个:

                    EVEN_ODD

                    WINDING (默认值)

                    INVERSE_EVEN_ODD

                    INVERSE_WINDING

               后面两种是前面两种的反转类型。

    10)drawBitmap(Bitmap bitmap, float left, float top, Paint paint) 画 Bitmap

    11)drawText(String text, float x, float y, Paint paint) 绘制文字

    参考文献:https://hencoder.com/ui-1-1/    谢谢凯哥。 

    相关文章

      网友评论

          本文标题:关于canvas那些事儿

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