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)
}

更新日志

• 1.3.4 去掉@pixi引用

• 1.3.3 OSprite的texture参数可传null，OGraphics的attributes参数可选

• 1.3.1~1.3.2 添加OParticleContainer组件

• 1.3.0 对应#id的组件成员如果是数组则使用这个成员push(#id) box:Container = []

• 1.2.0 AbstractComponent的子类可以使用super()关键字传入view的类型，取消isSprite参数

• 1.1.1 添加OText()设置样式时的类型提示ITextStyle

• 1.1.0 添加buildRootComponent方法，取消deleteOixiData方法

• 1.0.4 判断anchor等ObservablePoint类型，可以在模板中直接使用=号设置

• 1.0.3 可以在模板中设置多级属性，如anchor.x=0.5