Question

我想在画布上使用JQuery在动态制作的div之间绘制线条。目标是看起来像jsplumbs流程图。线可以保持静态（div是可拖动的，tho）。应该有一个带有4个锚点的起点（圆圈）和动态创建的div（箱子），每个都有4个锚点。双击来自不同父级的2个锚点后，应创建这些线条。问题：双击后的图形不正确。这些线条没有出现在正确的位置。他们也表现出错误的方向。似乎只能创建45度差异的线条。

有人能告诉我一个功能性的解决方案吗？

小提琴 http://jsfiddle.net/marcoma/23HuF/

html代码：

<body>

    <input id="btn1" type="button" value="create div" />    

    <div id="circle1" class="startpoint"></div>

    <canvas id="theCanvas" width="800px" height="500px"></canvas>


    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script src="divmaker.js"></script>


</body>

Jquery代码：

var divCount = 0;
var canvas = document.getElementById("theCanvas");
var context = canvas.getContext('2d');
var lineCounter = 0;
var lineList = [];
var canOffLeft = canvas.offsetParent.offsetLeft;
var canOffTop = canvas.offsetParent.offsetTop;


$("#btn1").click(function(){
    $("<div/>", {
        id: "div" + divCount,
        class: "dynamicDiv",

    }).draggable().appendTo("body").click(function(){      
        $(this).toggleClass("highlight")    
    });
    $('<div/>', {
        id: "left",
        class: "anchorPoint",
    }).appendTo("#div" + divCount).dblclick(drawLine);
    $('<div/>', {
        id: "top",
        class: "anchorPoint",
    }).appendTo("#div" + divCount).dblclick(drawLine);
    $('<div/>', {
        id: "right",
        class: "anchorPoint",
    }).appendTo("#div" + divCount).dblclick(drawLine);
    $('<div/>', {
        id: "bottom",
        class: "anchorPoint",
    }).appendTo("#div" + divCount).dblclick(drawLine);
    divCount++;
});


function init(){
    canvas.width = 800;
    canvas.height = 500;

}


function getPosition(element){
    var rect = document.getElementById(element.id).getBoundingClientRect();
    var x = rect.left-canOffLeft+(rect.width/2);
    var y = rect.top-canOffTop+(rect.height/2);
      return[x,y];
}

function drawLine(){
    lineCounter = lineCounter+1;

    if(lineCounter==1){
        xy1 = getPosition(document.getElementById(this.id));
        element = document.getElementById(this.id);
    }

    if(lineCounter==2){
        var xy2 = getPosition(document.getElementById(this.id));
        context.beginPath();
        context.moveTo(xy1[0],xy1[1]);
        context.lineTo(xy2[0],xy2[1]);
        context.strokeStyle= "#000";
        context.fill();
        context.closePath();
        context.stroke();
        console.log(xy1,xy2);
        lineCounter = 0;
    }
}

init();

和CSS代码：

body{
    width: 1200px;
    height: 800px;
    font-family: sans-serif;

}


#theCanvas {    

    z-index: 1;
    border:1px groove rgba(187,187,187,0.79);
    box-shadow: 11px 11px 200px #000000;
    text-align: center;
    margin-left: 70px;
    margin-top: -300px;

}

.dynamicDiv {
    z-index: 2;
    width:200px;
    height:100px;
    border:solid 1px #c0c0c0;
    background-color:#e1e1e1;
    font-size:11px;
    font-family:verdana;
    color:#000;
    padding:5px;
    margin: 0px auto;
    text-align: center;
    }

#btn1 {
    margin-top: 0px;
    margin-left: 0px;
}

.highlight{
    background-color: cyan;
}

.startpoint{
    -webkit-border-radius: 999px;
    -moz-border-radius: 999px;
    border-radius: 999px;
    width: 50px;
    height: 50px;
    background: yellow;
    border: 1px solid black;
    margin-left: 90px;
    margin-top: 200px;
}


.anchorPoint{
     width: 10px;
    height: 10px;

    border: 1px solid black;


}

#left{


    margin-left: -11px;
    margin-top: 45px; 
}

#right{

    margin-left: 199px;
    margin-top: 45px;
}

#top{

    margin-top: -68px;
    margin-left: 100px;
}

#bottom{
    margin-top: 42px;
    margin-left: 100px; 
}

Answer 1

尝试在中风之前不要关闭路径：

  context.beginPath();
  context.moveTo(xy1[0],xy1[1]);
  context.lineTo(xy2[0],xy2[1]);
  context.strokeStyle = "#000";
  context.stroke();

使用JQuery在动画创建的div之间在画布上绘制线条

1 个答案: