1.1.4 • Published 3 years ago
visual-array v1.1.4
visual-array
基于canvas的数组可视化类,支持了一些常用功能。
功能介绍
- 支持通过一组数字,生成一个可视化的数组结构
- 支持自定义单个元素的width和height,支持动态伸缩
- 支持自定义单个元素font,strokeStyle,fillStyle
- 支持选择暴露出底部的index: all, 头尾, 关闭
- 支持自定义数组顶部的文字:{index0: value0, index1: value1}
- 支持导出图片
- 支持shift、pop、unshift、push功能
- 支持在vue,react中使用
效果图
使用说明
安装
npm i visual-array
yarn add visual-array
vue demo
<template>
<div id="canvas"></div>
</template>
<script>
import VisualArray from "visual-array";
export default {
name: "vue-demo",
mounted() {
const canvasConfig = {
array: [1, 2, 3, 4],
cw: 60,
ch: 60,
bottomIndex: null,
topText: null,
customStyle: null,
_canvas: null,
};
const visualArray = new VisualArray({
containerId: "canvas",
array: canvasConfig.array,
cw: canvasConfig.cw,
ch: canvasConfig.ch
});
canvasConfig._canvas = visualArray;
},
};
</script>
<style lang="scss" scoped></style>
react demo
import { useEffect } from "react";
import VisualArray from "visual-array";
function Demo() {
useEffect(() => {
const canvasConfig = {
array: [1, 2, 3, 4],
cw: 60,
ch: 60,
bottomIndex: null,
topText: null,
customStyle: null,
_canvas: null,
};
const visualArray = new VisualArray({
containerId: "canvas",
array: canvasConfig.array,
cw: canvasConfig.cw,
ch: canvasConfig.ch,
});
canvasConfig._canvas = visualArray;
}, []);
return (
<div className="demo">
<div id="canvas"></div>
</div>
);
}
export default Demo;
enjoy it!
1.1.1
3 years ago
1.0.19
3 years ago
1.1.0
3 years ago
1.0.18
3 years ago
1.0.17
3 years ago
1.0.16
3 years ago
1.1.4
3 years ago
1.1.3
3 years ago
1.1.2
3 years ago
1.0.22
3 years ago
1.0.21
3 years ago
1.0.20
3 years ago
1.0.23
3 years ago
1.0.14
3 years ago
1.0.13
3 years ago
1.0.12
3 years ago
1.0.10
3 years ago
1.0.9
3 years ago
1.0.8
3 years ago
1.0.7
3 years ago
1.0.6
3 years ago
1.0.5
3 years ago
1.0.4
3 years ago
1.0.3
3 years ago
1.0.2
3 years ago
1.0.1
3 years ago