QML - Multimedia

DIRO FAN

diro.fan@gmail.com

2014/11/22@DOIT

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

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

開始動手吧！