iT邦幫忙

鐵人檔案

2017 iT 邦幫忙鐵人賽
回列表
Modern Web

30天實作線上簡報播放機制 系列

因為同事希望把做好的PowerPoint轉成線上教材,但是簡報動態很多,放到SlideShare、GoogleDoc都沒辦法正常播放,所以乾脆自己做XD

來源的檔案格式是pptx,符合Office Open XML規範,播放則使用HTML5 Canvas,但是不知道做不做得出來哪...

參賽天數 25 天 | 共 31 篇文章 | 18 人訂閱 訂閱系列文 RSS系列文
DAY 11

11 - 試做轉場特效

之前的畫面繪製,都只有一個投影片,所以使用的資料都只有一個投影片。轉場特效通常會套用在投影片之間,這裡的試做就需要多張投影片,所以就需要調整一下了。 調整程式,...

2016-12-24 ‧ 由 fillano 分享
DAY 12

12 - 剖析佈景主題

終於要開始剖析投影片中的資訊。先看看要做什麼... 目標 其實目標很簡單,就是要要取出昨天做轉場的案例中,投影片使用的colorScheme以及colorMap...

2016-12-25 ‧ 由 fillano 分享
DAY 13

13 - 有點複雜的timing結構

本來想要先來改進之前的動畫呈現,不過在這之前還是先整理一下描述投影片中timing的結構,因為這個結構有點複雜,需要想好怎麼整理出最終的物件架構。 timing...

2016-12-26 ‧ 由 fillano 分享
DAY 14

14 - 剖析母片資訊

母片資訊的重點,在於投影片的背景,主要是在母片中定義好的,所以在投影片的圖形資訊中,必須先把背景的圖形放進去 剖析的方式 母片中包含很多圖形,其中會被取代掉的其...

2016-12-27 ‧ 由 fillano 分享
DAY 15

15 - 剖析投影片中的資訊

在取出母片中的資訊後,接下來要處理的是投影片。不過好像跳過了版面配置?這是有原因的... 跳過版面配置 版面配置其實是「幾乎」跳過,因為需要的資訊跟母片差不多,...

2016-12-28 ‧ 由 fillano 分享
DAY 16

16 - 文字呈現的細節

弄pptx的剖析有點膩了,今天先來看文字的呈現以及怎麼利用Canvas 2D Context來實作。 文字主體(p:txBody)、段落(a:p)與文字展現(a...

2016-12-29 ‧ 由 fillano 分享
DAY 17

17 - 大危機...

在研究Text Box的時候發現,之前使用xml2js從xml轉成Javascript Object的方法有大問題... xml2js的問題 問題一 這個問題是...

2016-12-30 ‧ 由 fillano 分享
DAY 18

18 - 重寫pptx parser

昨天發生重大危機,只好開始重寫pptx xml轉成目標json檔的剖析器。 json檔的格式變化 簡單地說,現在json檔中每個物件只會有三個屬性: #nam...

2016-12-31 ‧ 由 fillano 分享
DAY 19

19 - 畫出標準投影片

之前只顧著做各種文字方塊、動畫效果及轉場效果,反而沒有嘗試畫出一個標準投影片,也就是標題加上文字列表,雖然投影片資料剖析的部份還沒做好,不過還是用預計會產生的資...

2017-01-01 ‧ 由 fillano 分享
DAY 20

20 - 投影片的資料架構

為了確實整理好投影片資料,還是回頭從ECMA-376把需要用到的資料做一下整理分析。 p:presentation (presentation,簡報,型別:CT...

2017-01-02 ‧ 由 fillano 分享