JS - Canvas

1. npm 包的安装

   • npm install @xudaocong/jscanvas
   • 在项目中 import 或者 require 即可 import JsCanvas from "@xudaocong/jscanvas" const JsCanvas = require("@xudaocong/jscanvas")

2. 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 点击