美文网首页
Canvas详解

Canvas详解

作者: Lucky胡 | 来源:发表于2019-11-07 15:21 被阅读0次

常用的api比如绘制、变换、状态保存和恢复。

1、绘制

        //绘图
        canvas?.drawBitmap()
        //绘制线段
        canvas?.drawLine()
        //绘制路径
        canvas?.drawPath()
        //绘制点
        canvas?.drawPoint()
        //绘制圆形
        canvas?.drawCircle()
        //绘制矩形
        canvas?.drawRect()

2、位置和形状变换

        //平移
        canvas.translate()
        //旋转
        canvas.rotate()
        //缩放
        canvas.scale()
        //倾斜
        canvas.skew()
        //切割
        canvas.clipXXX()
        //通过matrix来实现平移、旋转、缩放等操作
        canvas.setMatrix()

平移translate


        paint.color =Color.RED
        canvas?.drawRect(0f,0f,200f,200f,paint)
        canvas?.translate(100f,100f)
        paint.color = Color.BLACK
        canvas?.drawRect(0f,0f,200f,200f,paint)

canvas平移

缩放scale

        paint.color = Color.RED
        canvas?.drawRect(0f, 0f, 200f, 200f, paint)
        canvas?.scale(0.5f, 0.5f)
        paint.color = Color.BLACK
        canvas?.drawRect(0f, 0f, 200f, 200f, paint)
缩放scale

旋转rotate

        //旋转,旋转中心为canvas原点
        paint.color = Color.RED
        canvas?.drawRect(0f, 0f, 200f, 200f, paint)
        canvas?.rotate(45f)
        paint.color = Color.BLACK
        canvas?.drawRect(0f, 0f, 200f, 200f, paint)
旋转
        //旋转
        paint.color = Color.RED
        canvas?.drawRect(0f, 0f, 200f, 200f, paint)
        //将旋转圆心放在(100,100)
        canvas?.rotate(45f,100f,100f)
        paint.color = Color.BLACK
        canvas?.drawRect(0f, 0f, 200f, 200f, paint)

倾斜skew

        //倾斜
        paint.color = Color.RED
        canvas?.drawRect(0f, 0f, 200f, 200f, paint)
        canvas?.skew(1f,0f)
        paint.color = Color.BLACK
        canvas?.drawRect(0f, 0f, 200f, 200f, paint)
倾斜

切割clip

        paint.color = Color.RED
        canvas?.drawRect(0f, 0f, 200f, 200f, paint)
        //切割,画布被裁减,超出裁减区域就无法绘制了
        canvas?.clipRect(0f, 0f, 200f, 200f)
        paint.color = Color.BLACK
        canvas?.drawRect(100f, 100f, 200f, 200f, paint)
切割裁减
        //反向裁减,在这个区域内的就无法显示
        canvas?.clipOutRect(0f, 0f, 200f, 200f)

矩阵matrix

        var matrix = Matrix()
        matrix.setTranslate(50f,50f)
        matrix.setScale(0.5f,0.5f)
        matrix.setRotate(45f)
        canvas?.matrix = matrix
        canvas?.drawRect(0f,0f,100f,100f,paint)

3、状态保存和恢复

Canvas调用translate/rotate/scale等操作后,后续的操作都是基于变换后的canvas,很不方便。
canvas提供了save,saveLayer,saveLayerAlpha,restore,restoreToCount等用来保存和恢复状态。

        canvas?.drawRect(0f, 0f, 200f, 200f, paint)
        //在平移前,保存当前状态
        canvas?.save()

        canvas?.translate(100f, 100f)

        paint.color = Color.BLACK
        canvas?.drawRect(0f, 0f, 200f, 200f, paint)
        //恢复平移前的状态
        canvas?.restore()

        canvas?.drawRect(50f, 50f, 200f, 200f, paint)

save()、restore()可以多次使用,save()相当于把当前保存的状态入栈,restore()将状态出栈。

        canvas?.save()
        canvas?.saveCount
        canvas?.save()
        canvas?.saveCount
        canvas?.restore()
        canvas?.saveCount
        canvas?.restore()

也可以直接恢复到某次状态,将中间的状态全部移除出栈

        var state = canvas?.save()

        canvas?.restoreToCount(state!!)

还有saveLayer()方法

        var layId = canvas?.saveLayer(0f,0f,100f,100f,paint)
        //将这两个中间绘制的东西保存下来,然后在restoreToCount时一次性绘制到canvas上
        canvas?.drawRect(0f,0f,100f,100f,paint)
        //平移操作只在这个区域有用,在restoreToCount后又恢复
        canvas?.translate(100f,100f)
        
        canvas?.restoreToCount(layId!!)

相关文章

  • 自定义View的各个重要的类和属性

    1 、Path类详解 2、Paint详解 3、Canvas详解 4 、绘制雷达图

  • Android Canvas绘图

    Android Canvas绘图详解包括RectF,canvas.drawArc等,收藏.

  • Android自定义控件

    Android中Canvas绘图基础详解 Android Paint、Canvas、Matrix使用讲解(一、Pa...

  • canvas 手势控制

    基本介绍 关于 canvas 的基本使用,可以参考以下两个网站: Android Canvas绘图详解(图文) -...

  • Text绘制相关

    参考 Canvas DrawText详解TextView预渲染研究TextView源码解析

  • Android Canvas方法总结最全面详解API(二)

    本节引言: 本节继续带来Android绘图系列详解之Canvas API详解(Part 2),今天要讲解的是Can...

  • Canvas详解

    Canvas,称之为画布,在Android自定义view中十分重要,几乎所有的view都是在Canvas上进行绘制...

  • Canvas详解

    常用的api比如绘制、变换、状态保存和恢复。 1、绘制 2、位置和形状变换 平移translate 缩放scale...

  • Canvas详解

    标签用于绘制图像(通过脚本,通常是 JavaScript)。不过, 元素本身并没有绘制能力(它仅仅是图形的容器) ...

  • Canvas详解

    1.概念 画布,通过画笔绘制几何图形,文本,路径和位图等。 2.常用api 常用Api分为绘制,变换,状态保存和恢...

网友评论

      本文标题:Canvas详解

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