请教大神们 画板中的 取色板该怎么做

项目中有个画图的功能需求,划线之类的还好,但是 编辑颜色这一块该如何做现在没有头绪。类似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赞