function makeTextSprite(message, parameters) {
if (parameters === undefined) parameters = {};
var fontface = parameters.hasOwnProperty("fontface") ?
parameters["fontface"] : "Arial";
/* 字體大小 */
var fontsize = parameters.hasOwnProperty("fontsize") ?
parameters["fontsize"] : 18;
/* 邊框厚度 */
var borderThickness = parameters.hasOwnProperty("borderThickness") ?
parameters["borderThickness"] : 4;
/* 邊框顏色 */
var borderColor = parameters.hasOwnProperty("borderColor") ?
parameters["borderColor"] : { r: 0, g: 0, b: 0, a: 1.0 };
/* 背景顏色 */
var backgroundColor = parameters.hasOwnProperty("backgroundColor") ?
parameters["backgroundColor"] : { r: 0, g: 0, b: 255, a: 1.0 };
/* 創建畫布 */
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
/* 字體加粗 */
context.font = "Bold " + fontsize + "px " + fontface;
/* 獲取文字的大小資料，高度取決于文字的大小 */
var metrics = context.measureText(message);
var textWidth = metrics.width;
/* 背景顏色 */
context.fillStyle = "rgba(" + backgroundColor.r + "," + backgroundColor.g + ","
+ backgroundColor.b + "," + backgroundColor.a + ")";
/* 邊框的顏色 */
context.strokeStyle = "rgba(" + borderColor.r + "," + borderColor.g + ","
+ borderColor.b + "," + borderColor.a + ")";
context.lineWidth = borderThickness;
/* 繪制圓角矩形 */
roundRect(context);
/* 字體顏色 */
context.fillStyle = "rgba(255, 255, 255, 1.0)";
context.fillText(message, borderThickness, fontsize + borderThickness);
/* 畫布內容用于紋理貼圖 */
var texture = new THREE.Texture(canvas);
texture.needsUpdate = true;
var spriteMaterial = new THREE.SpriteMaterial({ map: texture, color: 0xF08000});
var sprite = new THREE.Sprite(spriteMaterial);
console.log(sprite.spriteMaterial);
/* 縮放比例 */
sprite.scale.set(10, 5, 1);
return sprite;
}
/* 繪制圓角矩形 */
function roundRect(ctx) {
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(30, 0);
ctx.lineTo(40, -30);
ctx.lineTo(50, 0);
ctx.lineTo(100, 0);
ctx.quadraticCurveTo(130, 25, 100, 50);
ctx.lineTo(0, 50);
ctx.quadraticCurveTo(-30, 25, 0, 0);
ctx.closePath();
ctx.fill();
ctx.stroke();
}
uj5u.com熱心網友回復：
Three.js中的問題轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/74012.html
標籤：JavaScript