具有相同源和目标的JointJS链接
在JointJS中，链接（link）是用来连接两个图形元素（如矩形、椭圆等）的线段。如果你想要创建具有相同源（source）和目标（target）的链接，即一个环（loop）链接，你可以按照以下步骤进行：
使用JointJS创建环链接
- 创建图形（Graph）： 首先，你需要创建一个JointJS图形实例。 var graph = new joint.dia.Graph({}, { cellNamespace: joint.shapes.standard });
- 创建矩形元素： 创建一个矩形元素并将其添加到图形中。 var rect = new joint.shapes.standard.Rectangle(); rect.position(100, 100); rect.resize(100, 40); rect.attr({ body: { fill: 'blue' }, label: { text: 'Node', fill: 'white' } }); graph.addCell(rect);
- 创建环链接： 创建一个链接并将其源和目标都设置为刚才创建的矩形元素。 var link = new joint.shapes.standard.Link(); link.source(rect); // 设置源为矩形元素 link.target(rect); // 设置目标为矩形元素 link.attr({ line: { stroke: 'black', strokeWidth: 2 } }); graph.addCell(link);
- 渲染图形： 最后，你需要一个视图（View）来渲染图形。 var paper = new joint.dia.Paper({ el: document.getElementById('paper'), model: graph, width: 800, height: 600, gridSize: 10 });
完整示例代码
<!DOCTYPE html>
<html>
<head>
<title>JointJS Loop Link Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.5.0/joint.min.js"></script>
<style>
#paper {
border: 1px solid black;
}
</style>
</head>
<body>
<div id="paper"></div>
<script>
$(document).ready(function() {
var graph = new joint.dia.Graph({}, { cellNamespace: joint.shapes.standard });
var rect = new joint.shapes.standard.Rectangle();
rect.position(100, 100);
rect.resize(100, 40);
rect.attr({
body: {
fill: 'blue'
},
label: {
text: 'Node',
fill: 'white'
}
});
graph.addCell(rect);
var link = new joint.shapes.standard.Link();
link.source(rect);
link.target(rect);
link.attr({
line: {
stroke: 'black',
strokeWidth: 2
}
});
graph.addCell(link);
var paper = new joint.dia.Paper({
el: document.getElementById('paper'),
model: graph,
width: 800,
height: 600,
gridSize: 10
});
});
</script>
</body>
</html>在这个示例中，我们创建了一个矩形元素，并将其作为链接的源和目标，从而创建了一个环链接。你可以根据需要调整矩形和链接的属性。
相关·内容
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
云直播
对象存储
腾讯会议活动推荐
腾讯云开发者
