potree-sdk/src/custom/objects/TextSprite.js

// /**
//  * adapted from http://stemkoski.github.io/Three.js/Sprite-Text-Labels.html
//  */

import * as THREE from "../../../libs/three.js/build/three.module.js";
import Sprite from './Sprite.js' 
import Common from '../utils/Common.js';

//可能还是要用html写，因为要加按钮和图片
 
export class TextSprite extends THREE.Object3D{ 
    //注：为了分两层控制scale，不直接extend Sprite
	constructor( options={}){ 
        super()
		let map = new THREE.Texture();
		map.minFilter = THREE.LinearFilter;
		map.magFilter = THREE.LinearFilter;
        
        this.sprite = new Sprite( Object.assign({
                root:this
            }
            ,options,
            { 
                map,
            })
        )
        this.add(this.sprite)
        
        this.fontWeight = options.fontWeight == void 0 ? 'Bold' : options.fontWeight
		this.rectBorderThick = options.rectBorderThick || 0
		this.textBorderThick = options.textBorderThick || 0
		this.fontface = 'Arial';
		this.fontsize = options.fontsize ||  16; 
        this.textBorderColor = options.textBorderColor ? Common.CloneObject(options.textBorderColor):{ r: 0, g: 0, b: 0, a: 0.0 };
		this.backgroundColor = options.backgroundColor ? Common.CloneObject(options.backgroundColor):{ r: 255, g: 255, b: 255, a: 1.0 };
		this.textColor = options.textColor ? Common.CloneObject(options.textColor):{r: 0, g: 0, b: 0, a: 1.0};
        this.borderColor = options.borderColor  ? Common.CloneObject(options.borderColor):{ r: 0, g: 0, b: 0, a: 0.0 };
		this.borderRadius = options.borderRadius || 6;
        this.margin = options.margin
        this.setText(options.text)
        this.name = options.name 
         
		//this.setText(text);
        
        
         
	}

	setText(text){  
        if(text == void 0)text = ''
        if (this.text !== text) {
            if (!(text instanceof Array)) {
                this.text = [text + '']
            } else this.text = text
            this.updateTexture()
            this.sprite.waitUpdate() //重新计算各个viewport的matrix 
        }
	}

	setTextColor(color){
		this.textColor = Common.CloneObject(color);

		this.updateTexture();
	}

	setBorderColor(color){
		this.borderColor =  Common.CloneObject(color);

		this.updateTexture();
	}

