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

wzpan
Thu, 24 May 2018 03:46:07 +0000

不难，左边那条颜色板就是一个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;
        }

阅读整个主题