iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 25
2
Modern Web

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

?? - 目前的簡單成果

參考:example012.html

資料的複雜性

結果奮鬥最久的還是處理pptx的資料XD

來反省一下...先看一下簡報的架構(排除了一些跟播放沒直接關係的設定檔),大致上可以分成幾個部分:

  1. 簡報,重要的資料有
    1. 簡報大小
    2. 預設文字樣式
  2. 佈景主題
    1. 顏色定義
    2. 字型定義
    3. 其他(這部份先放棄了XD)
  3. 母片
    1. 預設顏色對應表
    2. 三種文字樣式定義(標題、內容、其他)
    3. 投影片資料(圖形或圖片、文字區塊、段落、文字區段)
  4. 版面配置
    1. 覆寫顏色對應表
    2. 投影片資料(圖形或圖片、文字區塊、段落、文字區段)
  5. 投影片
    1. 覆寫顏色對應表
    2. 投影片資料(圖形或圖片、文字區塊、段落、文字區段)

資料會從上而下流動,而且各自只擁有部分,所以在產出投影片要使用的資料時,需要從投影片找到他使用的版面配置,從版面配置找到使用的母片、從母片找到使用的佈景主題,然後根據投影片圖形與版面配置圖形的對應關係,把資料串起來。每一層的可能有缺資料或是會覆蓋過上一層的資料...

資料處理方式的問題

原本做剖析的程式,是採用邊剖析,邊處理資料相依性的方式。不過後來發現這樣太複雜,而且分工不清楚。後面就做了調整,先把所有資料處理成統一的格是,然後再來彙整出各個投影片。

另外,原本彙整資料時,我會用Object.assign()來把兩個物件資料整合起來,不過後來發現這樣會有問題,因為其實他只把物件中的參考匯合在一起,這樣原本的資料有變動,也會影響到產生出的物件。更大的問題是,物件底下的物件也需要彙整,這個用Object.assign()做不到XD,所以隨手寫了一個deepAssign函數,用遞迴的方式彙整物件及子物件。

另外,pptx用timing這個樹狀結構來描述投影片中所有會發生的動作。這個東西有點複雜...做一個最簡單的文字區塊移動,深度就超過20層...因為還不知道怎麼處理比較好,就先寫一個深度優先的walker,把它轉成帶有深度資訊的一維陣列。可能還要花一些時間瞪它,看他會不會告訴我一些秘密...

如果使用Open XML SDK...

目前使用的結果是,如果是要用它簡單處理文件可能還好。這一套SDK基本上大約就是XML Schema中定義的型別與類別的定義,另外加上節點尋訪的方法,用Composite Pattern組織起來...基本上跟pptx裡面的xml就是一個一對一的對應,除非已經對Office OpenXML已經夠熟,使用起來還是會有點困難。如果不對照一下ECMA-376文件中的XML Schema定義,光看MSDN也不會知道某個類別底下會有哪些節點。

因為用起來感覺有點雞肋,最後還是直接面對xml,只是把它轉成Javascript物件,然後用node.js來處理。最主要的參考書還是ECMA-376...不過說實話,這個規格書實在太大本,很多說明有點敷衍XD

後續的工作

就是要開始處理timing結構啦...不過沿路還會一直碰到需要支援剖析更多種資料的問題...現在很多作法其實只是欠技術債的開始XD


上一篇
26 - 仔細確認Powerpoint的樣板機制
下一篇
?? - 繪製Office內建的圖型
系列文
30天實作線上簡報播放機制31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言