范围裁切和⼏何变换

type

status

date

slug

summary

Canvas 的范围裁切

clipRect()

clipPath()

💡

clipPath() 切出来的圆为什么没有抗锯⻮效果？因为「强⾏切边」而 Xfermode 是额外通过算法，在裁剪处做了算法模糊处理，看起来更加平滑，就没有毛边了。

clipOutRect() / clipOutPath()

Canvas 的⼏何变换

translate(x, y)

rotate(degree)

scale(x, y)

skew(x, y)

save():Int 保存一下当前 Canvas 坐标系的位置

restore() / restoreToCount(Int) 恢复 Canvas 坐标系到上次的的位置或指定的位置

重点：Canvas 的⼏何变换⽅法参照的是 View 的坐标系，⽽绘制⽅法（drawXxx()）参照的是 Canvas ⾃⼰的坐标系。

💡

关于多重变换：

Canvas 的变换⽅法多次调⽤的时候，由于 Canvas 的坐标系会整体被变换，因此当平移、旋转、放缩、错切等变换多重存在的时候，Canvas 的变换参数会⾮常难以计算，因此可以改⽤倒序的理解⽅式：将 Canvas 的变换理解为 Canvas 的坐标系不变，每次变换是只对内部的绘制内容进⾏变换，同时把 Canvas 的变换顺序看作是倒序的（即写在下⾯的变换先执⾏），可以更加⽅便进⾏多重变换的参数计算。

Matrix 的⼏何变换

preTranslate(x, y) / postTranslate(x, y)

preRotate(degree) / postRotate(degree)

preScale(x, y) / postScale(x, y)

preSkew(x, y) / postSkew(x, y)

其中 preXxx() 效果和 Canvas 的准同名⽅法相同， postXxx() 效果和 Canvas 的准同名⽅法顺序相反。

💡

注意如果多次绘制时重复使⽤ Matrix，在使⽤之前需要⽤ Matrix.reset() 来把 Matrix 重置。

使⽤ Camera 做三维旋转

注意计算中，三维坐标系和二维坐标系又不相同

rotate() / rotateX() / rotateY() / rotateZ()

translate()

setLocation()

save() 保存 Camera 当前的位置

restore() 恢复 Camera 到上次保存的位置

其中，⼀般只⽤ rotateX() 和 rorateY() 来做沿 x 轴或 y 轴的旋转，以及使⽤ setLocation() 来调整放缩的视觉幅度。

💡

setLocation 参数的单位默认是 8英寸（这里的英寸是概念，不是距离中的英寸，1英寸 = 72像素）默认 camera 的 location 的位置是（x = 0英寸，y = 0英寸，z = -8英寸）

对 Camera 变换之后，要⽤ Camera.applyToCanvas(Canvas) 来应⽤到 Canvas。

setLocation()

这个⽅法⼀般前两个参数都填 0，第三个参数为负值。由于这个值的单位是硬编码写死的，因此像素密度越⾼的⼿机，相当于 Camera 距离 View 越近，所以最好把这个值写成与机器的 density 成正⽐的⼀个负值，例如 -6 * resources.displayMetrics.density。