Android用Canvas画一个真正能跑的跑马灯

简介: 这是一篇关于使用Canvas实现跑马灯效果的技术分享。作者通过一个简单的Demo,展示了如何利用Android的Canvas绘制动态跑马灯。核心思路是通过开启耗时线程让彩色背景旋转,结合坐标计算、渐变色绘制和旋转动画,最终实现动态视觉效果。代码分为三个主要部分:1) 计算View宽高与矩形坐标;2) 绘制背景、跑马灯及幕布;3) 设置旋转逻辑并反向调整幕布。文末附有完整Java代码及XML调用示例,适合初学者学习Canvas绘图原理。

以前自学,都是用帧动画来实现跑马灯,这几天常失眠,晚上学东西也学不进,所以用Canvas写个小Demo,这么无聊的应该只有我一个了吧,废话不多说,下面上内容。

老规矩,最后有源码
效果图如下:
1.gif

上代码前先介绍下手机坐标系,如下图

2.png

然后是绘制草图,如下:

3.png

大概思路为,开一个耗时线程使彩色背景旋转,来达到跑马灯的效果。

核心:
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"/>

4.png

相关文章
|
4月前
|
前端开发 数据可视化 Java
Android用Canvas画一个折线图,并加以简单封装
本文介绍了如何用Java绘制动态折线图,从固定折线图的实现到封装成可复用的组件。首先通过绘制XY坐标轴、添加坐标标签和绘制折线及数据点完成基础折线图。接着,将静态数据替换为动态输入,支持自定义X轴、Y轴和折线数据。代码中包含关键方法如`drawDaxes`(绘制坐标轴)、`drawAxispoint`(绘制坐标点)和`drawbrokenLine`(绘制折线)。最终实现可根据传入数据动态生成折线图,适用于Android开发中的数据可视化场景。
150 0
|
4月前
|
Java Android开发
Android跑马灯的简单实现方式
本文介绍两种在Android中实现跑马灯效果的方法。第一种适用于从右至左滚动,要求字体长度超过控件长度,通过设置特定属性实现。第二种使用定时器调整padding值,实现更灵活的滚动方向。
218 19
|
前端开发 API Android开发
Android自定义View之Canvas一文搞定
这篇文章介绍了Android自定义View中如何使用Canvas和Paint来绘制图形。Canvas可理解为画布,用于绘制各种形状如文字、点、线、矩形、圆角矩形、圆和弧。常见API包括`drawText()`、`drawPoint()`、`drawLine()`、`drawRect()`等。文章还提到了Canvas的保存、恢复、平移和旋转方法,通过绘制钟表盘的例子展示了如何实际应用。总结关键点:Canvas与Paint结合用于图像绘制,掌握Canvas的基本绘图函数及坐标变换操作是自定义View的关键。
320 0
Android自定义View之Canvas一文搞定
|
前端开发 Android开发
Android 中使用Canvas绘制文字和矩形,将结果呈现在Bitmap上
Android 中使用Canvas绘制文字和矩形,将结果呈现在Bitmap上
340 0
|
前端开发 Android开发
Android Canvas之Path操作
Android Canvas之Path操作
412 0
|
前端开发 Android开发 Python
|
前端开发 Android开发 图形学
Android自定义View工具:Paint&Canvas(一)
本文主要讲的是自定义View时我们经常用到的Canvas和Paint,像平时画画一样,我们需要画布和画笔,而Canvas就是画布,Paint就是画笔
164 0
|
Java Maven Android开发
Android文字轮播~可垂直可水平跑马灯
Android文字轮播~可垂直可水平跑马灯
Android文字轮播~可垂直可水平跑马灯
|
前端开发 Android开发
|
Android开发
Android TextView跑马灯效果
Android TextView跑马灯效果
266 0

热门文章

最新文章