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();
		 
        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
        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 = 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.update()
    }
    update(){
        this.sprite.update()
    }
    setVisible(v){ 
        Potree.Utils.updateVisible(this, 'setVisible', v)
    }
    setUniforms(name,value){
        this.sprite.setUniforms(name,value)
    }
	updateTexture(){
		let canvas = document.createElement('canvas');
		let context = canvas.getContext('2d');
		context.font = this.fontWeight + ' ' + this.fontsize + 'px ' + this.fontface; 
       
        //context["font-weight"] = 100; //语法与 CSS font 属性相同。
		// get size data (height depends only on font size)
        
        //this.text = 'f 啊啊啊 jg'
        
		let metrics = context.measureText(this.text );
		let textWidth = metrics.width;
		let margin = this.margin || new THREE.Vector2(this.fontsize, Math.max(  this.fontsize*0.4, 10)  );
		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 = this.fontWeight + ' ' + this.fontsize + 'px ' + this.fontface; 

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

		let texture = new THREE.Texture(canvas);
		texture.minFilter = THREE.LinearFilter; //LinearMipMapLinearFilter会缩放到power of 2
		texture.magFilter = THREE.LinearFilter;
		texture.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()
    }

}