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

Question

我想将我正在绘制的字符串中单个单词的颜色更改为 canvas，而无需手动 fiddle 文本位置并且有多个 "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>

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

p5.js: change text color in for a single word in a sentence

javascript

processing

p5.js