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(); }