qml 培訓課程 multi media
DESCRIPTION
Introduction of QMLTRANSCRIPT
FB: QT@Taiwan
https://www.facebook.com/groups/qtdev/
今天我們將會學到...
1. Part 1a. Canvas
b. Particles
c. Shader
d. LedScreen
2. Part 2a. MultiMedia
b. Local Storage
c. Networking
多媒體都跟數學很有關係...
但數學老師又常常請假...
所以數學我們都跳過!
一塊任你發揮的畫布
Canvas
系出同門
基本上它跟HTML的Canvas
是一樣的
先來看個範例
Canvas
1. 請參考官方文件a. http://qt-project.org/doc/qt-5/qml-qtquick-
canvas.html
2.小抄請看這裡a. http://cheatsheetworld.com/programming/html5-
canvas-cheat-sheet/
基本線條
1.設定路徑a. context.beginPath()
b. context.lineTo()i. context.lineTo(0,0)
ii. context.lineTo(100,100)
iii. context.lineTo(0,200)
c. context.closePath()
2.畫吧！a. 填滿：context.fill()
b. 畫線：context.stroke()
弧線
1.設定路徑a. context.beginPath()
b. context.arc(x,y,radius,start,end)i. context.arc(250,75,50,0*Math.PI, 1.5*Math.PI)
c. context.closePath()
2.畫吧！a. 填滿：context.fill()
b. 畫線：context.stroke()
邁向更花俏的曲線
1.二次曲線 Quadratic Path
2.貝茲曲線 Bezier path
別怕!
我們說好跳過的....所以今天不會教
炫麗的物理粒子效果
Particle
等數學老師回來後我們再研究來看 XDD
因為裡頭的數學太複雜了
1. http://qt-project.org/doc/qt-5/qtquick-effects-
particles.html
2. http://qt-project.org/doc/qt-5/qtquick-
particles-qmlmodule.html
3. http://blog.csdn.net/cloud_castle/article/detail
s/33306133
4.那裡有得套呢..a. Qt Examples - Particle - emitters
如果你想先研究一下，請參考..
視覺魔法師
Shader
初次見面..永不再見
我相信你不想研究那一堆程式碼
1. Qt 已經內建超多種 shader!!a. Blend
b. Brightness, Contrast
c. Gradient
d. Shadow
e. Blur
f. Glow
試看看 FastBlur 吧
參考資料
1. http://qmlbook.org/ch09/index.html
2. http://qt-project.org/doc/qt-5/qtmultimedia-
video-qmlvideofx-example.html
3. http://qt-project.org/doc/qt-
5/graphicaleffects.html
LED Screen
1. Download from
http://quitcoding.com/?page=work#le
dscreen2.套用LedScreen元件
a. 就跟Shader一樣，指定ShaderEffectSource即可
影音多媒體。攝影機
MultiMedia
自己的Player自己做! - MediaPlayer
MediaPlayer
1. http://qt-project.org/doc/qt-5/qml-
qtmultimedia-mediaplayer.html
2.一定要介紹一下最牛的QtAVa. https://github.com/wang-bin/QtAV
b. 摒棄 DirectshowFilter & GStreamer，用FFmpeg重新打造!
Camera
Camera
http://qt-project.org/doc/qt-5/qml-qtmultimedia-
camera.html
本地儲存
Local Storage
Open Database
1. http://qt-project.org/doc/qt-5/qtquick-localstorage-
qmlmodule.html
2. openDatabaseSync(string name, string version,
string description, int estimated_size)a. db = Sql.LocalStorage.openDatabaseSync("Hangee", "1.0", "Database for Hangee",
100000)
b. db.transaction(function (tx) {
var query = "CREATE TABLE IF NOT EXISTS Position(AppID TEXT, DesktopID
INTEGER, PositionID INTEGER)"
tx.executeSql(query) })
Insert Data
function insert(AppID, DesktopID, PositionID) {
db.transaction(function (tx) {
var query = "INSERT INTO Position VALUES(?, ?, ?)"
tx.executeSql(query, [AppID, DesktopID, PositionID])
})
}
Select Data
function select(AppID) {
var jsondata
db.transaction(function (tx) {
var rs = tx.executeSql("SELECT * FROM Position WHERE AppID = ?",
[AppID])
for (var i = 0; i < rs.rows.length; i++) {
jsondata = "{\"AppID\":\"" + rs.rows.item(
i).AppID + "\", \"DesktopID\":\"" + rs.rows.item(
i).DesktopID + "\", \"PositionID\":\"" + rs.rows.item(
i).PositionID + "\"}"
}
})
return jsondata
}
整合網路資源
Networking
XMLHttpRequest
The End
開始動手吧！