不显示线连接器但显示端点
Line connector not displayed but endpoints are displayed
使用以下内容:
- svg js,
- svg.connectable.min.js
- 和svg.draggy.min.js
我正在使用拖放创建线路连接器,如本例所示:
http://jsfiddle.net/L2sjjc3b/16/
但在我的程序中同样不起作用。我可以看到线路路径是在控制台中创建的,但未显示在输出中。这是我的傻瓜:http://plnkr.co/edit/oAQ4bj4WhXdLxPg8eCyL?p=preview
<div id="canvas" tabindex="0">
<script>
var draw = SVG('canvas').size('100%', '100%');
var clientX, clientY, offsetX, offsetY;
var x, y;
var shapeId = "";
function getId(id)
{
shapeId = id;
console.log(shapeId);
}
function createShape(event)
{
var $stageContainer = $("#canvas");
var stageOffset = $stageContainer.offset();
clientX = event.clientX;
clientY = event.clientY;
offsetX = stageOffset.left;
offsetY = stageOffset.top;
x = clientX - offsetX;
y = clientY - offsetY;
console.log("x is: " + x + " " + "y is: " + y);
switch (shapeId)
{
case('newConnector'):
createLine(x, y);
break;
default:
console.log("Nothing to drag");
}
}
function createLine(x, y)
{
var links = draw.group();
var markers = draw.group();
var nodes = draw.group();
var g1 = nodes.group().translate(20, 80).draggy();
g1.circle(10).fill("#FF5252").opacity(0.4);
var g2 = nodes.group().translate(100, 80).draggy();
g2.circle(10).fill("#C2185B").opacity(0.8);
var conn1 = g1.connectable({
container: links,
markers: markers,
marker: 'default',
targetAttach: 'perifery',
color: 'black'
}, g2);
}
</script>
</div>
使用旧版本的 svgjs 修复了它:http://cdnjs.cloudflare.com/ajax/libs/svg.js/1.0.1/svg.min.js
所以新版本显然有问题。
使用以下内容:
- svg js,
- svg.connectable.min.js
- 和svg.draggy.min.js
我正在使用拖放创建线路连接器,如本例所示: http://jsfiddle.net/L2sjjc3b/16/
但在我的程序中同样不起作用。我可以看到线路路径是在控制台中创建的,但未显示在输出中。这是我的傻瓜:http://plnkr.co/edit/oAQ4bj4WhXdLxPg8eCyL?p=preview
<div id="canvas" tabindex="0">
<script>
var draw = SVG('canvas').size('100%', '100%');
var clientX, clientY, offsetX, offsetY;
var x, y;
var shapeId = "";
function getId(id)
{
shapeId = id;
console.log(shapeId);
}
function createShape(event)
{
var $stageContainer = $("#canvas");
var stageOffset = $stageContainer.offset();
clientX = event.clientX;
clientY = event.clientY;
offsetX = stageOffset.left;
offsetY = stageOffset.top;
x = clientX - offsetX;
y = clientY - offsetY;
console.log("x is: " + x + " " + "y is: " + y);
switch (shapeId)
{
case('newConnector'):
createLine(x, y);
break;
default:
console.log("Nothing to drag");
}
}
function createLine(x, y)
{
var links = draw.group();
var markers = draw.group();
var nodes = draw.group();
var g1 = nodes.group().translate(20, 80).draggy();
g1.circle(10).fill("#FF5252").opacity(0.4);
var g2 = nodes.group().translate(100, 80).draggy();
g2.circle(10).fill("#C2185B").opacity(0.8);
var conn1 = g1.connectable({
container: links,
markers: markers,
marker: 'default',
targetAttach: 'perifery',
color: 'black'
}, g2);
}
</script>
</div>
使用旧版本的 svgjs 修复了它:http://cdnjs.cloudflare.com/ajax/libs/svg.js/1.0.1/svg.min.js
所以新版本显然有问题。