Canvas-sdk NPM

Canvas_Sdk文档

介绍

-用途： 利用canvas绘制渐变性圆环、渐变性半圆环、拓展图标、疑问图标等内容。

安装

使用包管理器

npm i canvas-sdk

import DrawCanvas from 'canvas-sdk'

浏览器直接引入

通过npm run build打包之后，在dist目录下会生成canvas-sdk.min.js文件，可以通过script自行引入

基本使用

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <style>
      body {
          margin: 0;
          padding: 0;
          height: 100vh;
      }
      #app {
        height: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
      canvas {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          cursor: pointer
      }
  </style>
  </head>
  <body>
    <div id="app"></div>
    <script src="./canvas-webpack-test.js"></script>
    <script>
        const ring = new DrawCanvas({
          type: 'ring', 
          container: document.getElementById('app'),
          id: 'ring',
          width: 200,
          height: 200,
          insertBefore: true,
        })
        ring.onClick(() => {
            ring.update({
                percent: 40
            })
        })
        ring.onHover(() => {
            console.log('mouseenter')
        },() => {
            console.log('mouseleave')
        })
    </script>
  </body>
</html>

公共属性	说明	类型	可选值	默认值	是否必传
type	要绘制的图形的名称	string	'dot','rightArrow','tipQuery','ring','semicircle','expandIcon'	-	是
container	放置图形的父元素	object	-	document.querySelector('body')	否
id	canvas id	string	-	'canvas'	否
width	canvas Width，建议2倍值	number	-	CSS宽的2倍，若无，则300*2	否
height	canvas Height，建议2倍值	number	-	CSS高的2倍，若无，则150*2	否
insertBefore	是否将元素添加到容器的第一位	boolean	true/false	false	否

方法	说明	传参类型
onClick	点击图形	function
onHover	鼠标滑过图形	function, function
update	图形更新	object

type的具体使用及示例

1.type === 'dot'

属性	说明	类型	可选值	默认值	是否必传
isGradient	背景色是否渐变	Boolean	true/false	false	否
bgColor	图像的背景色。渐变色传数组	string/Array	-	'black'	否

2.type === 'rightArrow'

3.type === 'tipQuery'

4.type === 'ring'

5.type === 'semicircle'

6.type === 'expandIcon'

canvas

@everything-registry/sub-chunk-1291 @infinitebrahmanuniverse/nolb-canv

1.2.0

2 years ago

1.1.0

2 years ago