# angle_selector

**Repository Path**: mlonghui/angle_selector

## Basic Information

- **Project Name**: angle_selector
- **Description**: 角度选择条，自定义控件大赛参赛项目
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 0
- **Created**: 2021-08-31
- **Last Updated**: 2022-07-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# angle_selector

#### 介绍
角度选择条，通过左右滑动选择角度，背景，刻度线，选择范围均支持修改。
#### 效果展示
![图片](snapshoot/snapshoot1.PNG) 
![图片](snapshoot/snapshoot2.PNG) 
![图片](snapshoot/snapshoot3.gif) 
#### 使用说明
1. [下载组件代码](entry/src/main/js/default/common/angle_selector)到本地, 添加到你的项目中
2. 根据路径，通过`element`导入 angle_selector 组件
    ```hml
    <!--index.hml-->
    <element src="../../common/angle_selector/angle_selector.hml"></element>
    ```
3. 设置 `@on-degree-change` 事件
    ```hml
   <!--index.hml-->
    <angle_selector @on-degree-change="onDegreeChange"></angle_selector>
   ```
4. 实现 onDegreeChange 方法接收数据
    ```javascript
   //index.js
   export default {
          data: {
              degree: 0
          },
          onDegreeChange(msg) {
              this.degree = msg.detail.degree
          }
      }
   ```

#### 样式修改说明
选择条自定义属性均设置了默认值，开发者也可根据需要修改样式，属性修改传值可查看

[index.hml](entry/src/main/js/default/pages/index/index.hml) 示例。

修改过程中需注意合理设置参数范围。

| 属性                 | 说明                       | 类型   | 默认值            |
| -------------------- | -------------------------- | ------ | ----------------- |
| height               | 控件高度                   | Number | 60                |
| bg-color             | 背景颜色                   | String | 'black'           |
| line-color-high      | 可选择范围内角度画笔颜色   | String | 'white'           |
| line-color-dark      | 非可选择范围内角度画笔颜色 | String | '#b8b6b6'         |
| line-degree-num      | 可见范围内显示的刻度线条数 | Number | 43                |
| show-scope           | 角度条显示范围             | Array  | [-90, 90]         |
| chose-scope          | 角度条可选择范围           | Array  | [-45, 45]         |
| center-line-y        | 中心线Y轴绘制范围          | Array  | [0.4, 0.9]        |
| single-degree-line-y | 个位刻度线Y轴绘制范围      | Array  | [0.6, 0.8]        |
| ten-degree-line-y    | 十位刻度线Y轴绘制范围      | Array  | [0.5, 0.8]        |
| text-y               | 十位刻度线文字Y轴绘制位置  | Number | 0.3               |
| line-width           | 绘制线条画笔宽度           | Number | 2                 |
| font                 | 绘制字体大小，格式         | String | '14px sans-serif' |
| text-align           | 绘制字体排列               | String | 'center'          |



## License

MulanPSL2, See the [LICENSE](./LICENSE) file for details.