@amoy/components/lib/addons/border/index.ts

components

import * as PIXI from 'pixi.js'
import { getCoverRect } from '../../utils'

export function border(co: any) {
    co.on('update', ({ instance, style }) => {
        const { layout } = instance
        if (layout.sizeHasChanged() || layout.styleHasChanged('borderWidth', 'borderRadius')) {
            const { borderWidth = 0, borderColor = 0x000000, borderRadius = 0, anchor = { x: .5, y: .5 } } = style
            const coverRect = getCoverRect(instance)
            if (coverRect && ['sprite', 'animatedsprite', 'text'].includes(instance.type)) {
                const { realScale, transform } = layout
                const { width } = instance.getGlobalBounds()
                
                const _borderWidth = transform.length(width, borderWidth) / realScale.x
                const _borderRadius = transform.length(width, borderRadius)
                const { x: coverX, y: coverY, width: coverWidth, height: coverHeight } = coverRect
                // ---------------------------------------------------------
                // Deal with border
                if (instance._border && instance._border.name === 'border') {
                    instance._border.destroy()
                    instance._border = null
                }
                if (_borderWidth > 0) {
                    // 绘制 border
                    const border = new PIXI.Graphics()
                    const gw = coverWidth - _borderWidth
                    const gh = coverHeight - _borderWidth
                    const gx = - coverWidth * anchor.x
                    const gy = - coverHeight * anchor.y
                    
                    border.lineStyle(_borderWidth, borderColor, 1)
                    if (_borderRadius >= width / 2) {
                        border.drawCircle(0, 0, gw / 2)
                    } else if (_borderRadius > 0) {
                        border.drawRoundedRect(gx, gy, gw, gh, _borderRadius)
                    } else {
                        border.drawRect(gx, gy, gw, gh)
                    }
                    border.name = 'border'
                    instance.addChildAt(border, (instance._background ? 1 : 0))
                    instance._border = border
                }
                // ----------------------------------------------------------
                // Deal with borderRadius
                if (instance.mask && instance.mask.name === 'border-mask') {
                    instance.mask.destroy()
                    instance.mask = null
                }
                if (_borderRadius && _borderRadius > 0) {
                    // 设置 mask
                    const mask = new PIXI.Graphics()
                    mask.beginFill(0xFFFFFF)
                    if (_borderRadius >= width / 2) {
                        mask.drawCircle(0, 0, coverWidth / 2)
                    } else {
                        mask.drawRoundedRect(coverX, coverY, coverWidth, coverHeight, _borderRadius + _borderWidth / 2)
                    }
                    mask.endFill()
                    mask.name = 'border-mask'
                    instance.addChildAt(mask, 0)
                    instance.mask = mask
                }
            }   
        }
    })
}