IronTowerCorrect/core/TextSprite.js

export class TextSprite extends THREE.Object3D {
    constructor(options = {}) {
        super()
        let map = new THREE.Texture()
        map.minFilter = THREE.LinearFilter
        map.magFilter = THREE.LinearFilter

        this.sprite = new THREE.Sprite(
            new THREE.SpriteMaterial({
                map,
                color: 0xffffff,
                transparent: true,
                depthTest: false,
                depthWrite: false,
            })
        )
        this.add(this.sprite)
        this.sprite.renderOrder = options.renderOrder != void 0 ? options.renderOrder : 2

        this.rectBorderThick = options.rectBorderThick || 0
        this.textBorderThick = options.textBorderThick || 0
        this.fontface = 'Arial'
        this.fontsize = options.fontsize || 16
        this.textBorderColor = options.textBorderColor || { r: 0, g: 0, b: 0, a: 0.0 }
        this.backgroundColor = options.backgroundColor || { r: 255, g: 255, b: 255, a: 1.0 }
        this.textColor = options.textColor || { r: 0, g: 0, b: 0, a: 1.0 }
        this.borderColor = options.borderColor || { r: 0, g: 0, b: 0, a: 0.0 }
        this.borderRadius = options.borderRadius || 6
        if (options.text != void 0) this.setText(options.text)
        this.name = options.name

        //this.setText(text);

        this.addEventListener('dispose', this.dispose.bind(this))
    }

    setText(text) {
        if (this.text !== text) {
            this.text = text + ''

            this.updateTexture()
        }
    }

    setTextColor(color) {
        this.textColor = color

        this.updateTexture()
    }

    setBorderColor(color) {
        this.borderColor = color

        this.updateTexture()
    }

    setBackgroundColor(color) {
        this.backgroundColor = color

        this.updateTexture()
    }
    setPos(pos) {
        this.position.copy(pos)
        this.sprite.update()
    }
    update() {
        this.sprite.update()
    }
    setVisible(v) {
        this.visible = v
    }
    setUniforms(name, value) {
        this.sprite.setUniforms(name, value)
    }
    updateTexture() {
        let canvas = document.createElement('canvas')
        let context = canvas.getContext('2d')
        context.font = 'Bold ' + this.fontsize + 'px ' + this.fontface

        context['font-weight'] = 100 //语法与 CSS font 属性相同。
        // get size data (height depends only on font size)

        //this.text = '啊啊啊啊啊啊fag'

        let metrics = context.measureText(this.text)
        let textWidth = metrics.width
        let margin = new THREE.Vector2(this.fontsize, this.fontsize * 0.4)
        let spriteWidth = 2 * margin.x + textWidth + 2 * this.rectBorderThick
        let spriteHeight = 2 * margin.y + this.fontsize + 2 * this.rectBorderThick
        context.canvas.width = spriteWidth
        context.canvas.height = spriteHeight
        context.font = 'Bold ' + this.fontsize + 'px ' + this.fontface

        let diff = 2 //针对英文大部分在baseLine之上所以降低一点(metrics.fontBoundingBoxAscent - metrics.fontBoundingBoxDescent) / 2

        context.textBaseline = 'middle'

        // border color
        context.strokeStyle = 'rgba(' + this.borderColor.r + ',' + this.borderColor.g + ',' + this.borderColor.b + ',' + this.borderColor.a + ')'

        context.lineWidth = this.rectBorderThick
        // background color
        context.fillStyle = 'rgba(' + this.backgroundColor.r + ',' + this.backgroundColor.g + ',' + this.backgroundColor.b + ',' + this.backgroundColor.a + ')'
        this.roundRect(context, this.rectBorderThick / 2, this.rectBorderThick / 2, spriteWidth - this.rectBorderThick, spriteHeight - this.rectBorderThick, this.borderRadius)

        // text color
        if (this.textBorderThick) {
            context.strokeStyle = 'rgba(' + this.textBorderColor.r + ',' + this.textBorderColor.g + ',' + this.textBorderColor.b + ',' + this.textBorderColor.a + ')'
            context.lineWidth = this.textBorderThick
            context.strokeText(this.text, this.rectBorderThick + margin.x, spriteHeight / 2 + diff)
        }

        context.fillStyle = 'rgba(' + this.textColor.r + ',' + this.textColor.g + ',' + this.textColor.b + ',' + this.textColor.a + ')'
        context.fillText(this.text, this.rectBorderThick + margin.x, spriteHeight / 2 + diff) //x,y

        let texture = new THREE.Texture(canvas)
        texture.minFilter = THREE.LinearFilter
        texture.magFilter = THREE.LinearFilter
        texture.needsUpdate = true
        //this.material.needsUpdate = true;

        if (this.sprite.material.map) {
            this.sprite.material.map.dispose()
        }
        this.sprite.material.map = texture

        this.sprite.scale.set(spriteWidth * 0.01, spriteHeight * 0.01, 1.0)
    }

    roundRect(ctx, x, y, w, h, r) {
        ctx.beginPath()
        ctx.moveTo(x + r, y)
        ctx.lineTo(x + w - r, y)
        ctx.arcTo(x + w, y, x + w, y + r, r) //圆弧。前四个参数同quadraticCurveTo
        //ctx.quadraticCurveTo(x + w, y, x + w, y + r); //二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点，第二个点是曲线的结束点。
        ctx.lineTo(x + w, y + h - r)
        ctx.arcTo(x + w, y + h, x + w - r, y + h, r)
        ctx.lineTo(x + r, y + h)
        ctx.arcTo(x, y + h, x, y + h - r, r)
        ctx.lineTo(x, y + r)
        ctx.arcTo(x, y, x + r, y, r)
        ctx.closePath()
        ctx.fill()
        ctx.stroke()
    }

    dispose() {
        this.sprite.material.uniforms.map.value.dispose()
        this.parent && this.parent.remove(this)
        this.sprite.dispatchEvent({ type: 'dispose' })
        this.removeAllListeners()
    }
}