Qml 培訓課程 multi media
-
Upload
diro-fan -
Category
Technology
-
view
1.517 -
download
4
description
Transcript of Qml 培訓課程 multi media
![Page 2: Qml 培訓課程 multi media](https://reader034.fdocuments.net/reader034/viewer/2022042507/559444ad1a28ab0c308b47cf/html5/thumbnails/2.jpg)
FB: QT@Taiwan
https://www.facebook.com/groups/qtdev/
![Page 3: Qml 培訓課程 multi media](https://reader034.fdocuments.net/reader034/viewer/2022042507/559444ad1a28ab0c308b47cf/html5/thumbnails/3.jpg)
今天我們將會學到...
1. Part 1a. Canvas
b. Particles
c. Shader
d. LedScreen
2. Part 2a. MultiMedia
b. Local Storage
c. Networking
![Page 4: Qml 培訓課程 multi media](https://reader034.fdocuments.net/reader034/viewer/2022042507/559444ad1a28ab0c308b47cf/html5/thumbnails/4.jpg)
多媒體都跟數學很有關係...
![Page 5: Qml 培訓課程 multi media](https://reader034.fdocuments.net/reader034/viewer/2022042507/559444ad1a28ab0c308b47cf/html5/thumbnails/5.jpg)
但數學老師又常常請假...
所以數學我們都跳過!
![Page 6: Qml 培訓課程 multi media](https://reader034.fdocuments.net/reader034/viewer/2022042507/559444ad1a28ab0c308b47cf/html5/thumbnails/6.jpg)
一塊任你發揮的畫布
Canvas
![Page 7: Qml 培訓課程 multi media](https://reader034.fdocuments.net/reader034/viewer/2022042507/559444ad1a28ab0c308b47cf/html5/thumbnails/7.jpg)
系出同門
基本上它跟HTML的Canvas
是一樣的
![Page 8: Qml 培訓課程 multi media](https://reader034.fdocuments.net/reader034/viewer/2022042507/559444ad1a28ab0c308b47cf/html5/thumbnails/8.jpg)
先來看個範例
![Page 9: Qml 培訓課程 multi media](https://reader034.fdocuments.net/reader034/viewer/2022042507/559444ad1a28ab0c308b47cf/html5/thumbnails/9.jpg)
Canvas
1. 請參考官方文件a. http://qt-project.org/doc/qt-5/qml-qtquick-
canvas.html
2.小抄請看這裡a. http://cheatsheetworld.com/programming/html5-
canvas-cheat-sheet/
![Page 10: Qml 培訓課程 multi media](https://reader034.fdocuments.net/reader034/viewer/2022042507/559444ad1a28ab0c308b47cf/html5/thumbnails/10.jpg)
基本線條
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()
![Page 11: Qml 培訓課程 multi media](https://reader034.fdocuments.net/reader034/viewer/2022042507/559444ad1a28ab0c308b47cf/html5/thumbnails/11.jpg)
弧線
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()
![Page 12: Qml 培訓課程 multi media](https://reader034.fdocuments.net/reader034/viewer/2022042507/559444ad1a28ab0c308b47cf/html5/thumbnails/12.jpg)
邁向更花俏的曲線
1.二次曲線 Quadratic Path
2.貝茲曲線 Bezier path
![Page 13: Qml 培訓課程 multi media](https://reader034.fdocuments.net/reader034/viewer/2022042507/559444ad1a28ab0c308b47cf/html5/thumbnails/13.jpg)
別怕!
我們說好跳過的....所以今天不會教
![Page 14: Qml 培訓課程 multi media](https://reader034.fdocuments.net/reader034/viewer/2022042507/559444ad1a28ab0c308b47cf/html5/thumbnails/14.jpg)
炫麗的物理粒子效果
Particle
![Page 16: Qml 培訓課程 multi media](https://reader034.fdocuments.net/reader034/viewer/2022042507/559444ad1a28ab0c308b47cf/html5/thumbnails/16.jpg)
等數學老師回來後我們再研究來看 XDD
因為裡頭的數學太複雜了
![Page 17: Qml 培訓課程 multi media](https://reader034.fdocuments.net/reader034/viewer/2022042507/559444ad1a28ab0c308b47cf/html5/thumbnails/17.jpg)
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
如果你想先研究一下,請參考..
![Page 18: Qml 培訓課程 multi media](https://reader034.fdocuments.net/reader034/viewer/2022042507/559444ad1a28ab0c308b47cf/html5/thumbnails/18.jpg)
視覺魔法師
Shader
![Page 19: Qml 培訓課程 multi media](https://reader034.fdocuments.net/reader034/viewer/2022042507/559444ad1a28ab0c308b47cf/html5/thumbnails/19.jpg)
初次見面..永不再見
![Page 20: Qml 培訓課程 multi media](https://reader034.fdocuments.net/reader034/viewer/2022042507/559444ad1a28ab0c308b47cf/html5/thumbnails/20.jpg)
我相信你不想研究那一堆程式碼
1. Qt 已經內建超多種 shader!!a. Blend
b. Brightness, Contrast
c. Gradient
d. Shadow
e. Blur
f. Glow
![Page 21: Qml 培訓課程 multi media](https://reader034.fdocuments.net/reader034/viewer/2022042507/559444ad1a28ab0c308b47cf/html5/thumbnails/21.jpg)
試看看 FastBlur 吧
![Page 22: Qml 培訓課程 multi media](https://reader034.fdocuments.net/reader034/viewer/2022042507/559444ad1a28ab0c308b47cf/html5/thumbnails/22.jpg)
參考資料
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
![Page 24: Qml 培訓課程 multi media](https://reader034.fdocuments.net/reader034/viewer/2022042507/559444ad1a28ab0c308b47cf/html5/thumbnails/24.jpg)
LED Screen
1. Download from
http://quitcoding.com/?page=work#le
dscreen2.套用LedScreen元件
a. 就跟Shader一樣,指定ShaderEffectSource即可
![Page 25: Qml 培訓課程 multi media](https://reader034.fdocuments.net/reader034/viewer/2022042507/559444ad1a28ab0c308b47cf/html5/thumbnails/25.jpg)
影音多媒體。攝影機
MultiMedia
![Page 26: Qml 培訓課程 multi media](https://reader034.fdocuments.net/reader034/viewer/2022042507/559444ad1a28ab0c308b47cf/html5/thumbnails/26.jpg)
自己的Player自己做! - MediaPlayer
![Page 27: Qml 培訓課程 multi media](https://reader034.fdocuments.net/reader034/viewer/2022042507/559444ad1a28ab0c308b47cf/html5/thumbnails/27.jpg)
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重新打造!
![Page 28: Qml 培訓課程 multi media](https://reader034.fdocuments.net/reader034/viewer/2022042507/559444ad1a28ab0c308b47cf/html5/thumbnails/28.jpg)
Camera
![Page 29: Qml 培訓課程 multi media](https://reader034.fdocuments.net/reader034/viewer/2022042507/559444ad1a28ab0c308b47cf/html5/thumbnails/29.jpg)
Camera
http://qt-project.org/doc/qt-5/qml-qtmultimedia-
camera.html
![Page 30: Qml 培訓課程 multi media](https://reader034.fdocuments.net/reader034/viewer/2022042507/559444ad1a28ab0c308b47cf/html5/thumbnails/30.jpg)
本地儲存
Local Storage
![Page 31: Qml 培訓課程 multi media](https://reader034.fdocuments.net/reader034/viewer/2022042507/559444ad1a28ab0c308b47cf/html5/thumbnails/31.jpg)
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) })
![Page 32: Qml 培訓課程 multi media](https://reader034.fdocuments.net/reader034/viewer/2022042507/559444ad1a28ab0c308b47cf/html5/thumbnails/32.jpg)
Insert Data
function insert(AppID, DesktopID, PositionID) {
db.transaction(function (tx) {
var query = "INSERT INTO Position VALUES(?, ?, ?)"
tx.executeSql(query, [AppID, DesktopID, PositionID])
})
}
![Page 33: Qml 培訓課程 multi media](https://reader034.fdocuments.net/reader034/viewer/2022042507/559444ad1a28ab0c308b47cf/html5/thumbnails/33.jpg)
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
}
![Page 34: Qml 培訓課程 multi media](https://reader034.fdocuments.net/reader034/viewer/2022042507/559444ad1a28ab0c308b47cf/html5/thumbnails/34.jpg)
整合網路資源
Networking
![Page 35: Qml 培訓課程 multi media](https://reader034.fdocuments.net/reader034/viewer/2022042507/559444ad1a28ab0c308b47cf/html5/thumbnails/35.jpg)
XMLHttpRequest
![Page 36: Qml 培訓課程 multi media](https://reader034.fdocuments.net/reader034/viewer/2022042507/559444ad1a28ab0c308b47cf/html5/thumbnails/36.jpg)
The End
開始動手吧!