Tiny.js UI plugin
http://tinyjs.net/plugins/tinyjs-plugin-ui.html#demo
-
推荐作为依赖使用
npm install tinyjs-plugin-ui --save
-
也可以直接引用线上cdn地址，注意要使用最新的版本号，例如：
首先当然是要引入，推荐NPM方式，当然你也可以使用CDN或下载独立版本，先从几个例子入手吧！
引用 Tiny.js 源码
<script src="https://gw.alipayobjects.com/os/lib/tinyjs/tiny/1.5.1/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);注意：
- 由于安全策略，ui.DOM 的渲染模式只支持 canvas，如果要用，需要将固定设置启动参数
renderType为Tiny.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);
Tiny.js: Link