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

首先我们要知道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);
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容