# colorPicker

**Repository Path**: zhaoxiaoqiang23/color-picker

## Basic Information

- **Project Name**: colorPicker
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2021-09-18
- **Last Updated**: 2024-09-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


# 基于鸿蒙FA开发的颜色选择器

### 5分钟教会你轻松实现Harmony OS颜色选择器（colorPicker）
随着智慧家居的快速发展，我们经常介入照明、出行、健康等相关只能设备，很多设备都具备灯光以及灯光调色等。基于此需求，特研发colorPicker。
### 功能介绍

colorPicker组件是基于OpenHarmony下的JavaScript UI框架开发的一款组件，主要特点如下：

1. 支持定义canvas色盘大小
2. 支持自定义point指示器大小
3. 支持hex、rgba两种格式颜色
4. 支持点击色盘、拖拽point指示器选择颜色


**效果展示**

![演示文件](./entry/src/main/resources/base/media/demo.jpg)

**代码模块说明**
 props:{
        showObj:{
            default: true, 
        },
        canvasWidth:{
            default: '240',
        },
        canvasHeight:{
            default: '240',
        },
        pointWidth:{
            default: '34',
        },
        pointHeight:{
            default: '34',
        },
    }

// 绘图1
    drawGradient() {
        var iSectors = 360;
        var width=this.canvasWidth;
        var height=this.canvasHeight;
        var iSectorAngle = (360 / iSectors / 180) * Math.PI;
        var canvas = this.$refs.canvas;
        var ctx = canvas.getContext("2d");
        // 清除画布内容
        ctx.clearRect(0, 0, width, height);
        // 存储当前环境
        ctx.save();
        // 画布（0,0）初始点映射到中间圆点
        ctx.translate(width / 2, height / 2);

        for (let i = 0; i < 360; i++) {
            var startAngle = 0;
            var endAngle = startAngle + iSectorAngle;
            var radius = width / 2 - 1;
            // iSectorAngle * i  变量弧度的计算
            var grd = ctx.createLinearGradient(
                0,
                0,
                width / 4,
                height / 4
            );
            grd.addColorStop(0,`rgb(${this.hslToRgb(i / 360, 0, 1)})`);
            grd.addColorStop(1,`rgb(${this.hslToRgb(i / 360, 1, 0.5)})`);
            ctx.beginPath();
            ctx.moveTo(0, 0);
            // False = 顺时针，true = 逆时针
            ctx.arc(0, 0, radius, startAngle, endAngle, false);

            ctx.closePath();
            // 设置或返回用于笔触的颜色、渐变或模式。（边）
            ctx.strokeStyle = grd;

            // 绘制已定义的路径。
            ctx.stroke();
            // 设置或返回用于填充绘画的颜色、渐变或模式。（内容）
            ctx.fillStyle = grd;
            // 填充当前绘图（路径）。
            ctx.fill();
            // 都是在同一地方绘出的点，需要通过旋转来调整位置。
            // 重复360，调整360
            ctx.rotate(-iSectorAngle);
        }
        // 返回之前保存过的路径状态和属性。
        ctx.restore();
    },
```javascript```

```**使用说明** ```

```在需要的页面直接引入即可```
```javascript```
```<element name="colorPickerDialog" src="../../../share/component/colorPickerDialog/colorPickerDialog.hml"
<colorPickerDialog
            @get-color="getColorData"
            color-type="{{colorType}}"
            >
</colorPickerDialog>```

···
option{
    showObj:组件显示  默认：true
    canvasWidth：色盘宽度  默认240
    canvasHeight：色盘高度  默认240
    pointWidth：指示器宽度  默认34
    pointHeight：指示高度  默认34
}
event{
    selectColor(value)  //颜色选择回调
}

···