我希望擁有一頂神奇帽子,不論放什麼東西進去,它都能把它變成有趣的東西出來。例如我把一張廢紙巾放進去,一反轉帽子,就掉了一隻白色貓咪出來;又例如我放進一條無用的鑰匙,它就變成了一個鑰匙先生,他擁有一串大大小小的鑰匙,能解開所有的鎖。
▼
2020年11月27日 星期五
2020年11月12日 星期四
多災多難的藝術之路
這星期二上了一課藝術治療課,到今天我老闆宣布他初步確診了,結果我也要隔離14天,不能上2個星期的課,心裏覺得有些可惜。知道消息後手都震了,要入camp, 希望時間好好運用,帶埋電腦返工:(
2020年11月5日 星期四
2020年11月4日 星期三
多災多難的Image Editor(二)
上次解決完CORS問題之後(自行寫一個PROXY傳回圖片解決), 老闆仍未收貨, 因為Toast UI Image Editor plugin 未能做到轉換text font family和object alignment的功能。結果把心一橫, 自行寫一個image editor功能出來。
自行寫editor很多災多難, 但滿足度很高, 因為很多功能也很有趣味, 使用時自由度很大 :)
使用了一個叫fabric JS的Tool, 它是一個專門為html5 canvas而設的library, 可以幫忙做到需求所要的功能:
- 加入背景圖片
- 無限加入文字objects
(使用IText object可修改文字) - 無限加入圖片objects
- 文字可轉換font family (Toast UI editor未能提供此功能)
- 文字可bold
(參考這裡) - 文字可italic
- 文字可underline
- 文字可
Strike though - 文字可調顏色
(使用了插件jscolor來輔助實現) - 文字和圖片objects可調opacity
(使用了jQuery slider來輔助實現) - objects可一次靠左、靠右、靠上、靠下和置中對齊 (Toast UI editor未能提供此功能)
(參考這裡 和 這裡 和 這裡) - 有一些指示線幫助objects對齊
(參考這裡) - Undo / Redo
(參考這裡)
寫時卡關了很久, 原因是call 了2次 new fabric.Canvas('myCanvas') 以致產生了2個overlapping fabric containers, 功能變得奇怪起來……
而且fabric js版本的問題, 網上的答案未必適合使用中的版本, 要找多個referemces整合。
還有使用jQuery dialog時因未有依據canvas height調整大小, 以致dialog移位得很厲害, 加入$('#tui-image-editor').dialog( "option", "height", newHeight ); 後變得好得多了。
其餘問題也解決得順暢得多了, 結果老闆也終於收貨了!