JointJS零基础入门02-事件处理_jointjs 事件-CSDN博客

本文介绍了JointJS库中的事件处理机制，通过实例展示了如何监听和响应图形元素的变更事件，如'change:position'。当矩形元素位置改变时，会触发弹窗显示位置信息。同时，列举了其他可监听的元素事件，如'change:angle'、'change:size'等。代码示例中详细演示了如何在元素位置变化时执行特定操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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则无。代码如下：

<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();
        var rect2=rect.clone();
        rect1.translate(300);
        rect2.translate(450,100);
 
        var link=new joint.dia.Link({
            source: { id:rect.id },
            target: { id:rect1.id }
        });
        var link1=new joint.dia.Link({
            source: { id:rect.id },
            target: { id:rect2.id }
        });
 
        graph.addCells([rect,rect2,rect1,link,link1]);
 
        rect.on('change:position', function //事件：移动矩形
            (rect) {    //此方法对象只针对当rect的位置发生改变时，弹出对话框，获取其位置信息，对recr1无效果
            alert('QLY rect moved');
            console.log(rect.id, ':', rect.get('position'));
        })
    </script>
  </body>