node
node copied to clipboard
write text set alpha will not right
this font color is #fff
const { writeFileSync } = require('fs');
const { Application, Text } = require('@pixi/node');
const Jimp = require('jimp');
const app = new Application({
width: 500,
height: 300,
backgroundAlpha: 0,
antialias: true,
preserveDrawingBuffer: true,
premultipliedAlpha: false,
});
const main = async () => {
const instance = new Text('星星之火\n可以燎原', {
align: 'right',
fontSize: 80,
fill: '#fff',
fontFamily: 'SimHei',
});
instance.x = 30;
instance.y = 30;
instance.alpha = 0.8;
app.stage.addChild(instance);
app.renderer.render(app.stage);
console.log(instance.canvas);
const buffer = app.view.toBuffer('raw');
// writeFileSync('./tmp/pixi.png', app.view.toBuffer('image/png');
new Jimp({ data: buffer, width: 500, height: 300 }, (err, image) => {
console.log(err, image.hasAlpha());
image.scan(0, 0, 500, 300, function (x, y, idx) {
// x, y is the position of this pixel on the image
// idx is the position start position of this rgba tuple in the bitmap Buffer
// this is the image
var red = this.bitmap.data[idx + 0];
var green = this.bitmap.data[idx + 1];
var blue = this.bitmap.data[idx + 2];
var alpha = this.bitmap.data[idx + 3];
console.log(red, green, blue, alpha / 255);
// rgba values run from 0 - 255
// e.g. this.bitmap.data[idx] = 0; // removes red from this pixel
});
image.quality(100).write('./tmp/jimp.png');
});
// 用完销毁
// process.exit(0);
};
main();
result
0 0 0 0
0 0 0 0
0 0 0 0.01568627450980392
94 94 94 0.6078431372549019
163 163 163 0.8
163 163 163 0.8
163 163 163 0.8
163 163 163 0.8
163 163 163 0.8
163 163 163 0.8
146 146 146 0.7568627450980392
1 1 1 0.08235294117647059
0 0 0 0
0 0 0 0
0 0 0 0
As a workaround, I did this:
const instance = new Text('星星之火\n可以燎原', {
align: 'right',
fontSize: 80,
// bake the alpha into the fill
fill: 'rgba(255, 255, 255, 0.8)', // '#fff',
fontFamily: 'SimHei',
});
instance.x = 30;
instance.y = 30;
// instance.alpha = 0.8;
// Declare the texture to be pma
instance.texture.baseTexture.alphaMode = ALPHA_MODES.PREMULTIPLIED_ALPHA;
Gave me this image result: