项目中有个画图的功能需求,划线之类的还好,但是 编辑颜色这一块该如何做现在没有头绪。类似creator中颜色设置编辑的部分
,不知道能否在引擎层面或者cocos-lite中找到代码。
请社区的大大们提点一下!!
不难,左边那条颜色板就是一个slider,那条渐变色底图可以是一张png图。
之后你要做的就是根据slider的progress,计算出对应的色值。
如果仔细观察色值的变化规律,可以大致把色值的变化分成6个区。这 6 个区的临界颜色分别是:
- (255, 0, 0)
- (255, 0, 255)
- (0, 0, 255)
- (0, 255, 255)
- (0, 255, 0)
- (255, 255, 0)
- (255, 0, 0)
可以看出每一个区域只有一个原色会发生变化,要么从0到255,要么从255到0。
因此,可以根据 progress,先算出对应的区,和区内的变化比例,再进一步算成对应的色值。给段代码示意一下:
let progress = this.palette.getComponent(cc.Slider).progress;
let divFactor = 1.0 / 6; // 色盘六种色均匀分布
let sector = Math.ceil(progress / divFactor);
let subProgress = (progress - (sector - 1) * divFactor) / divFactor;
let r, g, b;
switch (sector) {
case 0:
r = 255;
g = 0;
b = 0;
break;
case 1:
r = 255;
g = subProgress * 255;
b = 0;
break;
case 2:
r = 255 - (subProgress * 255);
g = 255;
b = 0;
break;
case 3:
r = 0;
g = 255;
b = subProgress * 255;
break;
case 4:
r = 0;
g = 255 - (subProgress * 255);
b = 255;
break;
case 5:
r = subProgress * 255;
g = 0;
b = 255;
break;
case 6:
r = 255;
g = 0;
b = 255 - (subProgress * 255);
break;
case 7:
r = 255;
g = 0;
b = 0;
break;
default:
break;
}
1赞
,不知道能否在引擎层面或者cocos-lite中找到代码。