canvas-sdk
v1.2.0
Published
-用途： 利用canvas绘制渐变性圆环、渐变性半圆环、拓展图标、疑问图标等内容。
Readme
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倍，若无，则3002 | 否 | | height | canvas Height，建议2倍值 | number | - | CSS高的2倍，若无，则1502 | 否 | | 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' | 否 |