# pixi gui

**Repository Path**: MG-RANDOM/pixi-gui

## Basic Information

- **Project Name**: pixi gui
- **Description**: pixi gui
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-09-17
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 实验性质PIXI GUI

### 安装步骤
```
1.执行 npm i || yarn
2.执行 npm run dev || yarn dev
(会自动打开浏览器 http://localhost:9090/)

```

### TODO  
- [x] textAlign
- [x] verticalAlign
- [ ] transform
- [ ] width & height 百分比
- [x] to right bottom left 相对定位

### 计划支持
...s
### 暂不考虑
- [x] 流式布局


### example
``` javascript
<div textAlign="center" @tap=${this.clickHandle.bind(this)}>
    <img src="stage.png" /> 
    <img src="logo.png" top=50/>
    <div textAlign="center" verticalAlign="center" bottom=120 ontap.stop=${this.startGame.bind(this)}>
        <component is="Graphic" />
        <span fontSize=40>开始游戏</span>
    </div>
</div>
```
![demo](./doc/demo.png)

### 说明
 - 默认根节点的宽高会被设置为设计尺寸宽高
 - 事件监听格式为 @xxx|onxxx ,事件名为pixi支持的事件
 - img的src为已经通过pixiLoader下载的图片
 - textAlign 会设置子节点水平居中,子节点上的位置设置将会失效(比如x,y,top,left等待)
 - verticalAlign 会设置子节点垂直居中。如果该节点没有设置宽高，则会采用最高子节点作为宽高(pixi原生，container的宽高为实际子节点的宽高)，如果设置了宽高则使用设置的宽高
 - 原生组件(component)也会收到居中属性的影响
 - 节点上的属性名大多为pixi原生属性名，特殊的属性（如:@, span的color,textAlign等）非原生的则通过gui处理