使用css旋转后的jsPlumb图表,无法连接

时间:2016-09-04 08:29:19

标签: jquery css jsplumb

我在div中有一个jsPlumb图表,并通过CSS轮换旋转div

但是,轮换后,我无法正确连接元素。 我把图表旋转了-90度。要连接元素,连接将完全相反-90度。

我试图将箭头从元素7连接到元素14,但箭头指向元素11,它在相反方向上正好是90度。

arrow pointing to 11 instead of 14

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);
 }

0 个答案:

没有答案