@xudaocong/jscanvas NPM

JS - Canvas

npm 包的安装
- npm install @xudaocong/jscanvas
- 在项目中 import 或者 require 即可 import JsCanvas from "@xudaocong/jscanvas" const JsCanvas = require("@xudaocong/jscanvas")
npm 在项目引用后 JsCanvas 提供的方法
- JsCanvas.init(params) 初始化
  params = { id,w,h,bgC }
  - id = canvas Id
  - w = 宽度默认：300
  - h = 高度默认 300
  - bgC = 画布背景默认：#fff
- JsCanvas.text(params) 绘制文本
  params = { value, x, y, size, color, fw: "normal", deg ,fill}
  - value = 需要绘画的文本内容
  - x = 绘制的 x 坐标
  - y = 绘制的 y 坐标
  - size = 绘制的文本大小
  - color = 绘制的文本颜色
  - fw = font-weight = 绘制文本的加粗效果
  - deg = 绘制文本按照中心点旋转的角度
  - fs = font-style = 绘制文本的样式
  - fm = font-family = 绘制字体系列
  - deg = font-family = 绘制文本按照中心点旋转的角度
  - fill = 是否为填充文字默认：true
  - ```
  defaultParams = {
      value: '',
      x: 0,
      y: 0,
      size: 12,
      color: '#000',
      fw: 'normal',
      fm: 'Arial',
      deg: 0,
      fs: 'normal',
      fill: true
  };
```
- JsCanvas.img(params) 绘制图片
  params = { url, x, y, w, h, deg: 0 }
  - url = 需要绘的图片地址
  - x = 绘制的 x 坐标
  - y = 绘制的 y 坐标
  - w = 绘制的图片宽度
  - h = 绘制的图片高度
  - deg = 绘制的图片按照中心点旋转的角度
  - ```
  defaultParams = {
      url: '',
      x: 0,
      y: 0,
      w: this.canvas.width,
      h: this.canvas.height,
      deg: 0
  };
```
- JsCanvas.circularImg(params) 绘制圆形图片
  params = { url, x, y, w, h, deg: 0 }
  - url = 需要绘的图片地址
  - x = 绘制的 x 坐标
  - y = 绘制的 y 坐标
  - w = 绘制的图片宽度
  - h = 绘制的图片高度
  - deg = 绘制的图片按照中心点旋转的角度
  - ```
  defaultParams = {
      url: '',
      x: 0,
      y: 0,
      w: this.canvas.width,
      h: this.canvas.height,
      deg: 0
  };
```
- JsCanvas.line(params) 绘制线段
  params = { x1,y1,x2,y2,lineColor,lineWidth }
  - x1 = 线条初始点 x 坐标
  - y1 = 线条初始点 y 坐标
  - x2 = 线条终点 x 坐标
  - y2 = 线条终点 y 坐标
  - lineColor = 线条颜色默认 #000
  - lineWidth = 线条粗细默认：1
  - ```
  defaultParams = {
      x1: 0,
      y1: 0,
      x2: 0,
      y2: 0,
      lineColor: '#000',
      lineWidth: 1
  };
```
- JsCanvas.dottedLine(params) 绘制虚线
  params = { x1,y1,x2,y2,lineColor,lineWidth ,width,space}
  - x1 = 虚线初始点 x 坐标
  - y1 = 虚线初始点 y 坐标
  - x2 = 虚线终点 x 坐标
  - y2 = 虚线终点 y 坐标
  - lineColor = 虚线颜色默认 #000
  - lineWidth = 虚线粗细默认：1
  - width = 虚线实线宽度默认：5
  - space = 虚线实线间隔默认：5
  - ```
  defaultParams = {
      x1: 0,
      y1: 0,
      x2: 0,
      y2: 0,
      lineColor: '#000',
      lineWidth: 1,
      width: 5,
      space: 5
  };
```
- JsCanvas.rect(params) 绘制矩形（可绘制圆角以及边框）
  params = { x, y, w, h, bgC, line, r }
  - x = 矩形起始 x 坐标
  - y = 矩形起始 y 坐标
  - w = 矩形宽度
  - h = 矩形高度
  - bgC = 矩形的背景色
  - line = { color: 边框的颜色, width: 边框的宽度 }
  - r = 矩形的圆角
  - ```
  defaultParams = {
      x: 0,
      y: 0,
      w: canvas.width,
      h: canvas.height,
      bgC: '#000',
      line: { color: '#000', width: 1 },
      r: 0
  };
```
- JsCanvas.circular(params) 绘制圆形
  params = { x, y, r, line, bgC }
  - x = 圆心 x 坐标
  - y = 圆心 y 坐标
  - r = 圆的半径
  - line = { color: 边框的颜色, width: 边框的宽度 }
  - bgC = 圆的背景色默认：#fff
  - ```
  defaultParams = {
      x: 0,
      y: 0,
      r: canvas.width,
      line: { color: '#000', width: 1 },
      bgC: '#fff'
  };
```
- JsCanvas.clickLine(params) 点击绘制线段
  params = { lineColor,showTxt, size, color }
  - lineColor = 线条颜色默认：#000
  - showTxt = 是否显示坐标序号默认：true
  - size = 坐标序号的大小默认：12
  - color = 坐标序号的颜色默认：#000
  - ```
  defaultParams = {
      lineColor: '#000',
      showTxt: true,
      size: 12,
      color: '#000'
  };
```
- JsCanvas.inLine(params) 判断某点是否在直线上返回布尔值 (*此方法可能会有问题如有疑问请及时反馈)
  params = { tx,ty,x1,x2,y1,y2 }
  - tx = 目标点 x 坐标
  - ty = 目标点 y 坐标
  - x1 = 直线上某点 x 坐标
  - y1 = 直线上某点 y 坐标
  - x2 = 直线上另一点 x 坐标
  - y2 = 直线上另一点 y 坐标
- JsCanvas.textWidth(value) 判断某点是否在直线上返回布尔值 (*此方法可能会有问题如有疑问请及时反馈)
  params = value
  - value = 要获取宽度的文本
- JsCanvas.unClick() 移除所有 Canvas 点击
- JsCanvas.clear() 移除所有 Canvas 点击