美文网首页
Canvas辅助类

Canvas辅助类

作者: jadefly | 来源:发表于2018-11-05 09:33 被阅读0次

    辅助类:范围裁切canvas.clipXXX,控制裁切范围,超出范围的会被裁切掉不绘制出来

                  几何变换Matrix,放大缩小、平移旋转、错切(想象成控制四个点任意拉扯,可用于3d绘制的模拟)


    范围裁切

    范围裁切有两个方法: clipRect() 和 clipPath()。裁切方法之后的绘制代码,都会被限制在裁切范围内。

    注:clipRegion()已废弃,clipRect和clipPath中自带参数Region.Op可控制

    Region:代表着区域,表示的是Canvas图层上的某一块封闭区域

    OP:裁剪区域的组合方式,枚举值,比如可以将两个区域相加,相减,并,异或等

    (以裁剪区域A和B为例):

    DIFFERENCE:A和B的差集范围,即A - B,只有在此范围内的绘制内容才会被显示;

    INTERSECT:即A和B的交集范围,只有在此范围内的绘制内容才会被显示

    UNION:即A和B的并集范围,即两者所包括的范围的绘制内容都会被显示;

    XOR:A和B的补集范围,此例中即A除去B以外的范围,只有在此范围内的绘制内容才会被显示;

    REVERSE_DIFFERENCE:B和A的差集范围,即B - A,只有在此范围内的绘制内容才会被显示;

    REPLACE:不论A和B的集合状况,B的范围将全部进行显示,如果和A有交集,则将覆盖A的交集范围;

    区域组合方式

    几何变换

    1.canvas二维变换

        平移

        translate(float dx, float dy):默认平移起点为坐标原点

        注:位移是基于当前位置移动,而不是每次基于屏幕左上角的(0,0)点移动

        旋转

        rotate(float degrees,float px, float py):默认旋转中心为坐标原点。degrees指旋转的角度,顺时针旋转;px,py为旋转中心

        缩放 

        scale(float sx, float sy, float px, float py):sx,sy 是横向和纵向的缩放倍数;px,py 是缩放中心(缩放中心轴即坐标轴)

    范围变化 例子

      错切/倾斜  

      skew(float sx, float sy):特殊类型的线性变换。变换后:X = x + sx * y,Y = sy * x + y

      参数:将画布在x轴/y轴方向上倾斜相应的角度,sx,sy为倾斜角度的tan值

       eg:skew(1.732,0) x方向上倾斜60度(tan60=1.732)

    例子

    2.Matrix二维变换

        同样针对Translate、Scale、Rotate、Skew等方法

        setXXX:首先会调用reset()重置矩阵,在设置对应变换

        preXXX:前乘=矩阵中的右乘(M’ = M*A)

        postXXX:后乘=矩阵中的左乘(M’ = A*M)

        Canvas.concat(matrix):将Matrix应用到Canvas,当前矩阵*matrix(即当前变换叠加新的变换)

        自定义变换:用点对点映射的方式设置变换(控制四个点变换达到任意扭曲的效果)

        Matrix.setPolyToPoly(float[] src, int srcIndex, float[] dst, int dstIndex, int pointCount) 

        参数:src,dst 是 源点集合 和 目标点集合

                   srcIndex 和 dstIndex 是第一个点的偏移

                   pointCount 是采集的点的个数(个数不能大于 4,因为大于 4 个点就无法计算变换了)

    3.Camera三维变换

    坐标系

        与canvas一样,camera也有状态保存和恢复:

        camera.save();// 保存 Camera 的状态

        camera.applyToCanvas(canvas);// 把旋转投影到 Canvas

        camera.restore();// 恢复 Camera 的状态

        Camera.rotate*() 三维旋转

        Camera.rotate*() 一共有四个方法: rotateX(deg) rotateY(deg) rotateZ(deg) rotate(x, y, z)

        Camera.translate(float x, float y, float z) 移动

        Camera.setLocation(x, y, z) 设置虚拟相机的位置(单位: inch英寸)

        相机的默认位置是 (0, 0, -8英寸),即(0, 0, -576像素),1:72

        一般只移动z轴,把相机往后移动,可以解决旋转糊脸的问题


    Layer图层

    简介:canvas图层采用栈管理,save()往栈压入一个Layer,restore()弹出栈顶的一个Layer,这个Layer代表Canvas的状态。

    save():保存的是整个Canvas;

    saveLayer():可以选择性的保存某个区域的状态;

    restoreToCount():恢复到指定的的Layer层,并将其上所有layer踢出栈,自身成为栈顶;

    快照与回滚

    相关文章

      网友评论

          本文标题:Canvas辅助类

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