Tiny.js UI插件
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
src
test
.babelrc
.editorconfig
.eslintrc
.gitignore
CHANGELOG.md
README.md
package.json
rollup.config.js

README.md

tinyjs-plugin-ui

Tiny.js UI plugin

查看demo

http://tinyjs.net/plugins/tinyjs-plugin-ui.html#demo

引用方法

起步

首先当然是要引入,推荐NPM方式,当然你也可以使用CDN或下载独立版本,先从几个例子入手吧!

1、最简单的例子

引用 Tiny.js 源码

<script src="https://gw.alipayobjects.com/as/g/tiny/tiny/1.2.0/tiny.js"></script>
var ui = require('tinyjs-plugin-ui');
// 或者
// import * as ui from 'tinyjs-plugin-ui';

var container = new Tiny.Container();
var btn = new ui.Button({
  text: 'Hello, Tiny.js',
  height: 100,
  width: 200,
  textPosition: 5,
  textStyle: {
    fill: 'white',
  },
  active: {
    scale: Tiny.scale(1.2, 1.1),
    callback: function () {
      console.log('you tap btn1');
    }
  }
});
container.addChild(btn);
2. 使用 Tiny.ui.DOM

注意:

  • 由于安全策略,ui.DOM 的渲染模式只支持 canvas,如果要用,需要将固定设置启动参数 renderTypeTiny.RENDERER_TYPE.CANVAS
  • 由于浏览器渲染机制问题,在Safari下,tinyjs-plugin-tiling 插件中的 TilingSprite 类会影响到 ui.DOM 的背景,可以通过添加顺序来规避(即后添加 TilingSprite 实例化显示对象),可以看看 demo 下的 "DOM & TilingSprite" 例子。
// 写一段 HTML
var html =
  '<div style="font-size:40px;color:#fff;">' +
  ' I<em> am </em><span style="color:gold;text-shadow:0 0 2px red;">Tiny.js</span><br/>你好,<b style="color:gold;text-shadow:1px 5px 5px orangered;">中国</b>' +
  '</div>';
var dom;
try {
  // 用上面的那段 HTML 生成 DOM 显示对象
  dom = new Tiny.ui.DOM({
   html: html,
  });
}catch(e){
  // 不支持的设备会报错,此时降级使用普通文本或使用图片
  dom = new Tiny.Text('Tiny.js\n你好,中国');
}
var container = new Tiny.Container();
// 将实例化的 dom 直接添加到显示容器中
container.addChild(dom);

依赖

API文档

http://tinyjs.net/plugins/tinyjs-plugin-ui.html#docs