Pixi.js: ColorMatrixFilter como usar por cor

Criado em 14 jan. 2018 · 3Comentários · Fonte: pixijs/pixi.js

Olá, quero usar uma imagem usando ColorMatrixFilter com a cor "# e73b37", como posso usar por matriz Array, como fazer o cálculo? Muito obrigado

Fonte

neciszhang

👍1

Comentários muito úteis

Não tenho certeza do que você está procurando, mas:

Aqui está uma abordagem que basicamente replica tint usando ColorMatrixFilter.

const color = new PIXI.filters.ColorMatrixFilter();
const tint = 0xe73b37;
const r = tint >> 16 & 0xFF;
const g = tint >> 8 & 0xFF;
const b = tint & 0xFF;
color.matrix[0] = r / 255;
color.matrix[6] = g / 255;
color.matrix[12] = b / 255;

https://jsfiddle.net/bigtimebuddy/4612gq30/1/

Usei uma abordagem com PixiAnimate: https://github.com/jiborobot/pixi-animate/blob/master/src/mixins/DisplayObject.js#L143 -L153

O código acima permite que você crie cores aditivas, bem como multiplique as cores.

bigtimebuddy em 14 jan. 2018

👍4

Todos 3 comentários

Não tenho certeza do que você está procurando, mas:

Aqui está uma abordagem que basicamente replica tint usando ColorMatrixFilter.

const color = new PIXI.filters.ColorMatrixFilter();
const tint = 0xe73b37;
const r = tint >> 16 & 0xFF;
const g = tint >> 8 & 0xFF;
const b = tint & 0xFF;
color.matrix[0] = r / 255;
color.matrix[6] = g / 255;
color.matrix[12] = b / 255;

https://jsfiddle.net/bigtimebuddy/4612gq30/1/

Usei uma abordagem com PixiAnimate: https://github.com/jiborobot/pixi-animate/blob/master/src/mixins/DisplayObject.js#L143 -L153

O código acima permite que você crie cores aditivas, bem como multiplique as cores.

bigtimebuddy em 14 jan. 2018

👍4

@bigtimebuddy Meu problema foi resolvido com sucesso! Muito obrigado! Sinceramente desejo a você

neciszhang em 15 jan. 2018

Este tópico foi bloqueado automaticamente, pois não houve nenhuma atividade recente depois que ele foi fechado. Abra um novo problema para bugs relacionados.