iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 16
1

弄pptx的剖析有點膩了,今天先來看文字的呈現以及怎麼利用Canvas 2D Context來實作。

文字主體(p:txBody)、段落(a:p)與文字展現(a:run)

Office OpenXML與文字呈現、樣式等相關的部份,除了昨天提到的簡報、母片、版面配置到投影片的資料繼承關係,相關的屬性主要區分成三個部分:

  1. 文字主體(p:txBody, Text Body):這裡的屬性,主要是定義文字方向及文字與圖形的間隔等
    1. lIns(left inset), tIns(top inset), rIns(right inset), bIns(bottom inset),指定文字與外框的間距,單位是EMU
    2. vert:垂直文字的字型方向
    3. rot:旋轉角度
    4. anchor, anchorCtr, fromWrodArt, horzOverflow, vertOverflow...
  2. 段落(a:p, Paragraph)
    1. algn(align):文字對齊方式
    2. defTabSz(default tab size):預設的tab字元大小
    3. eaLnBrk(East Asian Line Break):東亞字型的字元是否可以被切開(林=>木木之類)
    4. fontAlgn(font align):字型的垂直對齊方式。每個段落中的文字展現,可以設定各自的字型大小及樣式,垂直對齊會影響不同文字展現的垂直對齊。
    5. hangingPunct(hanging punctuation):段落最後的標點,是否可以放到另一行
    6. indent:首行縮排的長度,單位是EMU
    7. latinLnBrk(latin line break):較長的文字,是否可以拆到兩行中(英文等)
    8. lvl(level):指定段落的列表級數,單位是zero base,所以第一級的話,數字是0
    9. marL(left margin):段落的左側邊界長度,單位是EMU,這個數字加上lIns就是段落文字左側開始繪製的位置
    10. marR(right margin):段落的右側邊界長度,單位是EMU,這個數字加上rIns就是段落右側必須空出來的間隔,如果段落繪製超過這個位置,就需要折行
    11. rtl(right to left):文字流向是否是右到左(例如阿拉伯文)
  3. 文字展現(a:r, Text Run),每個段落中,包含一至多個Text Run,各自可以有不同的屬性
    1. b(bold):粗體字
    2. i(italic):斜體字
    3. kern(kerning):請自己找,字元間距的調整
    4. kumimoji:垂直文字中的英文字母,是否要垂直或轉九十度
    5. spc(spacing):字元間距
    6. strike:刪除線
    7. sz(size):字型大小
    8. u(underline):底線

使用Canvas 2D Context繪製文字

Canvas 2D Context中有幾個屬性及方法,可以協助盡量達成以上目標,不過不是全部XD...有一些設定是CSS還沒完整支援的,在Canvas也可能沒支援。

可以使用的Canva 2D Context屬性及方法有:

  1. ctx.font:指定字型的屬性,使用CSS語法來設定,不過為了換算,字型大小我會使用px做單位
    1. 粗細:指定為bold,或是用數字指定,最粗是900
    2. 是否為斜體:加上italic就是斜體字
    3. 字型大小
    4. 字型名稱:Arial, 新細明體等等
  2. ctx.textAlign:文字左右對齊的方式,會參考fillText指定的座標
  3. ctx.textBaseline:指定文字垂直對齊的基線,top, middle, bottom等
  4. ctx.fillText('string', left, top):繪出文字
  5. ctx.measureText('string'):測量指定font樣式繪製出字串的寬度

簡單的測試:https://jsfiddle.net/7zL28ecb/

還是有差距...

Canvas 2D Context跟Office OpenXML需要的文字樣式屬性,還是有些差距。例如kerning好像完全沒辦法設定,底線及刪除線沒有直接支援。其他倒是可以透過measureText算出前面繪製的文字長度,然後跟各個參數做計算來設法做,不過這樣需要一個字元一個字元繪製,有點麻煩。

先捨棄做不到的的部份,彙整一下然後明天用比較完整的屬性設定來繪製投影片中的文字。


上一篇
15 - 剖析投影片中的資訊
下一篇
17 - 大危機...
系列文
30天實作線上簡報播放機制31

尚未有邦友留言

立即登入留言