visual

简介

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

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

API

目录

1. 初始化
   • Visual Options
2. Visual 对象
   • line
   • text
   • circle
   • Visual 对象 config
3. Visual Event
   • change
   • finish
   • willDeletePoint
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)