如果我们需要绘制一个时钟,并且时钟有60个刻度,那么要怎么办?如果不知道通过变化坐标轴的方法,那么可能就要傻傻的canvas.drawLine…60次了。。。
我们知道view的坐标轴是在view的左上角,向右为x正,向下为y正。我们在不改变坐标轴的情况下绘制内容,就是相对的这个左上角的点了。但是Canvas对象提供了位移、缩放、旋转等API来修改view的坐标原点。
比如我们要绘制一组同心矩形。那我们就可以使用Canvas的缩放坐标轴来实现了。
for (int i = 0; i< 10 ;i++){
canvas.drawRect(0,0,100,100,paint);
canvas.scale(0.9f,0.9f,50,50);//以矩形中心点为原定,缩小为原来的0.9倍
}
这样就能连续绘制 10 个,中心位置一致,大小依次缩小的矩形了
那么有12个刻度的时钟也是这个原理了,先绘制12点的竖直刻度,然后rotate坐标轴30°(360/12=30),在绘制一次12点的竖直刻度就行了
canvas.save();
canvas.drawCircle(100,100,100,paint);
for(int i = 0 ; i < 12 ; i++){
canvas.drawLine(100,0,100,30,paint);
canvas.rotate(30,100,100);
}
canvas.restore();
这里还有一对 canvas.save(); 和 canvas.restore(); 这是指保存 和 恢复坐标轴的状态,在操作坐标轴的时候很有用,我们在操作之前先save下,做完相关操作,在restore,这样坐标抽就能恢复到常规状态,不然经过多次变化,我们自己都可能蒙了,现在坐标轴到底是什么状态。
Canvas的 save与restore 是成对出现的,restore会将坐标轴恢复到save时的状态
坐标轴经过变化后,如果不恢复,后续所有的绘制操作都是相对变化后的坐标轴
绘制出来的时钟效果如下:
DONE
此系列后续持续更新。