WQM_DC 2016-11-22 14:48 采纳率: 0%
浏览 6404

js跟随鼠标动态画直线

我想要做一个类似这样流程图的效果。每一个控件是用div来写的,然后不同的div之间可以通过鼠标事件动态去进行画线、连线功能。但是自己能力有限,虽然使用鼠标事件,通过canvas或者生成新的小块div,然后一点点的拼接起来,形成一条线。但是却不是像图中显示的那样,是一条直线。
想请问大神,怎样让线随着鼠标的移动,在两个控件间形成的是一条直线,而不是随着鼠标产生的弯弯曲曲的线???

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>画线</title>
    <script type="text/javascript" src="js/jquery-2.2.3.js"></script>
    <style type="text/css">
        div{
            width: 500px;
            height: 500px;
            box-sizing: border-box;
            border: 2px solid #7DA2CE;
            position: relative;
            left: 0;
            top: 0;
        }
        canvas{
            position: absolute;
            left: 0;
            top: 0;
            z-index: -1;
        }
        .dot{
            position: absolute;
            width: 1px;
            height: 1px;
            background-color: #000;
        }
    </style>
</head>
<body>
<div id="content"></div>
<!--<canvas id="canvas"></canvas>-->
</body>
<!--<script type="text/javascript">
    var canvas = document.querySelector('#canvas');
    var dv = $('div').eq(0);
    canvas.width = parseInt(dv.css('width'));
    canvas.height = parseInt(dv.css('height'));
    var ctx = canvas.getContext('2d');
    var arrX = [],arrY = [];
    dv.bind('mousedown',function(e){
        var x,y;
        x = e.offsetX;
        y = e.offsetY;
        arrX.push(x);
        arrY.push(y);
        console.log('X轴'+arrX);
        console.log('Y轴'+arrY);
        dv.bind('mousemove',function(ev){
            var mx,my;
            mx = ev.offsetX;
            my = ev.offsetY;
            arrX.push(mx);
            arrY.push(my);
            drawline(arrX,arrY);
        })
    });
    dv.bind('mouseup',function(e){
        var fx,fy;
        fx = e.offsetX;
        fy = e.offsetY;
        arrX.push(fx);
        arrY.push(fy);
        console.log('X轴'+arrX);
        console.log('Y轴'+arrY);
        $(this).unbind('mousemove');
        arrX.length = 0;
        arrY.length = 0;
    });
/*dv.bind('click',function(e){
    var Fx,Fy,Lx,Ly;
    arr.push(e.offsetX, e.offsetY);
    console.log(arr);
    if(arr.length == 4){
        drawline(arr[0],arr[1],arr[2],arr[3]);
        arr.length = 0;
    }
    //console.log(e.offsetX);
    //console.log(e.offsetY);
});
    //drawline(30,100,46,500);*/
    function drawline(arrx,arry){
        ctx.beginPath();
        ctx.moveTo(arrx[0],arry[0]);
        ctx.lineTo(arrx[arrx.length-1],arry[arry.length-1]);
        ctx.stroke();
        ctx.closePath();
    }
</script>-->
<script type="text/javascript">
    $('#content').bind('mousedown',function(e){
        var x,y;
        x = e.offsetX;
        y = e.offsetY;
        var item = '<div class="dot" style="left: '+x+'px;top: '+y+'px;"></div>';
        $(this).append(item);
        $('#content').bind('mousemove',function(e){
            var x,y;
            x = e.offsetX;
            y = e.offsetY;
            var item = '<div class="dot" style="left: '+x+'px;top: '+y+'px;"></div>';
            $(this).append(item);
        })
    });
    $('#content').bind('mouseup',function(e){
        var x,y;
        x = e.offsetX;
        y = e.offsetY;
        var item = '<div class="dot" style="left: '+x+'px;top: '+y+'px;"></div>';
        $(this).append(item);
        $(this).unbind('mousemove');
    });
</script>
</html>

流程图片

  • 写回答

1条回答 默认 最新

  • devmiao 2016-11-22 15:42
    关注
    评论

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 MATLAB动图问题
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名