# mp_canvas_drawer

**Repository Path**: hihopeorg/mp_canvas_drawer

## Basic Information

- **Project Name**: mp_canvas_drawer
- **Description**: 图片、图形绘制组件
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-10-14
- **Last Updated**: 2022-05-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# mp_canvas_drawer

## 简介
> canvas绘制图片助手，一个json就制作分享朋友圈图片

![](art/demo.gif)

## 下载安装
```shell
npm install @ohos/canvasdrawer --save
```
OpenHarmony npm环境配置等更多内容，请参考 [如何安装OpenHarmony npm包](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_npm_usage.md) 。

## 使用说明

### 1、在页面 `**.hml` 文件中添加library：
 ```
<element name="canvasdrawer" src="canvasdrawer/src/main/js/components/canvasdrawer/canvasdrawer.hml"></element>
 ```
### 2、在页面 `**.hml` 文件中加入如下代码：
 ```
<canvasdrawer painting="{{painting}}"></canvasdrawer>
 ```
`painting` 是需要传入的 `json`。

## 接口说明
<details><summary>对象结构一览</summary><br>


```js
{
  width: 375,
  height: 500,
  views: [
    {
      type: 'image',
      url: 'url',
      top: 0,
      left: 0,
      width: 375,
      height: 500
    },
    {
      type: 'text',
      content: 'content',
      fontSize: 16,
      color: '#402D16',
      textAlign: 'left',
      top: 33,
      left: 96
    },
    {
      type: 'rect',
      background: 'color',
      top: 0,
      left: 0,
      width: 375,
      height: 500
    }
  ]
}
```

</details>  


数据对象的第一层需要三个参数: `width`、`height`、`mode`、`views`。配置中所有的数字都是没有单位的。这就意味着 `canvas` 绘制的是一个比例图。`views` 数组中的顺序代表绘画的先后顺序，会有覆盖的现象。

`mode` 可选值有 `same`, 默认值为空。

当前可以绘制3种类型的配置: `image`、`text`、`rect`。

### image（图片）

| 属性   | 含义                                                 | 默认值 | 可选值 |
| ------ | ---------------------------------------------------- | ------ | ------ |
| url    | 绘制的图片地址，可以是本地图片，如：`/images/1.jpeg` |        |        |
| top    | 左上角距离画板顶部的距离                             |        |        |
| left   | 左上角距离画板左侧的距离                             |        |        |
| width  | 要画多宽                                             | 0      |        |
| height | 要画多高                                             | 0      |        |

### text（文本）

| 属性           | 含义                                                         | 默认值         | 可选值                                      |
| -------------- | ------------------------------------------------------------ | -------------- | ------------------------------------------- |
| content        | 绘制文本                                                     | ''（空字符串） |                                             |
| color          | 颜色                                                         | black          |                                             |
| fontSize       | 字体大小                                                     | 16             |                                             |
| textAlign      | 文字对齐方式                                                 | left           | center、right                               |
| lineHeight     | 行高，只有在多行文本中才有用                                 | 20             |                                             |
| top            | 文本左上角距离画板顶部的距离                                 | 0              |                                             |
| left           | 文本左上角距离画板左侧的距离                                 | 0              |                                             |
| breakWord      | 是否需要换行                                                 | false          | true                                        |
| MaxLineNumber  | 最大行数，只有设置 `breakWord: true` ，当前属性才有效，超出行数内容的显示为... | 2              |                                             |
| width          | 和 `MaxLineNumber` 属性配套使用，`width` 就是达到换行的宽度  |                |                                             |                                       |
| textDecoration | 显示中划线、下划线效果                                       | none           | underline（下划线）、line-through（中划线） |

### rect (矩形，线条)

| 属性       | 含义                     | 默认值 | 可选值 |
| ---------- | ------------------------ | ------ | ------ |
| background | 背景颜色                 | black  |        |
| top        | 左上角距离画板顶部的距离 |        |        |
| left       | 左上角距离画板左侧的距离 |        |        |
| width      | 要画多宽                 | 0      |        |
| height     | 要画多高                 | 0      |        |


## 兼容性
支持 OpenHarmony API version 6 及以上版本。

## 目录结构
````
|---- mp_canvas_drawer 
|     |---- entry  # 示例代码文件夹
|     |---- canvasdrawer  # canvasdrawer库文件夹
|           |---- src
|                  |---- main
|                        |---- ets
|                              |---- components
|                                     |---- canvasdrawer
|                                          |---- canvasdrawer.js  #canvas绘制实现
|     |---- README.md  # 安装使用方法                    
````

## 贡献代码
使用过程中发现任何问题都可以提 [Issue](https://gitee.com/hihopeorg/mp_canvas_drawer/issues) 给我们，当然，我们也非常欢迎你给我们发 [PR](https://gitee.com/hihopeorg/mp_canvas_drawer/pulls) 。

## 开源协议
本项目基于 [MIT](https://gitee.com/hihopeorg/mp_canvas_drawer/blob/master/LICENSE) ，请自由地享受和参与开源。