|
@@ -38,6 +38,7 @@ export class TextSprite extends THREE.Object3D{
|
|
this.textColor = options.textColor || {r: 0, g: 0, b: 0, 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.borderColor = options.borderColor || { r: 0, g: 0, b: 0, a: 0.0 };
|
|
this.borderRadius = options.borderRadius || 6;
|
|
this.borderRadius = options.borderRadius || 6;
|
|
|
|
+ this.margin = options.margin
|
|
if(options.text != void 0)this.setText(options.text)
|
|
if(options.text != void 0)this.setText(options.text)
|
|
this.name = options.name
|
|
this.name = options.name
|
|
|
|
|
|
@@ -97,7 +98,7 @@ export class TextSprite extends THREE.Object3D{
|
|
|
|
|
|
let metrics = context.measureText(this.text );
|
|
let metrics = context.measureText(this.text );
|
|
let textWidth = metrics.width;
|
|
let textWidth = metrics.width;
|
|
- let margin = new THREE.Vector2(this.fontsize, Math.max( this.fontsize*0.4, 10) );
|
|
|
|
|
|
+ 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 spriteWidth = 2 * margin.x + textWidth + 2 * this.rectBorderThick;
|
|
let spriteHeight = 2 * margin.y + this.fontsize + 2 * this.rectBorderThick;
|
|
let spriteHeight = 2 * margin.y + this.fontsize + 2 * this.rectBorderThick;
|
|
context.canvas.width = spriteWidth;
|
|
context.canvas.width = spriteWidth;
|
|
@@ -105,10 +106,22 @@ export class TextSprite extends THREE.Object3D{
|
|
context.font = this.fontWeight + ' ' + this.fontsize + 'px ' + this.fontface;
|
|
context.font = this.fontWeight + ' ' + this.fontsize + 'px ' + this.fontface;
|
|
|
|
|
|
|
|
|
|
- let diff = 2//针对英文大部分在baseLine之上所以降低一点(metrics.fontBoundingBoxAscent - metrics.fontBoundingBoxDescent) / 2
|
|
|
|
|
|
+ /* let diff = 2//针对英文大部分在baseLine之上所以降低一点(metrics.fontBoundingBoxAscent - metrics.fontBoundingBoxDescent) / 2
|
|
|
|
|
|
context.textBaseline = "middle"
|
|
context.textBaseline = "middle"
|
|
|
|
+ */
|
|
|
|
+ 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
|
|
// border color
|
|
context.strokeStyle = 'rgba(' + this.borderColor.r + ',' + this.borderColor.g + ',' +
|
|
context.strokeStyle = 'rgba(' + this.borderColor.r + ',' + this.borderColor.g + ',' +
|
|
this.borderColor.b + ',' + this.borderColor.a + ')';
|
|
this.borderColor.b + ',' + this.borderColor.a + ')';
|
|
@@ -125,12 +138,12 @@ export class TextSprite extends THREE.Object3D{
|
|
context.strokeStyle = 'rgba(' + this.textBorderColor.r + ',' + this.textBorderColor.g + ',' +
|
|
context.strokeStyle = 'rgba(' + this.textBorderColor.r + ',' + this.textBorderColor.g + ',' +
|
|
this.textBorderColor.b + ',' + this.textBorderColor.a + ')';
|
|
this.textBorderColor.b + ',' + this.textBorderColor.a + ')';
|
|
context.lineWidth = this.textBorderThick;
|
|
context.lineWidth = this.textBorderThick;
|
|
- context.strokeText(this.text , this.rectBorderThick + margin.x,spriteHeight/2 + diff );
|
|
|
|
|
|
+ context.strokeText(this.text , this.rectBorderThick + margin.x, y /* spriteHeight/2 + diff */ );
|
|
}
|
|
}
|
|
|
|
|
|
context.fillStyle = 'rgba(' + this.textColor.r + ',' + this.textColor.g + ',' +
|
|
context.fillStyle = 'rgba(' + this.textColor.r + ',' + this.textColor.g + ',' +
|
|
this.textColor.b + ',' + this.textColor.a + ')';
|
|
this.textColor.b + ',' + this.textColor.a + ')';
|
|
- context.fillText(this.text , this.rectBorderThick + margin.x, spriteHeight/2 + diff );//x,y
|
|
|
|
|
|
+ context.fillText(this.text , this.rectBorderThick + margin.x, y/* spriteHeight/2 + diff */ );//x,y
|
|
|
|
|
|
let texture = new THREE.Texture(canvas);
|
|
let texture = new THREE.Texture(canvas);
|
|
texture.minFilter = THREE.LinearFilter;
|
|
texture.minFilter = THREE.LinearFilter;
|