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

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

例如：

var myDictionary =  ["EN" : "Cheers", "SV" : "Skåll", "ES" : "Salud" ].everyOtherElement()
// returns [(key: "EN", value: "Cheers"),(key: "ES", value: "Salud")]

Dictionary(uniqueKeysWithValues: myDictionary.map { ($0.key, $0.value)})
// returns ["EN" : "Cheers", "ES" : "Salud" ]

循环处理数组，计算每个文本部分的长度。对文本部分的长度求和，以确定每个部分的开始位置。当然，文本必须对齐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;
    }
}