在 PIXIJS 中为部分文本着色

Question

如何为 under/above 图像（雪碧图）的文本的某些部分制作不同的颜色？示例：https://clip2net.com/s/43y248h

图像动态移动，文本也应动态着色。

Answer 1

我建议使用 2 个文本对象：

下图一个（黑色）
图像上的一个（白色）
然后用图像大小的形状遮盖图像上的文本
注意文字图层同步移动

看看这个 simple demo 我为你做的：

// Create our application instance
var app = new PIXI.Application({
    width: window.innerWidth,
    height: window.innerHeight,
    backgroundColor: 0xeeeeee
});
document.body.appendChild(app.view);

// Load the bunny texture
app.loader.add('bunny', 'https://pixijs.io/examples/examples/assets/bunny.png')
    .load(startup);

function startup()
{
    let text = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 48, fill : 0x000000, align : 'center'});
    let text2 = new PIXI.Text('This is a PixiJS text',{fontFamily : 'Arial', fontSize: 48, fill : 0xFF0000, align : 'center'});
    let sprite = new PIXI.Sprite.fromImage('https://image.shutterstock.com/image-vector/male-default-placeholder-avatar-profile-260nw-387516193.jpg');
    let sprite2 = new PIXI.Sprite.fromImage('https://image.shutterstock.com/image-vector/male-default-placeholder-avatar-profile-260nw-387516193.jpg');
    text2.mask = sprite2;
    app.stage.addChild(text);
    app.stage.addChild(sprite);
    app.stage.addChild(sprite2);
    app.stage.addChild(text2);



    // Listen for animate update
    app.ticker.add(function(delta)
    {
        // your code
    });
}

在 PIXIJS 中为部分文本着色

Colorize part of text in PIXIJS

javascript

pixi.js