p5.j s：更改句子中单个单词的文本颜色

Question

我想改变我绘制到画布的字符串中单个单词的颜色，而不必手动调整文本位置并进行多个“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

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

e.f.:

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>