美文网首页
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!!)
    

    相关文章

      网友评论

          本文标题:Canvas详解

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