请参阅下面的工作代码。有人能告诉我如何设置连接两个 div 的线的不透明度吗?我在文档中找不到任何关于此的内容。我尝试传递 setOpacity: 0.5
、 opacity: 0.5
并使用 strokeStyle: rgba(120, 120, 240, 0.4)
作为 paintStyle
中的属性。这些都没有帮助。
谢谢你的帮助。
代码
<!DOCTYPE html>
<html>
<head>
<title>jsplumb example</title>
<style type="text/css">
.nodes {
border: 2px solid steelblue;
width: 200px;
height: 100px;
}
.div1 {
position: relative;
top: 10%;
left: 10%;
}
.div2 {
position: relative;
top: 20%;
left: 40%;
}
</style>
</head>
<body>
<div class='containerdiv'>
<div class="nodes div1" id="inner1">Inner 1</div>
<div class="nodes div2" id="inner2">Inner 2</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript" src="./jquery.jsPlumb-1.3.16-all-min.js"></script>
<script type="text/javascript">
jsPlumb.bind("ready", function() {
jsPlumb.connect({
source:"inner1", target:"inner2",
paintStyle: {strokeStyle: 'rgb(120,120,240)', lineWidth: 6}
});
jsPlumb.draggable('inner1');
jsPlumb.draggable('inner2');
});
</script>
</body>
</html>
最佳答案
有两个选项,第一个(我无法使用)是使用 connectorClass
属性,为连接器元素分配一个类名或一个用空格分隔的类名列表。但是,如前所述,这似乎不起作用(或者我做错了,考虑到时间,这是可能的)。
另一方面,鉴于包含连接器的 svg 元素具有可预测的类名,您可以简单地使用 CSS 直接设置该元素的样式:
._jsPlumb_connector {
opacity: 0.5; /* or whatever... */
}
JS Fiddle demo 。
关于css - 如何在jsplumb中设置连接线的不透明度?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/14554717/