在上一篇文章寫了個高仿WIN10系統的光暈日歷,這次來繪制一個光暈的時鐘,也是在某些網頁上看到的效果,時分秒分別以進度條的形式來繪制,而且這個進度條帶有光暈效果,中間的日期時間文字也是光暈效果,整體看起來有點科幻的感覺,本控件沒有什么技術難點,如果真要有難點的話也就是如何產生這個光暈效果,在使用painter繪制的時候,設置畫筆,可以設置brush,brush可以是各種漸變效果,這個就非常強大了,主要有線性漸變、圓形漸變、錐形漸變,這三種漸變用得好,各種效果都得心應手隨手拈來。
為了產生光暈效果,需要用到圓形漸變,并對圓形漸變中的不同的位置設置透明度值來處理,時分秒對應的進度可以自動計算出來,這個不難,比如直接用QTime可以獲取對應的時分秒,然后時鐘和分鐘除以60,秒鐘除以1000來獲取對應的進度。繪制光暈文本采用的QPainterPath的addText來實現。
#ifndef SHADOWCLOCK_H
#define SHADOWCLOCK_H
/**
* 光暈時鐘控件 作者:雨田哥(QQ:3246214072) 整理:feiyangqingyun(QQ:517216493) 2019-10-07
* 1:可設置圓弧半徑寬度
* 2:可設置光暈寬度
* 3:可設置光暈顏色
* 4:可設置文本顏色
* 5:采用動畫機制平滑進度展示時間
*/
#include <QWidget>
#ifdef quc
#if (QT_VERSION < QT_VERSION_CHECK(5,7,0))
#include <QtDesigner/QDesignerExportWidget>
#else
#include <QtUiPlugin/QDesignerExportWidget>
#endif
class QDESIGNER_WIDGET_EXPORT ShadowClock : public QWidget
#else
class ShadowClock : public QWidget
#endif
{
Q_OBJECT
Q_PROPERTY(int radiusWidth READ getRadiusWidth WRITE setRadiusWidth)
Q_PROPERTY(int shadowWidth READ getShadowWidth WRITE setShadowWidth)
Q_PROPERTY(QColor textColor READ getTextColor WRITE setTextColor)
Q_PROPERTY(QColor shadowColor READ getShadowColor WRITE setShadowColor)
public:
explicit ShadowClock(QWidget *parent = 0);
~ShadowClock();
protected:
void paintEvent(QPaintEvent *);
void drawArc(QPainter *painter, int radius, qreal angle);
void drawText(QPainter *painter);
private:
int radiusWidth; //半徑寬度
int shadowWidth; //光暈寬度
QColor textColor; //文本顏色
QColor shadowColor; //光暈顏色
public:
int getRadiusWidth() const;
int getShadowWidth() const;
QColor getTextColor() const;
QColor getShadowColor() const;
QSize sizeHint() const;
QSize minimumSizeHint() const;
public Q_SLOTS:
//設置半徑寬度+光暈寬度
void setRadiusWidth(int radiusWidth);
void setShadowWidth(int shadowWidth);
//設置文本顏色+光暈顏色
void setTextColor(const QColor &textColor);
void setShadowColor(const QColor &shadowColor);
};
#endif // SHADOWCLOCK_H
【領QT開發教程學習資料,點擊下方鏈接莬費領取↓↓,先碼住不迷路~】
點擊這里:Qt資料領取(視頻教程+文檔+代碼+項目實戰)
TML5 提供了播放音頻文件的標準。
互聯網上的音頻
直到現在,仍然不存在一項旨在網頁上播放音頻的標準。
今天,大多數音頻是通過插件(比如 Flash)來播放的。然而,并非所有瀏覽器都擁有同樣的插件。
HTML5 規定了在網頁上嵌入音頻元素的標準,即使用 <audio> 元素。
瀏覽器支持
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素.
注意: Internet Explorer 8 及更早IE版本不支持 <audio> 元素.
HTML5 Audio - 如何工作
如需在 HTML5 中播放音頻,你需要使用以下代碼:
實例
<audiocontrols><sourcesrc="horse.ogg"type="audio/ogg"><sourcesrc="horse.mp3"type="audio/mpeg">您的瀏覽器不支持 audio 元素。</audio>
control 屬性供添加播放、暫停和音量控件。
在<audio> 與 </audio> 之間你需要插入瀏覽器不支持的<audio>元素的提示文本 。
<audio> 元素允許使用多個 <source> 元素. <source> 元素可以鏈接不同的音頻文件,瀏覽器將使用第一個支持的音頻文件
音頻格式及瀏覽器支持
目前, <audio>元素支持三種音頻格式文件: MP3, Wav, 和 Ogg:
瀏覽器 | MP3 | Wav | Ogg |
---|---|---|---|
Internet Explorer 9+ | YES | NO | NO |
Chrome 6+ | YES | YES | YES |
Firefox 3.6+ | YES | YES | YES |
Safari 5+ | YES | YES | NO |
Opera 10+ | YES | YES | YES |
音頻格式的MIME類型
Format | MIME-type |
---|---|
MP3 | audio/mpeg |
Ogg | audio/ogg |
Wav | audio/wav |
HTML5 Audio 標簽
標簽 | 描述 |
---|---|
<audio> | 定義了聲音內容 |
<source> | 規定了多媒體資源, 可以是多個,在 <video> 與 <audio>標簽中使用 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
操作系統的更新迭代速度非常快,基本上三五年就有個新版本出來,WIN10操作系統還是一個比較成功的系統,據說現在市場份額越來越大,XP的份額已經很小,WIN7的份額也在逐步減少,在最新的WIN10系統中,右下角有個日歷控件,還是自帶農歷的,這個本地化做的蠻好的,鼠標移上去還有光暈背景效果,體驗非常賞心悅目,于是打算用Qt也高仿一個。
本控件的技術難點有兩個,一個是根據當前月份自動排列星期和日期,這個需要自動計算的,難點二是繪制光暈背景,需要用到painter中的圖像疊加模式setCompositionMode,設置好圖像疊加模式以后,可以將多個繪制重疊,按照設定的規則組合,比如將光暈背景繪制在背后。
#ifndef SHADOWCALENDAR_H
#define SHADOWCALENDAR_H
/**
* 光暈日歷控件 作者:雨田哥(QQ:3246214072) 整理:feiyangqingyun(QQ:517216493) 2019-10-07
* 1:可設置背景顏色
* 2:可設置光暈顏色
* 3:可設置文字顏色
* 4:可設置選中日期背景
* 5:光暈跟隨鼠標移動
*/
#include <QWidget>
#include <QDate>
#ifdef quc
#if (QT_VERSION < QT_VERSION_CHECK(5,7,0))
#include <QtDesigner/QDesignerExportWidget>
#else
#include <QtUiPlugin/QDesignerExportWidget>
#endif
class QDESIGNER_WIDGET_EXPORT ShadowCalendar : public QWidget
#else
class ShadowCalendar : public QWidget
#endif
{
Q_OBJECT
Q_PROPERTY(QColor bgColor READ getBgColor WRITE setBgColor)
Q_PROPERTY(QColor textColor READ getTextColor WRITE setTextColor)
Q_PROPERTY(QColor shadowColor READ getShadowColor WRITE setShadowColor)
Q_PROPERTY(QColor selectColor READ getSelectColor WRITE setSelectColor)
public:
struct DateItem {
int year;
int month;
int day;
DateItem()
{
year = -1;
month = -1;
day = -1;
}
};
explicit ShadowCalendar(QWidget *parent = 0);
~ShadowCalendar();
public:
void updateCalendar(const QDate &selectDate);
protected:
void leaveEvent(QEvent *);
void mouseMoveEvent(QMouseEvent *);
void paintEvent(QPaintEvent *);
private:
QColor bgColor; //背景顏色
QColor textColor; //文字顏色
QColor shadowColor; //光暈顏色
QColor selectColor; //選中顏色
QDate selectDate; //今天日期
DateItem dateItem[6][7]; //日期數組
public:
QColor getBgColor() const;
QColor getTextColor() const;
QColor getShadowColor() const;
QColor getSelectColor() const;
QSize sizeHint() const;
QSize minimumSizeHint() const;
public Q_SLOTS:
//設置背景顏色+文字顏色+光暈顏色+選中顏色
void setBgColor(const QColor &bgColor);
void setTextColor(const QColor &textColor);
void setShadowColor(const QColor &shadowColor);
void setSelectColor(const QColor &selectColor);
};
#endif // SHADOWCALENDAR_H
【領QT開發教程學習資料,點擊下方鏈接莬費領取↓↓,先碼住不迷路~】
點擊這里:Qt資料領取(視頻教程+文檔+代碼+項目實戰)
void ShadowCalendar::paintEvent(QPaintEvent *)
{
QPainter painter(this);
painter.setRenderHints(QPainter::Antialiasing);
int sw = 336;
int sh = 336;
qreal scaleX = this->width() * 1.0 / sw;
qreal scaleY = this->height() * 1.0 / sh;
painter.scale(scaleX, scaleY);
painter.setPen(Qt::NoPen);
painter.fillRect(0, 0, sw, sh, bgColor);
qreal iw = sw / 7.0;
qreal ih = sh / 7.0;
//mask
QPointF globalpoint = this->mapFromGlobal(QCursor::pos());
const QPointF &point = QPointF(globalpoint.x() / scaleX, globalpoint.y() / scaleY);
//繪制光暈背景
if (this->underMouse()) {
int effectradius = 58;
painter.setCompositionMode(QPainter::CompositionMode_DestinationIn);
QRadialGradient radialGrad(point, effectradius);
radialGrad.setColorAt(0, QColor(0, 0, 0, 120));
radialGrad.setColorAt(1, QColor(0, 0, 0, 255));
painter.setBrush(radialGrad);
painter.drawEllipse(point, effectradius, effectradius);
painter.setCompositionMode(QPainter::CompositionMode_DestinationOver);
painter.setBrush(Qt::NoBrush);
for (int row = 0; row < 6; row++) {
for (int column = 0; column < 7; column++) {
QRectF rect = QRectF(column * iw, (row + 1) * ih, iw, ih).adjusted(3, 3, -3, -3);
if (rect.contains(point)) {
painter.save();
painter.setCompositionMode(QPainter::CompositionMode_SourceOver);
painter.setPen(QPen(QColor(220, 220, 220, 160), 2));
painter.drawRoundedRect(rect, 2, 2);
painter.restore();
continue;
} else {
painter.setPen(QPen(shadowColor, 2));
}
painter.drawRoundedRect(rect, 2, 2);
}
}
//繪制圓形的光暈底層背景
painter.fillRect(0, 0, sw, sh, QColor(200, 200, 200, 50));
}
//繪制頭部中文數字,先設置圖像疊加模式為源在上面
painter.setCompositionMode(QPainter::CompositionMode_SourceOver);
painter.setPen(textColor);
QStringList listHead;
listHead << "一" << "二" << "三" << "四" << "五" << "六" << "日";
for (int i = 0; i < 7; i++) {
painter.drawText(i * iw, 0, iw, ih, Qt::AlignCenter, listHead.at(i));
}
//繪制日期
for (int row = 0; row < 6; row++) {
for (int column = 0; column < 7; column++) {
if (dateItem[row][column].day > 0) {
QRectF rect = QRectF(column * iw, (row + 1) * ih, iw, ih).adjusted(3, 3, -3, -3);
//如果是選中的日期則突出繪制背景
if (QDate::currentDate() == QDate(dateItem[row][column].year, dateItem[row][column].month, dateItem[row][column].day)) {
painter.setPen(QPen(selectColor, 2));
painter.setBrush(Qt::NoBrush);
//如果和光暈效果重疊則邊框高亮
if (rect.contains(point)) {
painter.setPen(QPen(selectColor.lighter(), 2));
}
//繪制圓角邊框
painter.drawRoundedRect(rect, 2, 2);
//繪制里邊背景
painter.setPen(Qt::NoPen);
painter.setBrush(selectColor);
painter.drawRoundedRect(rect.adjusted(4, 4, -4, -4), 2, 2);
}
painter.setPen(textColor);
painter.drawText(rect, Qt::AlignCenter, QString::number(dateItem[row][column].day));
}
}
}
}
原文鏈接:https://www.cnblogs.com/feiyangqingyun/p/11646186.html
【領QT開發教程學習資料,點擊下方鏈接莬費領取↓↓,先碼住不迷路~】
點擊這里:「鏈接」
*請認真填寫需求信息,我們會在24小時內與您取得聯系。