以下为几何变换学习笔记，知识点都在注释里
/**
* 该事例主要用来学习范围裁切跟几何变换
* canvas的范围裁切 clipRectf
*
*/
private val IMAGE_WIDTH = 180f.dp
private val IMAGE_PADDING = 100f.dp
class CameraView(context: Context, attr: AttributeSet) : View(context, attr) {
private var paint = Paint(Paint.ANTI_ALIAS_FLAG)
private var path = Path().apply {
addOval(
IMAGE_PADDING,
IMAGE_PADDING,
IMAGE_PADDING + IMAGE_WIDTH,
IMAGE_PADDING + IMAGE_WIDTH, Path.Direction.CCW
)
}
private var camera = Camera()
init {
//直接旋转是行不通的，因为此时默认的轴心是在左上角0，0处
camera.rotateX(60f)
}
@RequiresApi(Build.VERSION_CODES.O)
override fun onDraw(canvas: Canvas) {
//定义切割矩形的坐标范围
// canvas.clipRect(
// IMAGE_PADDING,
// IMAGE_PADDING,
// IMAGE_PADDING + IMAGE_WIDTH / 3,
// IMAGE_PADDING + IMAGE_WIDTH / 3
// )
// //反向切割显示，跟canvas.clipRect刚好相反
// canvas.clipOutRect( IMAGE_PADDING,
// IMAGE_PADDING,
// IMAGE_PADDING + IMAGE_WIDTH / 3,
// IMAGE_PADDING + IMAGE_WIDTH / 3)
//这种方式可以切圆形，或者别的图形，但是会有毛边，也就是所谓的锯齿，使用Xfermode是没有毛边的
// canvas.clipPath(path)
// canvas.drawBitmap(getAvatar(IMAGE_WIDTH.toInt()), IMAGE_PADDING, IMAGE_PADDING, paint)
//canvas的几何变换，api本身很简单，但是如果多个变换组合情况下，坐标系一直在变动，容易混乱
//这里总结一个规律，如果是先变换后Draw的情况下，可以倒着写，这样不需要考虑坐标的问题
//需要牢记的是，几何变换变换的是canvas，也就是画布，而不是要画的图形在变换
// canvas.translate(100f, 100f)
// canvas.rotate(45f, IMAGE_PADDING + IMAGE_WIDTH / 2, IMAGE_PADDING + IMAGE_WIDTH / 2)
// canvas.drawBitmap(getAvatar(IMAGE_WIDTH.toInt()), IMAGE_PADDING, IMAGE_PADDING, paint)
// val matrix = Matrix()
//Matrix的几何变换，如果不想考虑几何变换中的坐标变换，可以用Matrix.post**对应的api
// matrix.postRotate()
// matrix.postTranslate()
//当然也支持canvas的规则，可以使用pre**对应的api
// matrix.preRotate()
// matrix.preTranslate()
//camera 观察点是在屏幕左上角（或者父view的坐标原点，但是会有一个z轴的高度，屏幕往里为正，靠近人眼为负），类比灯光照射物品的投影，观察点离物品越近，投影越大，并且不同像素手机上这个投影效果不太一样
//为了适配，使用setLocation 最后一个参数Z来设置这个观察点的距离，并且使用 resources.displayMetrics.density来适配这个Z的值
canvas.save()
camera.setLocation(0f, 0f, -8 * resources.displayMetrics.density)
//如果观察点在左边原点，会使view的轮廓拉伸，并且view离观察点的x y做标越远，拉伸越严重，所以需要把观察点的xy坐标设置为view的正中央，这样可以避免拉伸问题
//但是又因为观察点本身是没有api来设置坐标的，所以只能通过移动canvas来移动观察点
canvas.translate(IMAGE_PADDING + IMAGE_WIDTH / 2, IMAGE_PADDING + IMAGE_WIDTH / 2)
//camera.applyToCanvas(canvas)
canvas.rotate(-30f)
canvas.clipRect(
-IMAGE_WIDTH ,
-IMAGE_WIDTH ,
IMAGE_WIDTH,
0f
)
canvas.rotate(30f)
canvas.translate(-IMAGE_PADDING - IMAGE_WIDTH / 2, -IMAGE_PADDING - IMAGE_WIDTH / 2)
canvas.drawBitmap(getAvatar(IMAGE_WIDTH.toInt()), IMAGE_PADDING, IMAGE_PADDING, paint)
canvas.restore()
canvas.save()
camera.setLocation(0f, 0f, -8 * resources.displayMetrics.density)
canvas.translate(IMAGE_PADDING + IMAGE_WIDTH / 2, IMAGE_PADDING + IMAGE_WIDTH / 2)
canvas.rotate(-30f)
camera.applyToCanvas(canvas)
canvas.clipRect(
-IMAGE_WIDTH ,
0f,
IMAGE_WIDTH ,
IMAGE_WIDTH
)
canvas.rotate(30f)
canvas.translate(-IMAGE_PADDING - IMAGE_WIDTH / 2, -IMAGE_PADDING - IMAGE_WIDTH / 2)
canvas.drawBitmap(getAvatar(IMAGE_WIDTH.toInt()), IMAGE_PADDING, IMAGE_PADDING, paint)
canvas.restore()
}
fun getAvatar(width: Int): Bitmap {
val options = BitmapFactory.Options()
options.inJustDecodeBounds = true
BitmapFactory.decodeResource(resources, R.drawable.image_header, options)
options.inJustDecodeBounds = false
options.inDensity = options.outWidth
options.inTargetDensity = width
return BitmapFactory.decodeResource(resources, R.drawable.image_header, options)
}
以上最终实现为一个简单的折纸效果，从右上到左下折一半，效果如下：
Snipaste_2022-05-12_23-26-43.png
另外一个事例关键代码为：
canvas.save()
camera.setLocation(0f, 0f, -8 * resources.displayMetrics.density)
canvas.translate(IMAGE_PADDING + IMAGE_WIDTH / 2, IMAGE_PADDING + IMAGE_WIDTH / 2)
canvas.clipRect(
-IMAGE_WIDTH ,
-IMAGE_WIDTH ,
IMAGE_WIDTH,
0f
)
canvas.translate(-IMAGE_PADDING - IMAGE_WIDTH / 2, -IMAGE_PADDING - IMAGE_WIDTH / 2)
canvas.drawBitmap(getAvatar(IMAGE_WIDTH.toInt()), IMAGE_PADDING, IMAGE_PADDING, paint)
canvas.restore()
canvas.save()
camera.setLocation(0f, 0f, -8 * resources.displayMetrics.density)
canvas.translate(IMAGE_PADDING + IMAGE_WIDTH / 2, IMAGE_PADDING + IMAGE_WIDTH / 2)
camera.applyToCanvas(canvas)
canvas.clipRect(
-IMAGE_WIDTH ,
0f,
IMAGE_WIDTH ,
IMAGE_WIDTH
)
canvas.translate(-IMAGE_PADDING - IMAGE_WIDTH / 2, -IMAGE_PADDING - IMAGE_WIDTH / 2)
canvas.drawBitmap(getAvatar(IMAGE_WIDTH.toInt()), IMAGE_PADDING, IMAGE_PADDING, paint)
canvas.restore()
实现效果如下：
Snipaste_2022-05-12_23-30-36.png
