Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Qml 培訓課程 multi media

2,841 views

Published on

Introduction of QML

Published in: Technology
  • Be the first to comment

Qml 培訓課程 multi media

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

×