	setBackgroundColor(color){
		this.backgroundColor =  Common.CloneObject(color);

		this.updateTexture();
	}
    setPos(pos){
        this.position.copy(pos)
        this.sprite.waitUpdate() 
    }
    update(){
        this.sprite.waitUpdate()
    }
    /* setVisible(v){ 
        Potree.Utils.updateVisible(this, 'setVisible', v)
    } */
    setUniforms(name,value){
        this.sprite.setUniforms(name,value)
    }
	updateTexture1(){
		let canvas = document.createElement('canvas');
		let context = canvas.getContext('2d');
        const r = window.devicePixelRatio
		context.font = this.fontWeight + ' ' + this.fontsize * r + 'px ' + this.fontface; 
       
        //context["font-weight"] = 100; //语法与 CSS font 属性相同。
		 
        //this.text = '啊啊啊啊啊啊fag'
        
		let metrics = context.measureText(this.text );
		let textWidth = metrics.width;
		let margin = (this.margin ? new THREE.Vector2().copy(this.margin) : new THREE.Vector2(this.fontsize, Math.max(  this.fontsize*0.4, 10)  )).clone().multiplyScalar(r); 
		let spriteWidth = 2 * margin.x + textWidth + 2 * this.rectBorderThick * r ;
		let spriteHeight = 2 * margin.y + this.fontsize * r + 2 * this.rectBorderThick * r; 
		context.canvas.width = spriteWidth;
		context.canvas.height = spriteHeight;
		context.font = this.fontWeight + ' ' + this.fontsize * r + 'px ' + this.fontface; 
 
        /* let diff = 2//针对英文大部分在baseLine之上所以降低一点(metrics.fontBoundingBoxAscent - metrics.fontBoundingBoxDescent) / 2

        context.textBaseline = "middle"
         */
        let expand = Math.max(1, Math.pow(this.fontsize / 16, 1.3)) * r  // 针对英文大部分在baseLine之上所以降低一点,或者可以识别当不包含jgqp时才加这个值  
         
        //canvas原点在左上角
        context.textBaseline = 'alphabetic' //  "middle"  //设置文字基线。当起点y设置为0时，只有该线以下的部分被绘制出来。middle时文字显示一半(但是对该字体所有字的一半，有的字是不一定显示一半的，尤其汉字)，alphabetic时是英文字母的那条基线。
        
        //let actualHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent; // 当前文本字符串在这个字体下用的实际高度
        
        //文字y向距离从textBaseline向上算
        let actualBoundingBoxAscent = metrics.actualBoundingBoxAscent == void 0 ? this.fontsize * r * 0.8 : metrics.actualBoundingBoxAscent //有的流览器没有。只能大概给一个
        let y = actualBoundingBoxAscent + margin.y + expand 
        //console.log(this.text, 'y' , y, 'actualBoundingBoxAscent', metrics.actualBoundingBoxAscent,'expand',expand )
                                  
        // border color
        context.strokeStyle = 'rgba(' + this.borderColor.r + ',' + this.borderColor.g + ',' +
            this.borderColor.b + ',' + this.borderColor.a + ')';
            
        let rectBorderThick = this.rectBorderThick * r;
        
        context.lineWidth = rectBorderThick
		// background color
		context.fillStyle = 'rgba(' + this.backgroundColor.r + ',' + this.backgroundColor.g + ',' +
			this.backgroundColor.b + ',' + this.backgroundColor.a + ')';
        this.roundRect(context, rectBorderThick / 2 , rectBorderThick / 2,
            spriteWidth - rectBorderThick, spriteHeight - rectBorderThick, this.borderRadius * r);
        
		// text color
        if(this.textBorderThick){
            context.strokeStyle = 'rgba(' + this.textBorderColor.r + ',' + this.textBorderColor.g + ',' +
                this.textBorderColor.b + ',' + this.textBorderColor.a + ')';
            context.lineWidth = this.textBorderThick * r;
            context.strokeText(this.text , rectBorderThick + margin.x,  y /* spriteHeight/2  + diff */ );
        }
        
		context.fillStyle = 'rgba(' + this.textColor.r + ',' + this.textColor.g + ',' +
			this.textColor.b + ',' + this.textColor.a + ')';
		context.fillText(this.text , rectBorderThick + margin.x,  y/* 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 / r, spriteHeight * 0.01 / r, 1.0);
        
        
         
	}
    
    
    
    updateTexture(){
       
		let canvas = document.createElement('canvas');
		let context = canvas.getContext('2d');
        const r = window.devicePixelRatio
		context.font = this.fontWeight + ' ' + this.fontsize * r + 'px ' + this.fontface; 
       
        //context["font-weight"] = 100; //语法与 CSS font 属性相同。
		 
        //this.text = '啊啊啊啊啊啊fag'
        let textMaxWidth = 0,
            infos = []
        for (let text of this.text) {
            let metrics = context.measureText(text)
            let textWidth = metrics.width
            infos.push(metrics)
            textMaxWidth = Math.max(textMaxWidth, textWidth)
        }
         
		let margin = (this.margin ? new THREE.Vector2().copy(this.margin) : new THREE.Vector2(this.fontsize, Math.max(  this.fontsize*0.4, 10)  )).clone().multiplyScalar(r); 
		const lineSpace = (this.fontsize + margin.y) * 0.5
        let spriteWidth = 2 * margin.x + textMaxWidth + 2 * this.rectBorderThick * r ;
		let spriteHeight = 2 * margin.y + this.fontsize * r * this.text.length + 2 * this.rectBorderThick * r + lineSpace * (this.text.length - 1); 
		context.canvas.width = spriteWidth;
		context.canvas.height = spriteHeight;
		context.font = this.fontWeight + ' ' + this.fontsize * r + 'px ' + this.fontface; 
        
        if(spriteWidth>1000){
            console.error('spriteWidth',spriteWidth,'spriteHeight',spriteHeight,this.fontsize,r,this.text,margin)
        }
 
        /* let diff = 2//针对英文大部分在baseLine之上所以降低一点(metrics.fontBoundingBoxAscent - metrics.fontBoundingBoxDescent) / 2

        context.textBaseline = "middle"
         */
        let expand = Math.max(1, Math.pow(this.fontsize / 16, 1.3)) * r  // 针对英文大部分在baseLine之上所以降低一点,或者可以识别当不包含jgqp时才加这个值  
         
        //canvas原点在左上角
        context.textBaseline = 'alphabetic' //  "middle"  //设置文字基线。当起点y设置为0时，只有该线以下的部分被绘制出来。middle时文字显示一半(但是对该字体所有字的一半，有的字是不一定显示一半的，尤其汉字)，alphabetic时是英文字母的那条基线。
              
        // border color
        context.strokeStyle = 'rgba(' + this.borderColor.r + ',' + this.borderColor.g + ',' + this.borderColor.b + ',' + this.borderColor.a + ')';
            
        let rectBorderThick = this.rectBorderThick * r; 
        context.lineWidth = rectBorderThick
		// background color
		context.fillStyle = 'rgba(' + this.backgroundColor.r + ',' + this.backgroundColor.g + ',' + this.backgroundColor.b + ',' + this.backgroundColor.a + ')';
        this.roundRect(context, rectBorderThick / 2 , rectBorderThick / 2, spriteWidth - rectBorderThick, spriteHeight - rectBorderThick, this.borderRadius * r);
        
        context.fillStyle = 'rgba(' + this.textColor.r + ',' + this.textColor.g + ',' + this.textColor.b + ',' + this.textColor.a + ')'
 
        
        
        let y = margin.y
        for (let i = 0; i < this.text.length; i++) {
            //let actualHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent // 当前文本字符串在这个字体下用的实际高度

            //文字y向距离从textBaseline向上算
            let actualBoundingBoxAscent = infos[i].actualBoundingBoxAscent == void 0 ? this.fontsize * r * 0.8 : infos[i].actualBoundingBoxAscent //有的流览器没有。只能大概给一个
            y += actualBoundingBoxAscent + expand
            //console.log(actualBoundingBoxAscent)

            //console.log(this.text, 'y' , y, 'actualBoundingBoxAscent', metrics.actualBoundingBoxAscent,'expand',expand )
            let textLeftSpace = (textMaxWidth - infos[i].width) / 2
            let x = this.rectBorderThick + margin.x + textLeftSpace
            // text color
            if (this.textBorderThick) {
                context.strokeStyle = 'rgba(' + this.textBorderColor.r + ',' + this.textBorderColor.g + ',' + this.textBorderColor.b + ',' + this.textBorderColor.a + ')'
                context.lineWidth = this.textBorderThick * r
                context.strokeText(this.text[i], x, y)
            }
              
            if (this.textshadowColor) {
                context.shadowOffsetX = 0
                context.shadowOffsetY = 0
                context.shadowColor = this.textshadowColor
                context.shadowBlur = 12 * r
            }
            context.fillText(this.text[i], x, y)

            y += lineSpace
        } 
        
		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 / r, spriteHeight * 0.01 / r, 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.dispose()
        this.removeAllListeners()
        this.dispatchEvent('dispose')
    }

}