您的位置：首页 > Web前端 > JavaScript

JointJS零基础入门02-事件处理

2017-08-21 10:57 260 查看

2.1 事件处理简介

JointJS库基于Backbone MVC库，图中任何模型触发的所有事件实例代码片段如下：

graph.on('all', function(eventName, cell) {
console.log(arguments);
});
要查看触发的事件，请打开浏览器控制台并对上述文档进行一些更改：移动矩形，通过拖动链接创建新顶点，删除顶点，通过拖动突出显示的箭头断开链接，删除链接， ...

您还可以对特定型号的特定事件做出反应：
rect.on('change:position', function(element) {
console.log(element.id, ':', element.get('position'));
});

2.2 实例（change:position）

dia.Element.events

以下列表包含您可以对其进行反应的事件：

change - 为元素上的任何更改触发通用事件

change:position - 当元素改变其位置时被触发

change:angle - 当元素旋转时触发

change:size - 当元素调整大小时触发

change:attrs - 当元素更改其属性时触发

change:embeds - 当其他单元格嵌入元素时触发

change:parent - 当元素嵌入另一个元素时被触发

change:z- 当元素在z级移动（toFront和toBack）时被触发

transition:start - 转换开始时触发。

transition:end - 当运输结束时触发。

详见API参考

以下完整代码以change:position事件处理方法为例，当改变左矩形rect的位置时，弹出提示对话框，获取位置信息，改变右侧矩形rect1则无。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MyJointJS02</title>
<link rel="stylesheet" href="css/joint.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/lodash.js"></script>
<script type="text/javascript" src="js/backbone.js"></script>
<script type="text/javascript" src="js/joint.js"></script>
</head>
<body>
<div id="myDiv"></div>
<script type="text/javascript">

var graph=new joint.dia.Graph; //创建模型

var paper=new joint.dia.Paper({
el: $('#myDiv'), //纸放在哪
width: 1000, //纸多大
height: 500,
model: graph, //纸里有什么
gridSize: 1
}); //注意Paper,js对大小写敏感

var rect=new joint.shapes.basic.Rect({ //绘制元素
position:{x: 100 , y: 70},
size: {width: 100 ,height: 30},
attrs: {rect: {fill: 'pink' }, text: {text: 'QLY' , fill: 'white'} }
});

var rect1=rect.clone();
rect1.translate(300);

var link=new joint.dia.Link({
source: { id:rect.id },
target: { id:rect1.id }
});

graph.addCells([rect,rect1,link]);

rect.on('change:position', function //事件：移动矩形
(rect) { //此方法对象只针对当rect的位置发生改变时，弹出对话框，获取其位置信息，对recr1无效果
alert('QLY rect moved');
console.log(rect.id, ':', rect.get('position'));
});
</script>
</body>
</html>

2.3 效果图

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： JointJS backbone 移动对话框

相关文章推荐

新的分享

章节导航