import { render, style } from '@amoy/components'

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

game.loader.add('rect', rect).load((loader, resources) => {
    style({
        '.container': {
            width: '100%',
            height: '100%',
            centerX: 0,
            centerY: 0,
        },
    })

    render(`
        <container class="container">
            <sprite src="rect" style="width: 200; height: 200; left: 50; top: 50;">
        </container>
    `, game.stage)
})

使用元素API直接创建:

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

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

// 创建容器
const parent = View({
    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,
    // 开启后，所有元素会有黑色边缘展示
    debug: boolean，
})

创建元素

创建精灵

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

创建帧动画精灵

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

创建容器

View(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'

    // 文字垂直定位
    textJustify?: 'top' | 'center' | 'bottom'
	// 文字大小
	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
    // 播放速度: 1 ~ 60 帧 / s
    animatedSpeed?: number
 }

模板API

render(template, mountNode, extra)

template: 标签模板, 例如:

<container>
	<sprite>Sprite</sprite>
	<text>TEXT</text>
	<rect>
		<circle />		
	</rect>
	<animatedsprite />
</container>

标签上可以使用 id / class 匹配对应的样式

mountNode: 挂载到的元素。
extra: 数据，可在 template 的属性中获取，例如:

render(`
	<sprite src="data.texture" />
`, game.stage, {
	texture: texture,
})

style(css)

style({
	'.class': `width: 300; height: 300;`,
	'#id': {
		width: 300,
		height: 300,
	},
	tag: `font-size: 30`
})

元素操作

更新布局

// style 中的属性均可通过该方法直接更新
el.setStyle({
    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()

工具函数

el.transformStyle(style): 用于将 style 类型转换成便于外部使用的定位参数；
- return { x: number, y: number, width: number, height: number, rotation: number }

标签专属API

AnimatedSprite.replay()
- 当 AnimatedSprite.loop = false 时，该方法能使动画重新播放一遍；

Keywords

components

FAQs

What is @amoy/components?

Is @amoy/components well maintained?

Package last updated on 10 Sep 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@amoy/components