javascript - p5.j​​s:更改句子中单个单词的文本颜色

Question

我想更改正在绘制到 Canvas 上的字符串中单个单词的颜色，而不必手动摆弄文本位置并调用多个“text()”函数。

这在 p5 中可能吗？

示例:

textAlign(CENTER);
text("I want THIS to be in green.",50,50);

其中“THIS”与句子的其余部分颜色不同。

我可以使用多个文本调用，例如

textAlign(CENTER);
fill(255,0,0);
text("I want ",50,50);
fill(0,255,0);
text("THIS",50 + widthOfFirstPart,50)
fill(255,0,0);
text("to be in green.",50 + widthOfSecondPart,50);

但这看起来很笨拙，除非有解决“widthOfFirstPart”和“widthOfSecondPart”变量的好方法。

Answer 1

我建议创建一个函数来处理由文本和颜色组成的元组数组。

例如:

var red = [255, 0, 0];
var green = [0, 255, 0];
var string = [
    ["I want ", red],
    ["THIS ", green],
    ["to be in green.", red]
];

循环处理数组，计算每个文本部分的长度。将文本部分的长度相加，确定每个部分的起始位置。当然，文本必须对齐RIGHT(可以扩展代码，也可以处理其他对齐方式):

function drawtext( x, y, text_array ) {

    var pos_x = x;
    for ( var i = 0; i < text_array.length; ++ i ) {
        var part = text_array[i];
        var t = part[0];
        var c = part[1];
        var w = textWidth( t );
        fill( c );
        text( t, pos_x, y);
        pos_x += w;
    }
}

function setup() {
    createCanvas( 500, 200 );
}

function draw() {
    background( 126, 192, 238 );
  
    textAlign(LEFT);
    
    var red = [255, 0, 0];
    var green = [0, 255, 0];
    var string = [
        ["I want ", red],
        ["THIS ", green],
        ["to be in green.", red]
    ];
    drawtext(50, 50, string );
}

function drawtext( x, y, text_array ) {
  
    var pos_x = x;
    for ( var i = 0; i < text_array.length; ++ i ) {
        var part = text_array[i];
        var t = part[0];
        var c = part[1];
        var w = textWidth( t );
        fill( c );
        text( t, pos_x, y);
        pos_x += w;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>