Android ”甄姬拔菜“ 自定义控件的实现

先看一下效果图:

Android ”甄姬拔菜“ 自定义控件的实现_第1张图片
Android ”甄姬拔菜“ 自定义控件的实现_第2张图片

从图中可以看到:

  • 这个 view 它可以旋转,但是无论怎么旋转,文字的方向一直不变,只是位置会随着整体的旋转而改变。
  • 在旋转过程中,4个字”甄姬ba“
  • 这个 view 上面的 文字跟所在的圆圈是不相交的,圆圈会被文字给打断。

效果看到之后,再思考一下怎么实现

实现思路:

  • 将中间的图片,四周的文字,圆圈分开,当场三个独立的个体
  • 图片就是正常的旋转即可;
  • 文字并不是旋转,而是根据整体的旋转角度去调整其摆放的位置。
  • 圆圈不是一个完整的圆,要给文字所在区域留白。

相关API:

  • canvas 可以通过 save(); / restore(); 去分别管理不同的图层。所以可以将图片,文字及圆圈分别放到不同的图层上面去绘制。
  • canvas 可以通过 clipOutPath / clipOutRect 等相关的 clipOut系列函数去移除不需要绘制的部分。
  • 文字的位置,以及所占用的区域需要精准的测量。通过 Paint.measureText(); / Paint.FontMetrics.descent && Paint.FontMetrics.ascent

ok, 前期准备完毕。

后面是代码实现:RotateView

你可能感兴趣的:(android)