KineticJS 建立範圍選取功能
KineticJS 介紹
KineticJS 是一套針對 canvas 設計的函式庫,使得我們在操作使用 canvas 的時候相對簡單易懂。
這篇文章將會教您如何透過 KineticJS 在螢幕上(canvas)建立一些物件,然後可以透過拖拉選取範圍。
KineticJS 是一套針對 canvas 設計的函式庫,使得我們在操作使用 canvas 的時候相對簡單易懂。
這篇文章將會教您如何透過 KineticJS 在螢幕上(canvas)建立一些物件,然後可以透過拖拉選取範圍。
更新 Mavericks 小牛之後會發現 httpd.conf
被取代了。不過舊的檔案放在 /private/etc/apache2/httpd.conf.pre-update
下面我們將透過一個使用了 5 個常用套件的 Gruntfile
來實作練習並討論關於 Gruntfile。
這篇教學將會解釋如何使用 Gruntfile 為你的專案設定任務。如果你還不知道什麼是 Gruntfile 請回到上一篇 Grunt 入門 閱讀。
Grunt
和 Grunt 擴充套件
都是透過 npm
來安裝和管理。Grunt
這個工具大概就等於 Ruby
中的 rake
,它可以透過一些設定讓你輕鬆完成一些例行性的任務,例如壓縮檔案,編譯 coffee less,搬移到目標目錄,單元測試等等。之後就可以透過一個指令,就把所有的事情做好。
為了能夠使用 Grunt
你必須安裝 grunt-cli
就是 Grunt 的 Command Line Interface 到您的系統。
安裝過程可能會需要 sudo 或這在 windows 底下使用管理者身份執行。
使用 Compass 之前需要先安裝 ruby,這裡我們可以透過官方
的教學來安裝,建議使用 rvm 的方式來管理各種版本的 ruby。
Bower 是一套管理網頁套件的工具,他提供了一種通用且不受限制的方案來解決管理前端相關的套件如:jquery。
支援的系統非常廣泛,並沒有太多相依性的東西。開發者也可以透過他管理套件的相依性和升級等等的問題。
有了它,就不用到處去下載套件檔案(jquery, bootstrap)。
display: block
: 前後會插入換行,寬會填滿父元素,高則是配合內容。可以用 width, height 設定。
預設: h1, p, div
display: inline
: 不會換行,會連成一行。寬高都是依照內容,且不能使用 width, height。
預設: span, a, em
display: inline-block
: 跟 inline 一樣,但能夠使用 width, height 設定寬高。
display: list-item
: 變成 marker + block。
display: run-in
: 如下圖 h2 被指定 run-in
它就會變成 inline 後續的元素如果是 block 就會如圖一樣合體。但是後續的元素如果是 inline 或者套用了 float, position ,那麼 h2 就會是 block。 註: Firefox 和 IE7 目前都不支援 run-in