Famo.us Diasplaying Content/Positioning Elements
来源:互联网 发布:单片机控制led灯程序 编辑:程序博客网 时间:2024/05/21 22:49
前言:
构建Famo.us JavaScript平台的团队计划在2013年12月5号发布他们的第一个应用层代码预览版,作为发布平台客户端的一个铺垫。Famo.us完全是使用JavaScript编写的,它已经吸引了超过7万名开发者,但是依然是alpha预览版;它诱惑人的原因是承诺不需要插件就能够在浏览器中实现本地应用性能。作为自渲染的js框架,famo.us优异的性能与酷炫的视觉效果在未来的发展潜能不可限量!
Displaying Content
在这个部分,我们将学习在famo.us如何展示和自定义自己的要展示的内容。首先介绍两个对象:renderable:表示对应我们能在屏幕上看到的一个真实的元素,最原始的renderable元素就是surface,它对应dom中的div元素。
Context :表示独立的可渲染环境,我们可以拥有多个Context对象,但通常拥有一个就够了,尤其是在移动应用或全屏的web应用中。
var Engine = require('famous/core/Engine');//用于创建Context对象var Surface = require('famous/core/Surface');var mainContext = Engine.createContext();var firstSurface = new Surface({ content: 'hello world'});mainContext.add(firstSurface);//渲染
Adding Content
展示的内容可以是字符串、一段html代码或一个dom元素。
var Engine = require('famous/core/Engine');var Surface = require('famous/core/Surface');var mainContext = Engine.createContext();var firstSurface = new Surface({ content: 'hello world'//初始化内容});firstSurface.setContent('<h1>HELLO WORLD</h1>');//修改内容mainContext.add(firstSurface);
Styling
和css的写法差不多,区别在于用的是骆驼拼写法,而不是破折号’-‘var Engine = require('famous/core/Engine');var Surface = require('famous/core/Surface');var mainContext = Engine.createContext();var firstSurface = new Surface({ content: 'hello world', properties: { color: 'white', textAlign: 'center', backgroundColor: '#FA5C4F' }});mainContext.add(firstSurface);
Sizing
size的定义有多种写法,不写默认是与父同大小(match-parent)。其他方式包括指定像素 [x, y]
指定一个像素[undefined, y] 或 [x, undefined],undefined的效果表示的是default。
自适应大小[true, true]
指定一个像素[undefined, y] 或 [x, undefined],undefined的效果表示的是default。
自适应大小[true, true]
var Engine = require('famous/core/Engine');var Surface = require('famous/core/Surface');var mainContext = Engine.createContext();var firstSurface = new Surface({ size: [true, undefined], content: 'hello world', properties: { color: 'white', textAlign: 'center', backgroundColor: '#FA5C4F' }});mainContext.add(firstSurface);
Positioning Elements
最常见的做法就是使用StateModifier,在StateModifier的transform 属性中指明偏移的x、y。
var Engine = require('famous/core/Engine');var Surface = require('famous/core/Surface');var Transform = require('famous/core/Transform');var StateModifier = require('famous/modifiers/StateModifier');var mainContext = Engine.createContext();var stateModifier = new StateModifier({ transform: Transform.translate(150, 100, 0)});var surface = new Surface({ size: [100, 100], properties: { backgroundColor: '#FA5C4F' }});mainContext.add(stateModifier).add(surface);//在渲染之前
Transforms
Transform.translate()返回的变换后的矩形区域。var Engine = require('famous/core/Engine');var Surface = require('famous/core/Surface');var StateModifier = require('famous/modifiers/StateModifier');var Transform = require('famous/core/Transform');var mainContext = Engine.createContext();var translateModifierOne = new StateModifier({ transform: Transform.translate(200, 0, 0)});var translateModifierTwo = new StateModifier({ transform: Transform.translate(200, 0, 0)});var rotateModifierOne = new StateModifier({ transform: Transform.rotateZ(Math.PI/4)});var rotateModifierTwo = new StateModifier({ transform: Transform.rotateZ(Math.PI/4)});var redSurface = new Surface({ size: [100, 100], classes: ['red-bg']});var greySurface = new Surface({ size: [100, 100], classes: ['grey-bg']});mainContext .add(translateModifierOne) .add(rotateModifierOne) .add(redSurface);mainContext .add(rotateModifierTwo) .add(translateModifierTwo) .add(greySurface);
Align and Origin
指定位置的另外一种方法是使用StateModifier的StateModifier属性,用法与transform类似。var view = new View({});view.add(new Surface({ properties: { backgroundColor: '#FA5C4F' }}));var viewModifier = new StateModifier({ size: [200, 200], origin: origin, align: align});var positions = [ [0, 0], [0, 1], [1, 0], [1, 1]];for (var i = 0; i < positions.length; i++) { var surface = new Surface({ size: [true, true], properties: { backgroundColor: 'blue' }, content: 'origin:<br>' + positions[i] }); var modifier = new StateModifier({ origin: positions[i], align: positions[i] }); view.add(modifier).add(surface);}mainContext.add(viewModifier).add(view);//
1 0
- Famo.us Diasplaying Content/Positioning Elements
- famo.us的事件机制
- famo.us 3D游戏引擎初探
- HTML5 框架 Famo.us 获4百万美元融资
- 使用Famo.us 创建高性能移动 UI
- Content-Language:en-US
- 最炫的HTML5框架Famo.us 将免费面向开发者
- 这个会是真的吗:HTML5框架Famo.us 免费面向开发者
- Positioning
- XSLT(3) content outputing elements
- tomcat Content-Language:en-US 导致乱码
- 解读Elements of Web 2.0-Style Content
- 解决 Unable to add dynamic content. A script attempted to inject dynamic content, or elements previous
- CSS Positioning
- CSS Positioning
- CSS Positioning
- UIView-Positioning
- Charset from HTTP Content-Type US-ASCII does not match encoding from XML declaration GBK
- java.lang.ClassNotFoundException: org.git.mm.mysql.Driver异常处理
- 怎么样恢复硬盘数据删除的文件
- html parser
- Segmentation fault (core dumped)
- lvs、haproxy、nginx 负载均衡的比较分析
- Famo.us Diasplaying Content/Positioning Elements
- Redis 如何处理客户端连接
- NSString的strong和copy
- 黑马程序员————java代理学习笔记
- shell 中的循环使用
- 安卓AlertDialog子窗口两种功能的实现
- 清朝十二帝记忆顺口溜
- 使用javascript访问kettle内部组件
- spilt 函数的一些特殊分割符