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

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

1. 初始化
   • Visual Options
2. Visual 对象
   • line
   • text
   • circle
   • Visual 对象 config
3. Visual Event
   • change
   • finish
   • willDeletePoint
4. Visual Properties

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

例如：

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

在线Demo

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

例如：

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

text用来绘制文本，简单示例如下：

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

text用来绘制文本，简单示例如下：

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

在线Demo

简单示例如下：

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

简单示例:见demo

大部分的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)
})

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

在线Demo

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

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

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

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

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