酷狗音乐展示滚动歌词效果的控件实现

文章来自http://blog.csdn.net/zhaodecang

在音乐播放器项目中使用到酷狗音乐展示歌词的效果,需要支持修改字体、颜色、渐变色等功能

截图如下(效果不是很好,请下载Demo查看)

截图

歌词绘制流程核心代码如下(具体实现过程请看Github源码)

 

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    // 中心Y坐标
    float centerY = getHeight() / 2 + mTextSize / 2 + mAnimOffset;
    // 无歌词文件
    if (!hasLrc()) {
        float centerX = (getWidth() - mCurrentPaint.measureText(label)) / 2;
        canvas.drawText(label, centerX, centerY, mCurrentPaint);
        return;
    }
    // 画当前行
    String currStr = mLrcTexts.get(mCurrentLine);
    float currX = (getWidth() - mCurrentPaint.measureText(currStr)) / 2;
    canvas.drawText(currStr, currX, centerY, mCurrentPaint);
    // 画当前行上面的
    for (int i = mCurrentLine - 1; i >= 0; i--) {
        String upStr = mLrcTexts.get(i);
        float upX = (getWidth() - mNormalPaint.measureText(upStr)) / 2;
        float upY = centerY - (mTextSize + mDividerHeight) * (mCurrentLine - i);
        // 超出屏幕停止绘制
        if (upY - mTextSize < 0) {
            break;
        }
        canvas.drawText(upStr, upX, upY, mNormalPaint);
    }
    // 画当前行下面的
    for (int i = mCurrentLine + 1; i < mLrcTimes.size(); i++) {
        String downStr = mLrcTexts.get(i);
        float downX = (getWidth() - mNormalPaint.measureText(downStr)) / 2;
        float downY = centerY + (mTextSize + mDividerHeight) * (i - mCurrentLine);
        // 超出屏幕停止绘制
        if (downY > getHeight()) {
            break;
        }
        canvas.drawText(downStr, downX, downY, mNormalPaint);
    }
}

 

 

 


 

转载于:https://www.cnblogs.com/cangsir/p/6091735.html

本来在做项目,看到酷我音乐盒的歌词显示挺有趣的,模仿做了一个不完整的。 (只有滚动显示,没有节奏显示)。 原理: (1)定义一个派生自CStatic类的CKaraokeLyricCtrl类(歌词控件),自绘制风格 ; (2)准备一个背景位图(保存在CKaraokeLyricCtrl::m_dcBK中); (3)设置两个计数器(ID分别为1和2),启动自绘制,1用来显示节奏(未实现,只 有框架),2用来滚动歌词; (4)自绘制函数中,将绘制的滚动歌词和背景位图混合,然后输出到屏幕上。滚动 歌词的绘制使用GDI+的Graphics::DrawString函数,歌词文本的大小、位置、字体和 透明度均自动计算和变化,模仿酷我音乐盒的形式。 以上功能均封闭实现在CKaraokeLyricCtrl类中。该类可以直接使用(见下边的使用步骤)。 使用步骤: (1)CKaraokeLyric::InitInstance中启动GDI+; (2)在CKaraokeLyricView::OnInitialUpdate中,创建歌词控件 (CKaraokeLyricCtrl类),其大小和CKaraokeLyricView视图相同,即覆盖了后者; (3)在菜单项响应中,使用CKaraokeLyricCtrl::ReadLyric读取歌词文件,再使用 CKaraokeLyricCtrl::Start即可启动歌词滚动显示 未实现部分:(歌词的节拍显示) 虽然没有实现,但思路大致是:在后台先用另外一种颜色绘制当前突出显示的歌词(即字体最大的一行歌词),根据歌曲节奏,将还未唱出部分全部涂黑,然后和屏幕上的当前行突出歌词进行混合。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值