function Label(text,option) {
|
|
if ( option === undefined ) option = {};
|
|
this.fontface = option.hasOwnProperty("fontface") ?
|
option["fontface"] : "Arial";
|
|
/* 字体大小 */
|
this.fontsize = option.hasOwnProperty("fontsize") ?
|
option["fontsize"] : 18;
|
|
this.fontColor=option.hasOwnProperty("fontColor") ?
|
option["fontColor"] : "#FFFFFF";
|
/* 背景颜色 */
|
this.backgroundColor = option.hasOwnProperty("backgroundColor") ?
|
option["backgroundColor"] : 'rgba(8, 36, 85, 0.8)';;
|
|
let canvas = document.createElement('canvas');
|
let context = canvas.getContext('2d');
|
|
context.font = "Bold " + this.fontsize + "px " + this.fontface;
|
|
/* 获取文字的大小数据，高度取决于文字的大小 */
|
var metrics = context.measureText( text );
|
var textWidth = metrics.width;
|
// 定义画布的宽度
|
canvas.width = (textWidth+textWidth*0.4);
|
// 定义画布的高度
|
canvas.height = (this.fontsize*2);
|
// 定义canvas画笔的x坐标点
|
let x = 0;
|
// 定义canvas画笔的y坐标点
|
let y = 0;
|
// 定义圆角的半径
|
let r = 15;
|
// 提示框的宽度
|
let w = canvas.width;
|
// 提示框的高度======》画布高度-下放三角箭头的高度
|
let h = canvas.height-r;
|
// 缩放
|
context.scale(1, 1);
|
// 背景颜色
|
context.fillStyle=this.backgroundColor;
|
|
// 开始
|
context.beginPath();
|
// 画笔移动到起始位置
|
context.moveTo(x + r, y);
|
// 绘制右上角的圆角
|
context.arcTo(x + w, y, x + w, y + h, r);
|
// 绘制右下角的圆角
|
context.arcTo(x + w, y + h, x, y + h, r);
|
|
// 画三角形轮廓
|
// 绘制到三角形起点的位置
|
context.lineTo(x + w, y + h);
|
// 绘制三角形的起点到顶点的线段
|
context.lineTo(x + w / 2 + 10, y + h);
|
// 绘制顶点到三角形另一边的线段
|
context.lineTo(x + w / 2, y + h+r);
|
// 绘制三角形结束点到左下方的圆角起始处
|
context.lineTo(x + w / 2 - 10, y + h );
|
|
// 绘制左下角的圆角
|
context.arcTo(x, y + h, x, y, r);
|
// 绘制左上角的圆角
|
context.arcTo(x, y, x + w, y, r);
|
// 设置阴影
|
context.shadowColor = 'rgba(0, 0, 0, 0.2)'; // 颜色
|
context.shadowBlur = 5; // 模糊尺寸
|
context.shadowOffsetX = 2; // 阴影Y轴偏移
|
context.shadowOffsetY = 2; // 阴影X轴偏移
|
// 关闭,形成一个闭合的回路---->轮廓
|
context.closePath();
|
// 填充
|
context.fill();
|
|
context.fillStyle=this.fontColor;
|
context.textAlign='center';
|
context.textBaseline='middle'
|
context.font = "Bold " + this.fontsize + "px " + this.fontface;
|
context.fillText( text, (canvas.width-textWidth)/2, (canvas.height)/2);
|
|
/* 画布内容用于纹理贴图 */
|
let texture = new THREE.Texture(canvas);
|
texture.needsUpdate = true;
|
|
let spriteMaterial = new THREE.SpriteMaterial({ map: texture } );
|
let sprite = new THREE.Sprite( spriteMaterial );
|
|
/* 缩放比例 */
|
sprite.scale.set(100,100,1);
|
|
return sprite;
|
}
|
