我在div
中有一个jsPlumb图表,并通过CSS轮换旋转div
。
但是,轮换后,我无法正确连接元素。 我把图表旋转了-90度。要连接元素,连接将完全相反-90度。
我试图将箭头从元素7连接到元素14,但箭头指向元素11,它在相反方向上正好是90度。
var endpointOptions = {
anchors: "Center",
endpoint: [
"Dot",
{
radius: 20
}
],
paintStyle: {
fillStyle: 'none'
},
isSource: true,
isTarget: true,
connector: "Straight",
connectorStyle: {
lineWidth: 2,
strokeStyle: 'gray'
}
};
// creating dynamic endpoint
// Dynamic DIV creations
for (var j = 1; j <= 5; j++) {
var k = $("<div id='dvrow-" + j + "' class='verrow'> </div>");
for (var i = 1; i <= 3; i++) {
circleNumber++;
var d = $("<div id='divPoint-" + circleNumber + "' class='circle'>" + circleNumber + "</div>");
d.appendTo(k);
}
k.appendTo("#circuitContainer");
}
for (var p = 1; p <= circleNumber; p++) {
var s = jsPlumb.addEndpoint("divPoint-" + p, { uuid: "abcdefg"}, endpointOptions);
}
// Rotate div using CSS
var rotate = function (dir) {
var angle = ($('#circuitContainer').data('angle')) || 0;
if (dir == 'L') {
angle -= 90;
} else {
angle += 90;
}
$('#circuitContainer').css({
'transition': 'all 1s ease',
'transform': 'rotate(' + angle + 'deg)',
'transform-origin': '0% 0%',
});
$('#circuitContainer').find('.circle').css({
'transform': 'rotate(' + -angle + 'deg)'
});
$('#circuitContainer').data('angle', angle);
}