效果如下,拖动任意一个,连线会随着动,
(连线连的比较随意,后期换别的版本了,就没继续做下去)
1.1 支持任意添加
1.2 支持右键删除
1.3 支持联动
使用说明:
1.点击图片添加图片
2.进入连线模式侯才可以连线
<!DOCTYPE html>
<html>
<head>
<title>鼠标滚轮</title>
<meta charset="utf-8">
<style>
canvas {
border: 1px dashed black;
}
</style>
<script src="js/fabric.js"></script>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script src="contextMenu/jquery.ui.position.min.js" type="text/javascript"></script>
<script src="contextMenu/jquery.contextMenu.js" type="text/javascript"></script>
<link href="contextMenu/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>非连接模式下,按住alt 才可拖动画布</div>
<canvas id="canvas" width="600" height="600"></canvas>
<div id="contextmenu-output"></div>
<div>
<button id="addPic" onclick="addPic()">图片</button>
<button id="addLine" onclick="addLine()">连线模式</button>
</div>
<script>
var canvas;
//是否拖动
var panning = false;
//连线模式
var ligature = false;
var lineNum;
var selectObj;
canvas = new fabric.Canvas('canvas');
//鼠标按下
canvas.on('mouse:down', function (e) {
if(ligature){ //连线模式
//点击位置坐标
var pointering = canvas.getPointer(event.originalEvent);
var inner = false;
var objects = canvas.getObjects();
var selected;
//定义被点击物体的信息