1 | Next Page

JavaScript 載入資源時的 Sync 和 Async 作法

May 19, 2014 3:58 PM
Rating: (Total Clicks 45)

1. 同步執行 JavaScript (Sync)在現有的 <script> 之後加入另一個 <script> 標籤 (嚴格講起來, 不算真的 sync) var s = document.createElement("script");s.type = 'text/javascript';s.src = "js-url.js";document.write(s.outerHTML);2. 非同步執行 JavaScript (Async)在 <head> 裡加入 <script> 標籤 var s = document.createElement("script");s.type = 'text/javascript';s.src = "js-url.js";document.getElementsByTagName("head")[0].appendChild(s);3. 使用 XMLHttpRequest 同步取得 JSON (Sync)var jsonFile = 'test.json';var req = new XMLHttpRequest();req.open("GET", jsonFile, false); // "false": synchronousreq.send();console.log(req.responseText);4. 使用 jQuery 同步取得 JSON (Sync)$.ajax({ url: appInfoUrl, async: false, // synchronous datatype: "json", success: function(res){ if(typeof(res)==='string') { res = $.parseJSON( res ); } }});5. 使用 XMLHttpRequest 在載入文字檔資源前, 先判斷檔案是否存在var jsonFile = 'test.json';var req = new XMLHttpRequest();req.open("GET", jsonFile, false); // "false": synchronousreq.send();if(req.status === 404){ console.log('檔案不存在');} else { } (translate)

Grunt.js 入門講義

Apr 10, 2014 3:31 AM
Rating: (Total Clicks 105)

