@amoy/components

@amoy/components

使用该插件，可以快速进行元素布局。

使用姿势：

import { createComponent, Sprite, Container, Rect, Text, Circle } from '@amoy/components'
import rect from './images/rect.jpg'

// 使用 PIXI 原生创建游戏
const game = new PIXI.Application()

// 创建容器
const parent = Container({
    width: 600,
    height: 600,
    centerX: 0,
    centerY: 0,
    borderWidth: 5,
    borderColor: 'black',
})
parent.appendTo(game.stage)

// 创建精灵图
game.loader.add('rect', rect).load((loader, resources) => {
	const sprite = Sprite(resources.rect.texture, {
        width: 200,
        height: 200,
        left: 50, 
        top: 50,
    })
    sprite.appendTo(parent)
})

// 创建文字
const text = Text('我是一排文字~我会根据宽度自动换行~~', {
    width: 200,
    height: 200,
    right: 50,
    bottom: 50,
    fontSize: 30,
    color: '#a72461',
    lineHeight: 60,
})
text.appendTo(parent)

// 创建图形
const rect = Rect({
    backgroundColor: '#f9e090',
    borderWidth: 5,
    borderColor: '#dc5353',
    // borderRadius: 20,
    width: 200,
    height: 200,
    right: 50,
    top: 50,
})
rect.appendTo(parent)

API

configComponents

全局配置 Components

configComponents({
	// UI稿宽度，用于计算缩放比进行不同屏幕的自适应
    uiDesignWidth: 1000,
})

创建元素

创建精灵

Sprite(image: PIXI.Texture | HTMLCanvasElement | HTMLVideoElement | HTMLImageElement, Style)

创建帧动画精灵

// animatedFrames: 准备播放的 texture 资源数组
// 可以自行拼装，也可以通过 spritesheet 工具生成 
AnimatedSprite(animatedFrames: PIXI.Texture[], style)

创建容器

Container(style)

创建矩形

Rect(style)

创建圆形

Circle(style)

创建文字

Text(content: string, style)

style

布局参数

interface style {

	 // 元素宽度， 选填
	 // 不填时根据默认尺寸
	 // 	sprite 根据原图尺寸
	 // 	text 根据父级容器宽度
	 // 参数: 500 | '500px' | '50%'
	 // 当参数包含 px 时， 则为实际像素，不会进行UI比缩放；
    width?: string | number,
    
    // 元素高度， 选填
    // 不填时， 
    // 	sprite 根据原图比例进行计算，
    // 	text 根据 fontSize 和 lineHeight 自适应，其余为 1
    height?: string | number,
    
    // 定位坐标，选填， 默认值为 0
    // 可配置多种参数形式:
	    // 100 | '100px' | '100%'     
	    // 当有 ’px‘ 单位时，该值不会基于 UI缩放比 进行缩放
	left?: string | number,
	right?: string | number,
	top?: string | number,
	bottom?: string | number,
	centerX?: string | number,
    centerY?: string | number,
    
    // 旋转角度，选填， 默认值为 0
    // 参数形式: 
	    // 当为 number 时， 表示弧度， rotation: 1
	    // 当为 string 时， 则表示角度, rotation: '45' | '45deg'
	rotation?: number | string,
	
	// 缩放值，默认状态为 1
	scale?: number
    
    // 透明度， 默认状态为 1
    opacity?: number,
    
	// 设置背景颜色
		// 支持写法: 'red' | '#ffffff' | 0xffffff
		// 支持标签: rect / container / circle 
    backgroundColor?: number | string,
    
    // 设置精灵图显示区域
        // 支持标签: sprite
        // eg: [x, y, width, height]
    backgroundFrame?: number[],
    
    // 设置边框
    	// 支持标签: rect / container / circle 
	borderWidth?: number | string,
	// 设置边框颜色
		// 支持写法: 'red' | '#ffffff' | 0xffffff
   	borderColor?: number | string,
	
	// 设置圆角
	borderRadius?: number | string,

    // 超出的部分是否显示
    overflow?: 'hidden',
    
    // 设置锚点，默认值为 { x: .5, y: .5 }
    anchor?: { x: number, y: number },
    
    // 层级
    zIndex?: number
    
    // 文字属性，专属于 text 标签
    // 会继承于父级
	// 文字颜色
		// 支持写法: 'red' | '#ffffff' | 0xffffff
    color?: string,
    // 元素中的文字默认定位
    textAlign?: 'left' | 'center' | 'right'
	// 文字大小
	fontSize?: number | string,
	fontWeight?: 'normal'| 'bold'| 'bolder'| 'lighter' | '100' | '200' ...
	fontStyle?: 'normal' | 'italic' | 'oblique'
	fontFamily?: string | string[]
	lineHeight?: number,
        
   // 更多属性可以参考 http://pixijs.download/release/docs/PIXI.TextStyle.html

    // AnimatedSprite 专属
    // 帧动画资源
    animatedFrames?: PIXI.Texture[]
    // 是否循环播放
    animatedLoop?: boolean
    // 播放速度: 0 ~ 1
    // 1: 60 f / s
    // 0.1: 6 f / s
    animationSpeed?: number
 }

元素操作

更新布局

// style 中的属性均可通过该方法直接更新
// 同样支持初始化时的语法糖
el.updateLayout({
    width: 500,
    height: 500,
})

// 单独设置 scale
el.layout.setScale(scale: number)

添加与删除

// 将自身添加到某容器中
child.appendTo(parent)

// 添加子元素
parent.append(child1)

// 在 child1 前面添加元素 child2
child1.before(child2)

// 在 child1 后面添加元素 child2
child1.after(child2)

// 将 child2 添加到 child1 前面
child2.insertBefore(child1)
// 将 child2 添加到 child1 后面
child2.insertAfter(child1)

// 移除 child2
child2.remove()
parent.removeChild(child2)

获取定位

// { width: number, height: number, x: number, y: number }
// 获取相对于父级的定位
el.getRelativeBounds()

// 获取相对于全局的定位
el.getGlobalBounds()