Oixi NPM | npm.io

OIXI

功能

使用pixi进行纯js组件式开发
初始化组件布局

目录说明

oixi: 库的主要代码
demo: 测试案例代码
dist: 案例编译后输出目录

npm脚本

npm run dev: 调试demo
npm run build: 输出demo

组件结构

//设置文本全局样式
setTextDefaultStyle({
  fill: '#fff'
})

function template() {
    //模板参数：#child1 @click=onClick $prop1=string x=number
    //# 组件id，对应同名成员变量，会赋值到组件显示对象的name属性上
    //#slot，在自定义组件中指定子显示对象作为插槽
    //@ 事件，事件处理函数的this绑定组件实例
    //$ 传给子组件的属性，子组件通过this.$.a获取，传入的值解析为字符串
    //不带前缀的表示直接设置显示对象的属性，自定义组件将设置view的属性，值类型是数字，一般用于设置x,y
    //ObservablePoint类型属性可直接赋值，例如anchor=0.5设置anchor.x和anchor.y均为0.5
    //也可以单独设置anchor.x=0.5
    //注意所有属性值都不能带空格
    return [
        Child1("#child1 @click=onClick $prop1=dd width=10 x=0"),
        OContainer([
            Child("#c1"),
            OContainer("#slot"),
            Child("#c3 $label=标题")
        ]),
        OText("Oixi Demo", "#title", style),
        OSprite("texture.png", "#aaa", [])
    ]
}

class ComponentClass extends AbstractComponent implements IRoute {
    $: {label:string} //从父容器传过来的
    child1: Child = null
    container:Sprite = null
    title:Text = null //内部组件继承pixi对象，没有view属性

    constructor() {
      //使用Sprite做自定义组件视图容器
      super(true)
    }

    onClick() {
        //事件可以使用pixi的EventEmitter
        this.emit('change')
    }

    //以下是Component的方法
    get view() {
        //返回这个组件的根容器DisplayObject
    }

    created(){
        //根据数据添加子显示对象列表可以在这里写
        let itemArray = [{text:'t1'}]
        itemArray.forEach(m =>{
            this.container.addChild(new Text(m.text))
        })

        //适配布局，相对于画布，要保证父容器和舞台同宽高
        layout(child1).top(0).left(0).center(0)
    }

    //以下是IRoute的方法
    actived() {}

    reactived() {}

    deactived() {}
}

export function Component(attributes, slots) {
    return buildComponent(new ComponentClass, attributes, slots, template)
}