●● Grunt 入門   ◎ 林新德 編 ( shinder.lin@gmail.com) 2014.4 ● Grunt ( http://gruntjs.com/ )名稱來自於 grunt work (單調的工作),它的功能是使用設定來執行常做的動作,例如最小化 JavaScript 和 CSS 檔等。● Grunt 在 0.3 版時提供常用的功能,設定檔使用 grunt.js。到 0.4 版時做了些調整,使用外掛的架構,設定檔為 Gruntfile.js。● 本講義以 Windows 7 為作業系統為例,各軟體的安裝皆在 Windows 7 底下安裝,請注意使用的軟體版本,例如 NodeJS 有 32-bit 和 64-bit 之分。◎ Windows Command Prompt 使用 PowerShell◎ 範例專案 shinder_maze.zip 和 shinder_circle_menu.zip  (** blog 不提供專案包 zip 檔 )● Web server,使用 Python3 內建的簡易 web server ( 非必要 )安裝 Python 3 ( https://www.python.org/downloads/)在 Command prompt,到專案目錄使用下式啟動 server> python -m http.server [埠號]使用「Ctrl + C」停止 server● 在安裝 Grunt 之前需先安裝 Git 和 NodeJS◎ 1. NodeJS ( http://nodejs.org/ )– 直接從官網按「 INSTALL 」,下載 msi 檔並安裝。◎ 2. Git– 安裝 Git for Windows (translate)

Snap.svg 載入 svg 檔時的兩三事

Dec 27, 2013 4:32 PM
Rating: (Total Clicks 96)

使用 Snap.load() 時, 載入的檔案內容會變成 Fragment 物件。而 Fragment 物件只有兩個方法: select() 和 selectAll()。在載入之後, 即刻使用 select() 可以取得一個 Element 物件; 而使用 selectAll() 是將樹狀結構攤平, 取得符合條件的 Elements, 結果是 type 為 set 的物件 (也可以視為 Array 操作)。當 Fragment 物件被加到 (append) DOM 裡面時, select() 和 selectAll() 就會失效。文件上敘述的很少, 只寫到 Fragment.select 同 Element.select, Fragment.selectAll 同 Element.selectAll。一開始使用應該很容易踩到這個雷吧。--- ---Snap.select() 和 Snap.selectAll() 從整個 Paper 物件去取得 Element(s)。--- ---另外, 載入的 svg 檔通常最外層就是一個 <svg> 標籤, 我們可以將這個 Fragment 物件直接放到一個 g element 裡, 操作 g element 就可以改變整個載入的圖形。svg 標籤可以是多層的結構。Snap.load("some.svg", function(fragment) {    var wrapper = paper.g();    wrapper.append(fragment).drag().transform('t200,100s1.2');});--- ---最外層的 <svg> 標籤稱為 Paper 物件。Paper 物件的行為和 Element 類似, 但目前建立 Element 物件只能使用 Paper 物件 (例如: Paper.g(), Paper.rect() 等)。--- ---Element 物件的屬性:    node 指向 DOM (translate)

字型轉換為 SVG

Dec 25, 2013 6:30 PM
Rating: (Total Clicks 98)

想在網頁上放幾個中文字, 但並非固定的字, 就找找看有沒有字型轉換為 SVG 格式的工具。結果找到 Apache Batik SVG Toolkit, Java 寫的工具包, 這工具包大概有五、六年沒更新了, 試用了一下, 用 command line:java -jar batik-ttf2svg.jar ./BHei01e.ttf -l 24503 -h 24503 -id mysvg -o mysvg.svg再用 Inkscape 打開 svg 檔, 並沒有看到我要的結果; 接著用 sublime 查看, 原來是放在 defs 標籤裡。格式長這樣子:<glyph unicode="!" glyph-name="null" d="M207 805L214 229H298L312 805H207ZM200 116V-7H323V116H200Z" />於是異想天開地想用 PHP 的 shell_exec() 呼叫 Java 程式拿到某幾個字元的 SVG 格式。事與願違, 要 3 個字的資料 PHP 跑了 1 秒多, 要 6 個字的資料跑了近 3 秒, 這樣看起來是行不通的。原因應該是, 取得一個字的資料 Java 就開檔、關檔一次, 耗時間是難免的。後來的解法是把耗費時間的事一次做完 (其實大概 10 幾秒), 用下式拿到一個約 10M 的 SVG 檔。java -jar batik-ttf2svg.jar ./BHei01e.ttf -l 1 -h 65535 -id mysvg -o mysvg.svg然後用 PHP 的 DOMDocument 物件拿到字碼和 d 屬性, 塞到 SQLite 資料庫 (大概也是 10 幾秒左右), (translate)

Snap.svg Objects rotating animation problems

Dec 23, 2013 1:55 PM
Rating: (Total Clicks 114)

Snap.svg 旋轉動畫的問題用 Snap.svg 做 element.animate() 旋轉動畫時, 若圖案的中心對準原點 (如 上篇), 則以中心點當旋轉中心, 動畫會是正常的。但若偏移中心點做旋轉, 會伴隨縮放的發生, 明明就沒有要做縮放啊 ? 問題應該是 animate() 用 Matrix 的 a, b, c, d, e, f 去做值的改變, 而造成的, 跑出來的動畫就是很白痴...在這裡想到一個做法, 感覺和上一篇一樣是個賤招。就是把要做旋轉的物件用 group 包起來, 同時設定旋轉中心為該 group 的原點位置, 被包裹的物件要做平移 (translate) , 使得物件在畫面上的位置看起來是一樣的 (不變的)。然後對 group 做旋轉, 就不會伴隨奇怪的縮放發生, 動畫完成之後再把 group 拆掉。這個功能由一對 functions 完成, TGroup 和 unTGroupfunction TGroup(paper, pivot) { if(! pivot pivot.x===undefined pivot.y===undefined) { return false; } var i, el, outer, m, n; outer = paper.g(); outer.transform( new Snap.Matrix().translate(pivot.x, pivot.y).toTransformString()); m = new Snap.Matrix(); m.translate(-pivot.x, -pivot.y); for(i=2; i<arguments.length; i++) { el = arguments[i]; n = m.clone(); n.add( el.transform().localMatrix ); el.transform( n.toTransformString() ); outer.add( el ); } (translate)

Snap.svg 測試感想

Dec 20, 2013 12:11 PM
Rating: (Total Clicks 113)

看到 Snap.svg 官網的範例, 感覺可以做很多東西, 於是動手用 Snap 做了 Merry Xmas 測試網頁。完成這個小例子之後, 有以下幾點感想:Snap.svg 目前是 0.4.2 版, 版號雖然看起來不大, 但由於 Snap 作者之前 Raphael 專案累積的經驗, Snap 的功能其實已算完備。但在文件上還有許多改善空間。Snap 和 Raphael 的一些 functions 設計的方式雷同, 所以有時我是看 Raphael 的文件, 才知道 Snap 某個 function 的用法。應該多了解 SVG 的語法及運作方式 (個人對 SVG Spec 還太淺)。Snap 對 IE 11 的支援還很有問題...SVG 素材方面是拿網路上免費的材料。素材拿到後並不是直接可以使用。先使用 Inkscape 最佳化之後, 再使用文字編輯器去蕪存菁, 同時也可以多了解一下 SVG 的語法。由於對 Inkscape 不熟, 花了很多時間在編修素材。將多個 SVG 檔合併成一個, 並使用 <g> 標籤包裹一個個素材, 記得設定 <g> 標籤的 id 以方便 element.select() 取用。使用的圖案數量不是很多, 故只合併成一個檔, 以方便載入。用 Snap 操作物件做 transform (位移、縮放、旋轉) 時, 常常會得到奇怪的狀況, 不如預期。主要原因是 SVG 以左上角為參考點, 並不能設定 pivot, 當然不能像 Flash 那樣設定註冊點 (registration point)。後來, 用變通的方式, 如下圖, 讓圖案的中心點對準文件的左上角, 如此一來位移、縮放、旋轉的參考位置就固定了。Snap/SVG 的優點是使用向量圖 (當然也可以包含點陣圖), 素材用載入的方式, 如此一來在行動裝置螢幕解析度規格多如牛毛的情況下, 可以有較為理想的呈現。 (translate)

最近遇到 Silex 之 Built-in Service Providers 的問題

Dec 18, 2013 2:33 PM
Rating: (Total Clicks 120)

Silex 是 PHP 的一種微框架。使用 Silex 而沒有選用 Slim 的原因是 Silex 的肥版內置了常用的功能, 而且 Silex 是 Symfony2 相關的專案。目前裡面的 Twig 和 Doctrine DBAL 是用得還滿開心的, 但 Session 和 Swiftmailer 就用不太習慣, 或遇到狀況。寄 mail 的功能, 個人長時間習慣使用 PHPMailer。Swiftmailer 寄未認證信時, 常收不到; PHPMailer 至少會在垃圾郵件中找到。Session 的問題是 Silex 使用 SessionServiceProvider, 並非 PHP 原先內建的 $_SESSION功能。在混用 Securimage 做 captcha 功能時, 由於 Securimage 使用的是內建的 $_SESSION, 而造成 SessionServiceProvider 無法啟用。RuntimeException: Failed to start the session: already started by PHP ($_SESSION is set).後來的解決方式是乾脆 把 SessionServiceProvider 給關了, 直接使用 $_SESSION。 (translate)

使用 Inkscape 做 SVG 檔案的最佳化 (最小化)

Dec 14, 2013 12:35 PM
Rating: (Total Clicks 122)

參考這篇 Optimizing Inkscape SVG size for the Web「檔案」 > 「另存新檔」 > 「存檔類型」選「最佳化的 SVG」 (倒數幾個選項)」 > 按「儲存」, 再依據需求於面板上勾選去除或包含的項目, 按「確定」後完成。在參考的 blog 裡發現了一個會動的 SVG clock2, 感到相當驚奇, 偷看一下原始碼, 原來是放了 <script> 標籤 XD。 (translate)

用 KineticJS 改寫 Shadow Maze 2D

Dec 13, 2013 2:31 PM
Rating: (Total Clicks 127)

Shadow Maze 2D 是 AS3/starling 寫的 app, 試著用 KineticJS 改寫, 感覺上跟 starling 作法差不多。由於是 web app, 所以把儲存和記錄的功能拿掉了。圖片素材都一樣, 改寫起來還算快。shadow_maze 是完成的結果, 在桌機上用鍵盤的方向鍵操作, 在手機上用 device orientation 功能操作。測試過 Chrome、IE 11、Safari 和 iOS 7 Safari 是可以正常執行, 但 Firefox 25/26 會當掉, 關掉大部份的 Firefox plug-in 之後, 執行 20秒左右也當了, 殘念。Firefox 執行 KineticJS 做的 app 似乎有不少人遇到麻煩, 不知道是 Firefox 的問題還是 KineticJS 的問題 ... 我懷疑前者的支援度不佳 ...條列筆記:Sprite 圖形是之前用 Flash CS6 功能輸出的。類別使用 createNew 的方式實作。Kinetic.Layer 在 DOM 裡是 <canvas> 元素。toImage() 類似 AS3 的 cacheAsBitmap。將 Kinetic.Node 做 toImage() 時, 該物件必須已經放在 Layer 上面。做 toImage() 時, protocol 需是 http不能是 file。toImage() 得到的是 JS Image 物件, 不是 Kinetic.Image 物件。裝置方向參考 Using Device Orientation。裝置方向事件處理, 若先 remove 再 add, 可能會拿到先前的舊值, 造成 bug。上述動畫進行中, 可用一變數去忽視裝置方向事件。善用 Group。按鈕可以寫成 Component。JS (translate)

HTML5 的 SVG 和 Canvas

Dec 11, 2013 2:31 PM
Rating: (Total Clicks 125)

SVG (Scalable Vector Graphics) 和 Canvas, 同樣是 HTML5 的標準內容, 但兩者似乎有相互競爭的意味。主要的差異在於, SVG 是以 tag 的方式存在 (DOM 的一部份), 而 Canvas 純粹是用 JavaScript 來建立。粗略來說, 當圖案越複雜時, SVG 會越龐大, render 的速度會越慢; Canvas 則是看變動區域的大小和複雜程度。2012 年中, 就有針對 SVG 和 Canvas 效能問題做測試和討論 The Road to HTML5: SVG, Canvas, and faster performance。結論是 Canvas 效能比 SVG 要來得好, 但比較不好寫 (應該說 JS 要寫較多的行數)。也有一派認為 SVG 的優點比較多, 他們偏好使用 SVG, 7 Reasons to Consider SVGs Instead of Canvas 。簡述一下文中條列的 SVG 優點:SVG 是可縮放的有現成的編輯工具: 如免費的 Inkscape , 椅拉也有支援程式語言/框架的支援: 文中其實只提 Simple XML, 意義是後端可以做些處理大部份的瀏覽器都有支援: 以 Raphaël 為例可得性與 SEO 佳DOM 操作有 CSS, webfont, JS 支援上列的林林總總, 好像 SVG 真的比 Canvas 好。其實也是得看用途, 在 2D 網站最佳化的過程, 會因種種特性, 兩者選其一, 亦或兩者都用。另外, 如何開始, 啃官方文件一定不會是您想要的。SVG 有老牌的 Raphaël, 也有同一個作者開發的 Snap.svg (感覺是 adobe 支持的專案), (translate)

1 | Next Page