本文件介绍了QML中的多媒体、画布、粒子效果和本地存储等主题，包括如何使用canvas绘图、创建基本的视觉效果以及媒体播放器的设置。文档还提供了相关链接与代码示例，帮助读者学习QML编程。内容强调了数学在多媒体开发中的重要性但简化了一些复杂的数学概念。

1. QML - Multimedia
DIRO FAN
diro.fan@gmail.com
2014/11/22@DOIT

2. https://www.facebook.com/groups/qtdev/
FB: QT@Taiwan

3. 今天我們將會學到...
1. Part 1
a. Canvas
b. Particles
c. Shader
d. LedScreen
2. Part 2
a. MultiMedia
b. Local Storage
c. Networking

4. 多媒體都跟數學很有關係...

5. 但數學老師又常常請假...
所以數學我們都跳過!

6. Canvas
一塊任你發揮的畫布

7. 基本上它跟HTML的Canvas
是一樣的
系出同門

8. 先來看個範例

9. Canvas
1. 請參考官方文件
a. http://qt-project.org/doc/qt-5/qml-qtquick-canvas.
html
2. 小抄請看這裡
a. http://cheatsheetworld.com/programming/html5-
canvas-cheat-sheet/

10. 基本線條
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()

11. 弧線
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()

12. 邁向更花俏的曲線
1. 二次曲線Quadratic Path
2. 貝茲曲線Bezier path

13. 別怕!
我們說好跳過的....所以今天不會教

14. Particle
炫麗的物理粒子效果

16. 因為裡頭的數學太複雜了
等數學老師回來後我們再研究來看XDD

17. 如果你想先研究一下，請參考..
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

18. Shader
視覺魔法師

19. 初次見面..永不再見

20. 我相信你不想研究那一堆程式碼
1. Qt 已經內建超多種shader!!
a. Blend
b. Brightness, Contrast
c. Gradient
d. Shadow
e. Blur
f. Glow

21. 試看看FastBlur 吧

22. 參考資料
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

23. LED Screen

24. LED Screen
1. Download from
http://quitcoding.com/?page=work#le
dscreen
2. 套用LedScreen元件
a. 就跟Shader一樣，指定ShaderEffectSource即可

25. MultiMedia
影音多媒體。攝影機

26. 自己的Player自己做! - MediaPlayer

27. MediaPlayer
1. http://qt-project.org/doc/qt-5/qml-qtmultimedia-
mediaplayer.html
2. 一定要介紹一下最牛的QtAV
a. https://github.com/wang-bin/QtAV
b. 摒棄DirectshowFilter & GStreamer，用FFmpeg重新
打造!

28. Camera

29. Camera
http://qt-project.org/doc/qt-5/qml-qtmultimedia-camera.
html

30. Local Storage
本地儲存

31. 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) })

32. Insert Data
function insert(AppID, DesktopID, PositionID) {
db.transaction(function (tx) {
var query = "INSERT INTO Position VALUES(?, ?, ?)"
tx.executeSql(query, [AppID, DesktopID, PositionID])
})
}

33. 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
}

34. Networking
整合網路資源

35. XMLHttpRequest

36. The End
開始動手吧！