Canvas里的很多方法都会涉及到一个RectF。Rect是Rectangular的缩写,是矩形的意思。
Path的addArc方法,参数如下:
public void addArc(@NonNull RectF oval, float startAngle, float sweepAngle)
意思是传入一个矩形oval,并且以startAngle为初始角度,画一个弧度为sweepAngle的矩形内切椭圆形区域。(可能表述不是很恰当,但大致是这么个意思)
抽奖转盘
1.找UI设计一个划分好抽奖区域的圆形转盘图片(比如说8分区)和中间的抽奖按钮指针icon。
2.在圆形抽奖转盘上用Canvas的drawTextOnPath方法画上文案,根据每段圆弧Path长度和文案长度,计算出X方向的偏移量,保证文案居中。
3.点击抽奖按钮指针,开始圆形转盘转动动画。
重写的自定义圆形转盘View的onDraw方法:
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
float r = getWidth() * 0.35f;
float startX = getWidth() * 0.15f;
float endX = getWidth() * 0.85f;
float arcLen = r * 3.14f / 4; //每段弧度的长度
mRectF.set(startX, startX, endX, endX);
for (int i = 0, len = rotaryInfoList.size(); i < len; i++) {
RotaryInfoResponse.DataBean data = rotaryInfoList.get(i);
Log.d("franco", "getPrizeName = " + data.getPrizeName());
Rect bounds = new Rect();
mTextPainter.getTextBounds(data.getPrizeName(), 0, data.getPrizeName().length(), bounds);
int textWidth = bounds.right - bounds.left; //文案长度
Log.d("franco", "textWidth = " + textWidth);
Path path = new Path();
path.addArc(mRectF, 270 - 45 * (i + 1), 45); //创建一段圆弧Path,然后沿着圆弧Path画上文案
canvas.drawTextOnPath(data.getPrizeName(), path, (arcLen - textWidth)/ 2.0f, 0, mTextPainter); //x方向有一段偏移量,保证文案居中
}
}
网友评论