Canvas详解

2019-11-07  本文已影响0人  Lucky胡

常用的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!!)
上一篇下一篇

猜你喜欢

热点阅读