roadweb_front/public/assets/streetMap/StreetMap/js/TextSprite.js

var Align=
{
	center:0,
	left:1,
	right:2,
};
var Style=
{
	stroke:0,
	rect:1,
};
TextSprite = function(def){

	THREE.Object3D.call(this);


	var texture = new THREE.Texture();
	texture.minFilter = THREE.LinearFilter;
	texture.magFilter = THREE.LinearFilter;
	var material = new THREE.SpriteMaterial( { 
		map: texture,
		depthTest:false,
		//opacity:1,
		//sizeAttenuation:false,
		} );


	this.sprite = new THREE.Sprite(material);
	this.add(this.sprite);
	
	//THREE.Sprite.call(this, spriteMaterial);
	
	
	this.text = "";	
	this.offset = [0,0];
	this.style = {
		fontface:'微软雅黑',	//字体
		fontsize:15,			//字高			
		textColor:'#000000',	//文字颜色
		borderThickness:1,		//边框线宽，如果取0值，将禁用边框
		borderFillet:6,			//边框圆角
		borderColor:'rgba(0,0,0,0.8)',				//边框颜色
		backgroundColor:'rgba(255,255,255,0.8)',	//背景颜色
	}; 
	
	if (def!=null)
	{
		if (def.text!=null){
			this.text = def.text;
		}
		if (def.offset!=null){
			this.offset[0] = def.offset[0];
			this.offset[1] = def.offset[1];			
		}
		if (def.style!=null){
			if (def.style.fontface!=null)
				this.style.fontface = def.style.fontface;
			if (def.style.fontsize!=null)
				this.style.fontsize = def.style.fontsize;
			if (def.style.textColor!=null)
				this.style.textColor = def.style.textColor;
			if (def.style.borderThickness!=null)
				this.style.borderThickness = def.style.borderThickness;
			if (def.style.borderFillet!=null)
				this.style.borderFillet = def.style.borderFillet;
			if (def.style.borderColor!=null)
				this.style.borderColor = def.style.borderColor;
			if (def.style.backgroundColor!=null)
				this.style.backgroundColor = def.style.backgroundColor;
		}
	}
	this.update();
};

TextSprite.prototype = new THREE.Object3D();

TextSprite.prototype.setStyle = function(_style){

	 if (_style.fontface!=null)
		this.style.fontface = _style.fontface;
	if (_style.fontsize!=null)
		this.style.fontsize = _style.fontsize;
	if (_style.textColor!=null)
		this.style.textColor = _style.textColor;
	if (_style.borderThickness!=null)
		this.style.borderThickness = _style.borderThickness;
	if (_style.borderFillet!=null)
		this.style.borderFillet = _style.borderFillet;
	if (_style.borderColor!=null)
		this.style.borderColor = _style.borderColor;
	if (_style.backgroundColor!=null)
		this.style.backgroundColor = _style.backgroundColor;


	this.update();
}
TextSprite.prototype.setOffset = function(dx, dy){
	this.offset[0] = dx;
	this.offset[1] = dy;
	
	this.update();
}
TextSprite.prototype.setText = function(text){
	this.text = text;
	
	this.update();
}
TextSprite.prototype.update = function(){
	// 青岛定制
	this.style.fontsize = 120;
	
	//var fontDef = "Bold " + this.fontsize + "px " + this.fontface;
	var fontDef = this.style.fontsize + "px " + this.style.fontface;	
	var canvas = document.createElement('canvas');
	var context = canvas.getContext('2d');
	context.font = fontDef;
	
	// get size data (height depends only on font size)
	var metrics = context.measureText( this.text );
	var textWidth = metrics.width;
	var margin = Math.round(this.style.fontsize * 0.2) + this.style.borderThickness;
	var spriteWidth = textWidth + 2*margin;
	var spriteHeight = this.style.fontsize + 2*margin;
	
	/*
		20190313
		不知道当时是怎么做的，上面有canvas和context，这里又来一次
	*/
	//var canvas = document.createElement('canvas');
	//var context = canvas.getContext('2d');
	context.canvas.width = spriteWidth;
	context.canvas.height = spriteHeight;
	context.font = fontDef;
	
	if (this.style.borderThickness>0){
		// background color
		context.fillStyle   = this.style.backgroundColor;
		// border color
		context.strokeStyle = this.style.borderColor;
									  
		context.lineWidth = this.style.borderThickness;
		this.roundRect(context, this.style.borderThickness/2, this.style.borderThickness/2,
		spriteWidth-this.style.borderThickness, spriteHeight-this.style.borderThickness, this.style.borderFillet);						  
			
		// text color		
		context.fillStyle = this.style.textColor;
		context.fillText( this.text, margin, this.style.fontsize + margin/2);
		
	}
	else 
	{
		// text color
		context.strokeStyle = this.style.backgroundColor;
		context.strokeText( this.text, margin, this.style.fontsize + margin/2);
		
		context.fillStyle = this.style.textColor;
		context.fillText( this.text, margin, this.style.fontsize + margin/2);
		
	}
	
								  
	var texture = new THREE.Texture(canvas); 
	texture.minFilter = THREE.LinearFilter;
	texture.magFilter = THREE.LinearFilter;
	texture.needsUpdate = true;	
	
	//var spriteMaterial = new THREE.SpriteMaterial( 
	//	{ map: texture, useScreenCoordinates: false } );
	this.sprite.material.map = texture;
	
	/*
	var scale = spriteHeight/this.style.fontsize;
	var w = spriteWidth/spriteHeight*scale;
	var h = 1.0*scale;
	var dx = this.offset[0]/this.style.fontsize;
	var dy = this.offset[1]/this.style.fontsize;
	this.sprite.scale.set(w, h, 1);
	this.sprite.position.set(dx, 0, dy);	
	*/
	var width = window.innerWidth;
	var height = window.innerHeight;
	var scale = 1.0/window.innerHeight;
	this.sprite.scale.set(spriteWidth*scale, spriteHeight*scale, 1);

	
/* 	if(this.align==Align.center){
		this.sprite.position.set(dx, -h/2+dy, 0);
	}else if(this.align==Align.left){
		this.sprite.position.set(-w/2+dx, 0, -h/2+dy);
	}else if (this.align==Align.right){
		this.sprite.position.set(w/2+dx, 0, -h/2+dy);
	}
 */	//this.material = spriteMaterial;						  
}

TextSprite.prototype.roundRect = function(ctx, x, y, w, h, r) {
	w--;//很奇怪，如果不-1，会有被切掉的痕迹，估计是抗锯齿向外扩张了一些
	ctx.beginPath();
	ctx.moveTo(x+r, y);
	ctx.lineTo(x+w-r, y);
	ctx.quadraticCurveTo(x+w, y, x+w, y+r);
	ctx.lineTo(x+w, y+h-r);
	ctx.quadraticCurveTo(x+w, y+h, x+w-r, y+h);
	ctx.lineTo(x+r, y+h);
	ctx.quadraticCurveTo(x, y+h, x, y+h-r);
	ctx.lineTo(x, y+r);
	ctx.quadraticCurveTo(x, y, x+r, y);
	ctx.closePath();
	ctx.fill();
	ctx.stroke();   
}