Android用Canvas画一个真正能跑的跑马灯
Android用Canvas画一个真正能跑的跑马灯
计蒙不吃鱼
发布于 2025-06-12 15:53:51
发布于 2025-06-12 15:53:51
代码可运行
运行总次数：0
代码可运行
以前自学，都是用帧动画来实现跑马灯，这几天常失眠，晚上学东西也学不进，所以用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"/>
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2025-06-03，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
