pixijs 使用tint修改黑色线段颜色不生效问题

2023-06-06  本文已影响0人  时间煮鱼

首先我们要知道tint的原理是什么:

是颜色通道相加,黑色的颜色加任何颜色都是黑色,所以不生效

所以,我们可以先设置线段颜色为红色(你最终想要修改的颜色),然后把线段tint修改为黑色(加黑色就变成了黑),在这基础上再修改为你想要的颜色

例子:点击线段,实现线段由黑变红

const graphics = new PIXI.Graphics();
      graphics.lineStyle(3000, 0xFF0000)
      graphics.tint = 0x000000; // 重新设置颜色通道
      graphics.moveTo(5000, 5000);
      graphics.lineTo(10000, 5000);
      graphics.interactive = true;
      graphics.buttonMode = true; // 鼠标箭头变成小手
      graphics.hitArea = new PIXI.Rectangle(5000, 5000, 5000, 3000); // 设置碰撞区域
      graphics.on('click', () => {
        graphics.tint = 0xFF0000;
      });
      container.addChild(graphics);
上一篇 下一篇

猜你喜欢

热点阅读