如何将颜色选择器添加到我的绘图应用

how to add a color selector to my drawing app

本文关键字：我的 绘图 应用 添加 选择器 颜色      更新时间：2023-09-26

在我的绘图应用程序中，我只能输入某些颜色，但我想有一个像这样的颜色选择器，我已经尝试过只添加大量颜色，但它变得太多并且与我的工具栏重叠。

<div id="colors">
    <div class="swatch active" style="background-color: black"></div>
    <div class="swatch" style="background-color: grey"></div>
    <div class="swatch" style="background-color: red"></div>
    <div class="swatch" style="background-color: green"></div>
    <div class="swatch" style="background-color: blue"></div>
    <div class="swatch" style="background-color: yellow"></div>
    <div class="swatch" style="background-color: orange"></div>
    <div class="swatch" style="background-color: indigo"></div>
    <div class="swatch" style="background-color: violet"></div>
    <div class="swatch" style="background-color: #FF0080"></div>
</div>

这是我的杰斯菲琴。请与我的代码相关联，以便它肯定会起作用。

我只会使用插件。

这个看起来很有前途 http://www.eyecon.ro/colorpicker/#about

您的代码可能类似于页面上的示例

$('#colorSelector').ColorPicker({
    color: '#0000ff',
    onShow: function (colpkr) {
        $(colpkr).fadeIn(500);
        return false;
    },
    onHide: function (colpkr) {
        $(colpkr).fadeOut(500);
        return false;
    },
    onChange: function (hsb, hex, rgb) {
        $('#colorSelector div').css('backgroundColor', '#' + hex);
    }
});

以下是有关使插件工作 http://www.eyecon.ro/colorpicker/#implement 的更多说明

相关文章：