-
Notifications
You must be signed in to change notification settings - Fork 9
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
基本安裝與 Surface, Modifier 操作 #1
Comments
補充說明 define(function(require, exports, module) {
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Modifier = require('famous/core/Modifier');
var ModifierChain = require('famous/modifiers/ModifierChain');
var Transform = require('famous/core/Transform');
var mainContext = Engine.createContext();
var surface= new Surface({
size: [100, 100],
properties: {
backgroundColor: "red"
}
});
var modifierChain = new ModifierChain(
new Modifier({
origin: [0.5, 0.5],
transform: Transform.rotateZ( 45 * Math.PI / 180 )
}),
new Modifier({
transform: Transform.translate(100, 100, 0)
}),
new Modifier({
size: [200, 200]
}),
);
mainContext.add(modifierChain).add(surface);
}); |
Open
感謝大大的說明文件 m(_ _)m 只是,為什麼文件在 issues 裡面而不是 Wiki 裡呢,剛剛有點找不到文件在哪裡 QQ |
@MrOrz 歐,我只是把 issue 當作 blog 在記錄(你不覺得蠻好用的嗎,還可以留言耶 XD |
@hinablue 是沒錯啦,而且還有 tagging、referencing,還可以 assign 給人寫 (?) XD |
@MrOrz 你想寫嘛?我可以 Assign 給你 XDD |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Famo.us 原始碼可以在官方的 github 下載
如果你已經可以進入 Famo.us University,那這裡或許可以跳過。
基本使用
Famo.us 是基於 AMD 的架構來撰寫,且搭配使用 require.js,所以稍微了解一下這兩個東西會比較容易上手。
安裝
你可以從官方的 github 把專案抓下來直接使用,也可以用 nodeJS 來安裝,這裡介紹一下 nodeJS 的安裝方法,或者是參考官方的 Install
跑了一陣子之後,他會把需要的東西全部安裝完畢,最後用
grunt serve
來啟動服務。他會啟動瀏覽器連線到localhost:1337
,同時支援 livereload,所以你可以直接修改 js 檔案來看到效果。檔案會放在
app/src/main.js
裡面。顯示元件
建構一個畫面,我們需要
Engine
,Surface
這兩個模組,所以,這樣就能夠在畫面上產生一段文字然後,我們可以利用
Modifier
這個模組,來修改或是製作這個Surface
的效果Surface 核心模組
它是屬於核心模組之一,原始碼在
core/Surface.js
可以查看。預設所使用的 Mockup 是<div>
元素,預設的類別樣式名稱為famous-surface
,這兩項是無法被修改的。可以傳入的屬性有,properties
用來設定 CSS 樣式content
傳入的內容,允許使用 HTMLclasses
傳入類別樣式名稱,必須使用陣列size
傳入元件的尺寸,陣列,規格為[ width, height ]
,必須單純為數字(單位 px,比較特別的是,他可以傳入undefined
這個關鍵字,代表意義是100%
Modifier 核心模組
核心之一,原始碼在
core/Modifier.js
可以查看。它可以當作是一種效果的套用(或是下層元素的濾鏡)來看,樹狀結構以上面的例子來看,會長成這樣這一個 Modifier 並不會產生任何的元素,相反的,它會是一種 CSS Style 屬性,_套用_在 Surface 的元素上面,以 HTML Mackup 來解釋就是這樣,
它可以傳入的屬性有,
transform
這個傳入值必須要是Transform
模組opacity
這個傳入值是透明度,範圍在 0 ~ 1origin
這是代表我要將所屬元素設定在畫面的哪個位置,它是一個陣列[ 垂直位置, 水平位置 ]
size
這個尺寸跟Surface
的尺寸設定相同,但是會覆蓋掉Surface
所設定的尺寸origin
是一種九宮格的形式,所代表的相對位置如下表,[0, 0]
[0.5, 0]
[1, 0]
[0, 0.5]
[0.5, 0.5]
[1, 0.5]
[0, 1]
[0.5, 1]
[1, 1]
相關模組
相同於核心的
Surface
與Modifier
這兩個模組,Famous 對他有個別擴展兩組模組,分別是,Surface 模組
surfaces/CanvasSurface
surfaces/ContainerSurface
surfaces/ImageSurface
surfaces/InputSurface
surfaces/VideoSurface
以上這幾種模組都是由
core/Surface
擴展而來,唯一的差異性是這些模組所使用的 HTML Tag 不盡相同,<div>
<canvas>
canvasSize
為一陣列[ width, height ]
<div>
<img>
content
必須為圖片的 URL<input>
placeholder
,value
,type
,name
,同時content
是無效的<video>
autoplay
是布林值在此必須把
ContainerSurface
特別提出來說明,他與Surface
雷同,但是在 HTML Mockup 的結構上並不太一樣,簡單來說,它可以把很多的Surface
給包(Group)起來,舉例來說,這樣的方式所產出的 HTML Mockup 會類似這樣(底下結構已簡化,
這就是
ContainerSurface
主要的功能,將你的子元素包成一包,然後把這一包放到 DOM 裡面(或是另外給其他的模組使用。Modifier 模組
modifiers/Draggable
modifiers/Fader
modifiers/ModifierChain
modifiers/StateModifier
首先先提一下
StateModifier
這個模組跟Modifier
幾乎一樣,只是Modifier
做的事情比StateModifier
更多一些,所以其實可以把它看成是簡化版本的Modifier
。它只能更動原有的屬性設定,如,size
,origin
,opacity
,transform
這四種而已。Fader
則更輕巧,他所能做的事情只有將你的元素淡入或是淡出(預設是隱藏的ModifierChain
則是可以把多種Modifier
串起來,這樣你就不用一直使用.add()
來新增了。Draggable
目前可利用狀況不明,你可以套用,但是做不出任何效果,我已經寫信去問官方,有回覆會再來這邊更新。在等待官方回覆的同時,我依照
EventHandler
的特性來思考這個Modifier
,既然有pipe
與subscribe
可用,所以就嘗試了一下,後來官方也回信來,用法確實是需要使用pipe
或是subscribe
,實際範例如下,當中有提及
subscribe
與pipe
在此暫且不詳細說明,之後提及EventHandler
的時候會再詳細說明。The text was updated successfully, but these errors were encountered: