Skip to content

huiyan-fe/visual

Repository files navigation

visual

简介

欢迎来到Visual的世界,Visual是一款基于canvas的可视化底层工具,支持点、线、面、文字多边形的拖拽,选取等操作。

可以通过简单的Demo了解什么是Visual Visual Demo

API

目录

  1. 初始化
  2. Visual 对象
  3. Visual Event
  4. Visual Properties

1. Visual(dmo, options)

参数 类型 说明
dom HTMLDocument 指定Visual的父元素
options Object 配置

想要初始化Visual,可以通过new Visual(dom)来进行

例如:

let dom = document.getElementById('content');
let visual = new Visual(dom);

在线Demo

1.1 Visual Options

参数 类型 说明
options HTMLDocument 配置
options.grid Object visual的网格属性
options.grid.step Number visual的网格步长,默认为1
options.grid.scale Array visual的网格缩放属性,默认为[1,1]

2. Visual Object

2.1 line(path, config)

参数 类型 说明
path Array 线段的关键点
config Object 相关配置,通用配置请查阅配置说明 config

line方法用来创建一条可以编辑的直线或者折线。

例如:

visual.line([
	[85, 86],
	[85, 89],
	[85, 104],
	[139, 85],
], {
	strokeStyle: '#4df693',
	lineWidth: 20,
});

2.2 text(text, point, config)

参数 类型 说明
text String 绘制的文本
point Array 绘制的文字的起始点
config Object 相关配置,通用配置请查阅配置说明 config
config.rotate Number 文本的旋转角度
config.splitText Boole 文字是否单独绘制,如果为true的情况下,系统自动绘制每一个单独的文字,此时,每个文字的初始旋转角度0°为正上方
config.textRotate Number 单个文字的旋转角度

text用来绘制文本,简单示例如下:

visual.text('Hello Mofei', [200, 400], {
	fontSize: 24,
	rotate: Math.PI * .25,
	splitText: true,
	textRotate: Math.PI * .25
})

2.3 textGroup(text, path, config)

参数 类型 说明
text String 绘制的文本
path Array 绘制的文字的坐标,可以为[x,y]或者[[x1,y1],[x2,y2],...]第一种形式为指定起点坐标,第二种形式为指定每个点的坐标,如果path的长度和字符的长度不匹配,Visual会自动计算出后续文字的坐标。
config Object 相关配置,通用配置请查阅配置说明 config
config.textRotate Number 单个文字的旋转角度

text用来绘制文本,简单示例如下:

visua.textGroup('TextGroup with path points', [
	[600, 250],
	[610, 260],
	[620, 250],
	[630, 260],
	[640, 250]
], {
	textRotate: Math.PI * .1
});

在线Demo

2.4 circle(redis, center, config)

参数 类型 说明
redis Number 圆的半径
center Array 圆的中心点
config Object 相关配置,通用配置请查阅配置说明 config
config.border Boole 是否绘制圆的边框

简单示例如下:

 visual.circle(10, [200, 100], {
    fillStyle: 'yellow',
    strokeStyle: 'skyblue',
    lineWidth: 5,
    border: true
})

2.4 Image(imgDom, center, width, height, rotate);

参数 类型 说明
imgDom Dom img的dom对象
center Array 图片中心点
width Number 图片宽度
height Number 图片高度
rotate Number 顺时针旋转角度

简单示例:见demo

2.5 config

参数 类型 说明
config.fontSize Number 文字大小默认12
config.textBaseline String 文字的Baseline对齐方式 默认alphabetic
config.textAlign String 文字的左右对齐方式 默认left
config.fillStyle String 图形填充样式
config.strokeStyle String 图形描边样式
config.lineWidth Number 线宽
config.pointEditable Boolean 多边形的或者有节点的线等物体的每个点是否可编辑 默认true,false情况下只能整体移动物体
config.dragable Boolean 对象是否支持拖拽,默认 true
config.clickable Boolean 是否支持点击事件,默认true
config.bufferSize Number 选中 visual 对象的缓冲距离 ,Circle 默认为5,其他默认15
config.mouseOverEventEnable Boolean 是否支持鼠标划过事件,默认true
config.active Boolean visual 对象是否为选中状态,默认false

3. Visual Event

大部分的Visual Object都有事件监听

可以通过Visual Object.on('type', Function) 来监听。

可以通过Visual Object.unbind('type', Function) 来取消监听。

简单的Demo如下:

// 创建圆对象
let cir = v.circle(10, [100, 300], {
	fillStyle: 'red'
})

// 监听change事件
cir.on('change', (obj) => {
	console.log(obj)
})

3.1 change

当Visual Object发生变化时,会触发该事件,Function中的接收一个Object参数,其通用字段如下:

参数 类型 说明
object Visual Object - 当前移动的对象

在线Demo

3.1.1 change for line[Object]

line类型的change事件返回以下参数:

参数 类型 说明
type String 'point'|'line' point:拖拽点的时候返回
line:移动整条线的时候返回
index Number - 移动点的时候返回点的索引号

3.2 finish

当Visual Object变化结束(通常情况下为拖拽鼠标之后松开),会触发该事件,Function中的接收一个Object参数,其通用字段如下:

参数 类型 说明
object Visual Object - 当前移动的对象
type String 'move'|'deletePoint' 'multichose'| finish的类型(multichose:同时按住 shift 键可以选中多个点或者物体,然后触发finish 事件)

3.3 willDeletePoint

当用户触发删除点操作时会被触发,如果回调函数返回false,将会阻止点的删除。

参数 类型 说明
object Visual Object - 当前移动的对象
index Number - 当前准备删除的点对应的索引号

在线Demo(首尾点不能被删除)

4. visual Properties

用户可以通过设置Visual 的实例(line/circle...)的属性,控制实例是否可以拖拽 例如:line.set('dragable',false)