README
plutojs
介绍
基于canvas开发的游戏框架
安装及使用方式
将plutojs.js引入到项目中,可以通过window.plutojs获取对象
接口及调用方式
初始化
let obj = new window.plutojs.Main(dom);//dom:dom元素
obj.run(view);//view:json格式对象
获取组件对象
component.getComponentById:用id获取单个组件
component.getComponentByName:用name获取单个组件
component.getComponentsByName:用name获取组件数组
视图文件例子
import MainController from "../controller/mainController.js";
export default {
controller : MainController,
type : "rect",
style : {
x : 0,
y : 0,
width : "100%",
height : "100%",
backgroundColor : "#ffffff"
},
events : {
"click" : "clickMain",
"mousedown" : "mouseDown"
}
}
组件属性
通用属性
parent
父组件对象
children
子节点数组
active
是否显示组件
hasClip
是否遮挡子组件,类似css的overflow:hidden
text
显示的文本内容
style.textAlign
文字显示方式;例:center
style.x
x坐标,相对于父组件
style.y
y坐标,相对于父组件
style.width
宽度
style.height
高度
style.lineHeight
行高度,类似css的ling-height
style.backgroundColor
背景颜色
style.backgroundImage
背景图片
style.fontFamily
字体;例:"Microsoft YaHei"
style.fontSize
字体大小;例:14px
style.fontColor
字体颜色
style.zIndex
类似css的z-index
style.multiLine
是否多行文本,设置text属性后文字内容是否可以换行,默认true
style.autoLine
是否自动换行
style.scale
缩放比例;例:"1.0,1.0"
style.rotate
旋转角度,角度为单位
style.mirror
镜像翻转;例:horizontal水平翻转,vertical垂直翻转
style.alwaysDraw
组件在被遮挡的情况下是否仍然需要绘制
animation
动画属性; 例:
export default {
type: "rect",
style : {
x: 0,
y: 0,
width: "100%",
height: "100%"
},
animation : {
scale: {
duration: "200ms",
easeType: "Linear",
easing: "easeOut"
}
}
}
easing和easeType设置参照TweenLite的easing
Rect矩形组件
style.borderWidth
边框宽度
style.borderColor
边框颜色
style.borderRadius
圆角边框,设置圆角半径
style.draggable
是否支持拖动
Button按钮
Checkbox
Input输入框
Scrollbar滚动条
例:
export default {
name : "scrollbarTest",
type : "rect",
style : {
width : "50%",
height : "100%"
},
children : [
{
type : "scrollbar",
children : [
//scrollbar的children如果超过scrollbar大小会自动生成滚动条
]
}
]
}
Router路由
例:
import mainView from "./mainView.js";
export default {
id : "mainRoute",
type : "route",
routes : {
"main" : {
view : mainView,
default : true
},
"movement" : {
view : (get) => {
return new Promise((resolve, reject)=>{//异步加载movementView.js
require.ensure([], require => {
get(require("./movement/movementView.js").default, resolve, reject);
},'movementView');
});
}
},
"test" : {
view : (get) => {
return new Promise((resolve, reject)=>{
require.ensure([], require => {
get(require("./test1View.js").default, resolve, reject);
},'test1View');
});
}
}
}
}
切换路由调用:
let mainRoute = this.viewState.getComponentById("mainRoute");
mainRoute.changeRoute("test");
事件
事件绑定可以在json里配置events属性 例:
import MainController from "./mainController";
export default {
controller : MainController,
type : "rect",
style : {
x : 0,
y : 0,
width : "100%",
height : "100%",
backgroundColor : "#ffffff"
},
events : {
"click" : "clickMain",
"mousedown" : "mouseDown"
}
}
然后在MainController中定义clickMain和mouseDown方法可以接受事件回调 手动注册事件:
component.registerEvent("mousedown", function(e){
console.log(e);
});
移除事件:
component.removeEvent("mousemove", fun);//fun为注册事件时传入的function对象,注意必须是同一个function对象
手动触发事件
component.triggerEvent("click");
事件类型
click
点击事件
mousedown
mousemove
mouseup
keydown
keyup
mousewheel
鼠标滚轮事件,e.wheelDelta小于0是向上滚动
startDrag
开始拖动,必须设置style.draggable属性
onDrag
拖动过程当中,必须设置style.draggable属性
endDrag
停止拖动,必须设置style.draggable属性 注:拖动事件不能冒泡
$onViewLoaded
组件加载完成事件
布局
目前只支持linearLayout线性布局 例:
export default {
type : "rect",
style : {
x : 0,
y : 0,
width : "100%",
height : "100%",
layout : {
type : "linearLayout",
orientation : "horizontal"
}
},
children : [
{
type : "rect",
style : {
width : "100%",
backgroundColor : "#60ba4c",
layout : {
layoutWeight : 1,//占用的大小权值
contentAlign : "center"//如果是垂直布局组件是否水平居中,反之亦然
}
}
},
{
type : "rect",
style : {
width : "100%",
backgroundColor : "#60ba4c",
layout : {
layoutWeight : 2
}
}
}
]
}
orientation : "horizontal":水平布局
orientation : "vertical":垂直布局
外部提供
window.plutojs.Main
主对象
window.plutojs.commonUtil
通用方法封装
window.plutojs.httpUtil
网络请求
window.plutojs.Thread
线程
window.plutojs.Controller
定义controller时需集成此类
window.plutojs.MPromise
异步执行封装
window.plutojs.animationUtil
动画组件 例:
window.plutojs.animationUtil.executeAttrChange(obj, {
x : 10,
y : 10
}, {
delay : 100,
duration : 1,//秒
easeType : "Linear",
easing : "ease"
});
对外提供组件
window.plutojs.components.Button
window.plutojs.components.Checkbox
window.plutojs.components.Input
window.plutojs.components.Rect
window.plutojs.components.Scrollbar
window.plutojs.components.Sprite
window.plutojs.components.Router
对外提供绘制封装
window.plutojs.draw.ArcPath window.plutojs.draw.PointPath window.plutojs.draw.Path window.plutojs.draw.Arc window.plutojs.draw.Point window.plutojs.draw.SequenceDraw
对外提供的通用插件
window.plutojs.util.Thread window.plutojs.util.MPromise window.plutojs.util.commonUtil window.plutojs.util.httpUtil window.plutojs.util.animationUtil