canvas应用之各种游戏转盘
转盘的画法网上有很多,好多都是H5或CSS方式实现的,我这里是Android中实现方式,也算是多种转盘形式集合吧,对canvas的绘制能力的提高会有一定的帮助。先来看下有关绘制过程中重要参数等的个人理解:
radian :弧度
angle :角度
所以由角度变成弧度,再变成余弦值:
double radians = Math.toRadians(30 + startAngle);
float cos = (float) (Math.cos(radians) * r + r);
也就是:double cos = (Math.cos(Math.toRadians(startAngle);
注意:只有变为弧度后才能使用Math.cos(),求余弦值,切记,切记;
还有手机屏幕坐标系与数学坐标系是不同的哦:
RectF rectF = new RectF(float left, float top, float right, float bottom);
rectF中的参数理解:左:左边线的X坐标值;上:上边线的Y坐标值;右:右边线的X坐标值;下:下边线的Y坐标值;
扇形圆弧的绘制:
canvas.drawArc(RectF rectF, float startAngle, float sweepAngle, boolean useCenter,Paint paint);
其会根据rectF中给的四个坐标,自动确定圆心点坐标,然后再根据 startAngle设置弧线的起始线位置, startAngle=0起点是x轴正方向,sweepAngle是绘制弧线的角度,若sweepAngle为正则逆时针绘制弧线,sweepAngle为负数则顺时针绘制弧线(注意使用数学极坐标方式),useCenter表示是否使用中心;
angle :角度
所以由角度变成弧度,再变成余弦值:
double radians = Math.toRadians(30 + startAngle);
float cos = (float) (Math.cos(radians) * r + r);
也就是:double cos = (Math.cos(Math.toRadians(startAngle);
注意:只有变为弧度后才能使用Math.cos(),求余弦值,切记,切记;
还有手机屏幕坐标系与数学坐标系是不同的哦:
0--------------------------->X轴
| 1 2 3 4
|1
|
| 坐标一区
|2
|
|3
|
V
Y轴
RectF rectF = new RectF(float left, float top, float right, float bottom);
rectF中的参数理解:左:左边线的X坐标值;上:上边线的Y坐标值;右:右边线的X坐标值;下:下边线的Y坐标值;
扇形圆弧的绘制:
canvas.drawArc(RectF rectF, float startAngle, float sweepAngle, boolean useCenter,Paint paint);
其会根据rectF中给的四个坐标,自动确定圆心点坐标,然后再根据 startAngle设置弧线的起始线位置, startAngle=0起点是x轴正方向,sweepAngle是绘制弧线的角度,若sweepAngle为正则逆时针绘制弧线,sweepAngle为负数则顺时针绘制弧线(注意使用数学极坐标方式),useCenter表示是否使用中心;
Paint字体属性的设置
方法
:
Typeface font = Typeface.create(Typeface.SANS_SERIF, Typeface.BOLD);
p.setTypeface( font );
p.setTypeface( font );
对paint等的理解:
mCanvas.drawText(char[] text, int index, int count, float x, float y,Paint paint)中,paint绘制的文字都是冲上的(文字竖直),无论你无论你是上下或是斜着写,所绘制的单个文字都是冲上的;
而mCanvas.drawTextOnPath(@NonNull String text, @NonNull Path path, float hOffset,float vOffset, @NonNull Paint paint);文字会根据路径path的绘制方向,而随之改变文字的显示方向;hOffset表示"path的前端"处空出来的空间大小(值为正则增大间隙空间,负值则反向减小空间),vOffset表示"path垂直"方向偏移的大小(正值向内偏移,负值向外偏移);
对于旋转绘制问题,有两种方式:
方式一:
mCanvas.drawText(@NonNull String text, float x, float y, @NonNull Paint paint);
mCanvas.rotate(everyAngle ,r,r); //替换方式1:
而mCanvas.drawTextOnPath(@NonNull String text, @NonNull Path path, float hOffset,float vOffset, @NonNull Paint paint);文字会根据路径path的绘制方向,而随之改变文字的显示方向;hOffset表示"path的前端"处空出来的空间大小(值为正则增大间隙空间,负值则反向减小空间),vOffset表示"path垂直"方向偏移的大小(正值向内偏移,负值向外偏移);
对于旋转绘制问题,有两种方式:
方式一:
mCanvas.drawText(@NonNull String text, float x, float y, @NonNull Paint paint);
mCanvas.rotate(everyAngle ,r,r); //替换方式1: