我要评论前言
以前自学，都是用帧动画来实现跑马灯，这几天常失眠，晚上学东西也学不进，所以用canvas写个小demo，这么无聊的应该只有我一个了吧，废话不多说，下面上内容。
老规矩，最后有源码
效果图如下：
上代码前先介绍下手机坐标系，如下图
然后是绘制草图，如下：
大概思路为，开一个耗时线程使彩色背景旋转，来达到跑马灯的效果。
核心：
1.计算出view宽高，矩形宽高，从而算出矩形的坐标点。
int canvaswidth = canvas.getwidth(); //画布宽度
int canvasheight = canvas.getheight(); //画布高度
int canvansmax= (int) math.sqrt(math.pow(canvaswidth/2,2)+math.pow(canvasheight/2,2))+1; //正方形宽高的一半2.绘制背景，跑马灯，幕布
//开始绘制底层背景
p.setcolor(color.white);
rectf oval2 = new rectf(0, 0, canvaswidth, canvasheight);// 设置个新的长方形，扫描测量
canvas.drawrect(oval2,p);
//开始绘制跑马灯
paint p1=new paint(p);
shader mshader = new lineargradient(canvaswidth/2-canvansmax,canvasheight/2-canvansmax , 2*canvansmax, 2*canvansmax,
new int[] { color.red, color.green,color.cyan,color.magenta,color.gray,color.blue,color.yellow,color.red, color.green,color.cyan,color.magenta,color.gray,color.blue,color.yellow}, null, shader.tilemode.repeat);
p1.setshader(mshader);
rectf oval = new rectf(canvaswidth/2-canvansmax,canvasheight/2-canvansmax , 2*canvansmax, 2*canvansmax);// 设置个新的长方形
canvas.drawrect(oval,p1);
//绘制幕布
paint p2=new paint();
p2.setcolor(color.black);
rectf oval3 = new rectf(30, 30, canvaswidth-30, canvasheight-30);// 设置个新的长方形，扫描测量
canvas.drawrect(oval3,p2);3.找到旋转的依靠，并开启一个耗时任务。
private calendar mcalendar; // 时间对象
public static final int start_clock = 1000;// 开启时钟的标识
handler mhandler = new handler() {
public void handlemessage(android.os.message msg) {
switch (msg.what) {
case drawview.start_clock:
mcalendar = mcalendar.getinstance();
invalidate();
sendemptymessagedelayed(drawview.start_clock, 10);
break;
case drawview.stop_clock:
break;
default:
break;
}
}
};4.设置彩色正方形旋转
canvas.rotate(sec*100,canvaswidth/2,canvasheight/2);
5.将幕布按照彩色正方形反向旋转（不设置则跟着正方形一起旋转）；
canvas.rotate(-sec*100,canvaswidth/2,canvasheight/2);
源码如下：1.完整java文件
public class marqueeview extends view {
private calendar mcalendar; // 时间对象
public static final int start_clock = 1000;// 开启时钟的标识
handler mhandler = new handler() {
public void handlemessage(android.os.message msg) {
switch (msg.what) {
case drawview.start_clock:
mcalendar = mcalendar.getinstance();
invalidate();
sendemptymessagedelayed(drawview.start_clock, 10);
break;
case drawview.stop_clock:
break;
default:
break;
}
}
};
public marqueeview(context context) {
super(context);
}
public marqueeview(context context, @nullable attributeset attrs) {
super(context, attrs);
mcalendar = mcalendar.getinstance();
if (mcalendar == null) {
mcalendar = mcalendar.getinstance();
}
mhandler.sendemptymessage(start_clock);
}
@override
protected void ondraw(canvas canvas) {
super.ondraw(canvas);
drawaxis(canvas);
}
//绘制
private void drawaxis(canvas canvas){
paint p=new paint();
int canvaswidth = canvas.getwidth(); //画布宽度
int canvasheight = canvas.getheight(); //画布高度
int canvansmax= (int) math.sqrt(math.pow(canvaswidth/2,2)+math.pow(canvasheight/2,2))+1; //正方形宽高的一半
int sec = mcalendar.get(calendar.second);//得到当前秒数
//开始绘制底层背景
p.setcolor(color.white);
rectf oval2 = new rectf(0, 0, canvaswidth, canvasheight);// 设置个新的长方形，扫描测量
canvas.drawrect(oval2,p);
canvas.rotate(sec*100,canvaswidth/2,canvasheight/2);
//开始绘制跑马灯
paint p1=new paint(p);
shader mshader = new lineargradient(canvaswidth/2-canvansmax,canvasheight/2-canvansmax , 2*canvansmax, 2*canvansmax,
new int[] { color.red, color.green,color.cyan,color.magenta,color.gray,color.blue,color.yellow,color.red, color.green,color.cyan,color.magenta,color.gray,color.blue,color.yellow}, null, shader.tilemode.repeat);
p1.setshader(mshader);
rectf oval = new rectf(canvaswidth/2-canvansmax,canvasheight/2-canvansmax , 2*canvansmax, 2*canvansmax);// 设置个新的长方形，扫描测量
canvas.drawrect(oval,p1);
//绘制幕布
paint p2=new paint();
canvas.rotate(-sec*100,canvaswidth/2,canvasheight/2);
p2.setcolor(color.black);
rectf oval3 = new rectf(30, 30, canvaswidth-30, canvasheight-30);// 设置个新的长方形，扫描测量
canvas.drawrect(oval3,p2);
}
}2.xml中调用
<com................marqueeview
android:layout_width="match_parent"
android:layout_height="match_parent"/>
总结
到此这篇关于android如何用canvas画一个真正能跑的跑马灯的文章就介绍到这了,更多相关android用canvas画跑马灯内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论