Question

我使用context.fill方法创建一个包含文本的sprite对象。但是，我希望更改文本，以便显示我在3D画布中计算的距离。我经常进行计算，这就是为什么我不能简单地用新的值创建新的精灵。

例如; 始终显示精灵，当我在3D世界中计算距离时，精灵内的文本会变为距离值。

我正在使用： ThreeJS r66

以及来自 Stemkoski 的以下脚本：

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: 255, g: 255, b: 255, a: 1.0 };

    //var spriteAlignment = THREE.SpriteAlignment.topLeft;

    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    context.font = "Bold " + fontsize + "px " + fontface;

    // get size data (height depends only on font size)
    var metrics = context.measureText(message);
    var textWidth = metrics.width;

    // background color
    context.fillStyle = "rgba(" + backgroundColor.r + "," + backgroundColor.g + ","
                                  + backgroundColor.b + "," + backgroundColor.a + ")";
    // border color
    context.strokeStyle = "rgba(" + borderColor.r + "," + borderColor.g + ","
                                  + borderColor.b + "," + borderColor.a + ")";

    context.lineWidth = borderThickness;
    roundRect(context, borderThickness / 2, borderThickness / 2, textWidth + borderThickness, fontsize * 1.4 + borderThickness, 6);
    // 1.4 is extra height factor for text below baseline: g,j,p,q.

    // text color
    context.fillStyle = "rgba(0, 0, 0, 1.0)";

    context.fillText(message, borderThickness, fontsize + borderThickness);

    // canvas contents will be used for a texture
    var texture = new THREE.Texture(canvas)
    texture.needsUpdate = true;

    var spriteMaterial = new THREE.SpriteMaterial(
        { map: texture, useScreenCoordinates: false });
    var sprite = new THREE.Sprite(spriteMaterial);
    sprite.scale.set(1000, 500, 10);
    return sprite;
}

// function for drawing rounded rectangles
function roundRect(ctx, x, y, w, h, r) {
    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();
}

谢谢！

Answer 1

我将您的解决方案从您的问题中提取出来并在此处发布以帮助其他人。

这是一张图片，你可以用新的整体颜料填充它并重写文字，如下所示：

    message = "It works!";

    context.fillStyle = "rgba(0, 0, 0, 1.0)"; // CLEAR WITH COLOR BLACK (new BG color)
    context.fill(); // FILL THE CONTEXT
    context.fillStyle = "rgba(255, 0, 0, 1.0)"; // RED COLOR FOR TEXT
    context.fillText(message, context.lineWidth, 24 + context.lineWidth); // WRITE TEXT

    spritey.material.map.needsUpdate = true; // AND UPDATE THE IMAGE..

    Render(); // NORMAL RENDER AFTER :)

}

唯一的问题是，你不能拥有不透明/透明背景的精灵，因为你已经＆＃34;绘画＆＃34;结束了。如果在fillStyle上设置为alpha值= 0.5，则旧文本将通过新文本显示。

三个JS：在THREE.Sprite中更新文本

1 个答案: