Fatal编程技术网

Javascript 画布点对点用户线

javascript canvas

Javascript 画布点对点用户线,javascript,canvas,line,user-input,Javascript,Canvas,Line,User Input,我一直在尝试创建一个绘图应用程序，作为其中一个功能，我希望用户画一条直线。我希望用户单击鼠标，然后拖动鼠标，当他们放开鼠标时，将绘制第二个点，并从其起点和终点绘制一条直线 然而到目前为止，它只是从中心画了一条对角线，一个设定的长度，任何人都能帮上忙，这就是问题所在的代码 var line = document.getElementById('line'); // Function for the line to draw line.addEventListener(

我一直在尝试创建一个绘图应用程序，作为其中一个功能，我希望用户画一条直线。我希望用户单击鼠标，然后拖动鼠标，当他们放开鼠标时，将绘制第二个点，并从其起点和终点绘制一条直线

然而到目前为止，它只是从中心画了一条对角线，一个设定的长度，任何人都能帮上忙，这就是问题所在的代码

     var line = document.getElementById('line');

     // Function for the line to draw
    line.addEventListener('click', function () {
        // Removed extra code
        var putPoint2 = function (e) {
            if (dragging2) {
            var new_size = size/2;

              context.moveTo(e.offsetX, e.offsetY);


            }

        };
        engage2 = function (e) { // Made engage2() "global" to refer it in engage()
            dragging2 = true;
            putPoint2(e);
            disengage2(e);
            canvas.addEventListener('mousedown', putPoint2); // Repositioned event attachment
            //canvas.addEventListener('mousemove', disengage2); // Repositioned event attachment
        };
        var disengage2 = function (e) {
            dragging2 = false;
        context.lineTo(e.offsetX+10, e.offsetY+10);
context.stroke();
            context.beginPath();
            canvas.removeEventListener('mousedown', putPoint2); // Added event detachment
            canvas.removeEventListener('mouseup', disengage2); // Added event detachment
        };
您可以使用第二个临时画布让用户拖动绘制线。

如何做到这一点的概述：

创建第二个临时屏幕外画布，其大小与屏幕上画布的大小完全相同

鼠标向下移动：

  • 将临时画布移动到常规画布的正上方
  • 保存开始拖动XY
  • 设置指示已开始拖动的标志
鼠标移动：

  • 清除临时画布
  • 在临时画布上：从开始拖动XY到当前鼠标XY绘制一条线
鼠标上或鼠标下：

  • 拖动已结束，请清除拖动标志
  • 将临时画布移到屏幕外
  • 在主画布上：从起始拖动XY到结束鼠标XY绘制一条线
下面是代码和演示：


正文{背景色：象牙；}
#包装纸{
位置：相对位置；
宽度：300px；
高度：200px；
}
#画布#canvasTemp{
位置：绝对；顶部：0px；左侧：0px；
边框：1px纯蓝色；
宽度：100%；
身高：100%；
}
#canvasTemp{边框：1.5px纯绿色；}
#画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var canvasTemp=document.getElementById（“canvasTemp”）；
var ctxTemp=canvasTemp.getContext（“2d”）；
var canvasOffset=$（“#画布”）.offset（）；
var offsetX=canvasOffset.left；
var offsetY=canvasOffset.top；
var-startX；
var startY；
var isDown=假；
$（“#canvasTemp”）.css（{左：-500，顶部：0}）；
功能抽绳（toX、玩具、上下文）{
context.beginPath（）；
context.moveTo（startX，startY）；
lineTo（毒物、玩具）；
stroke（）；
}
功能手柄向下（e）{
e、 预防默认值（）；
mouseX=parseInt（e.clientX-offsetX）；
mouseY=parseInt（例如clientY-offsetY）；
//保存拖动startXY，
//将临时画布移到主画布上，
//设置拖动标志
startX=mouseX；
斯塔蒂=老鼠；
ctxTemp.clearRect（0,0，canvasTemp.width，canvasTemp.height）；
$（“#canvasTemp”）.css（{left:0，top:0}）；
isDown=真；
}
功能handleMouseUp（e）{
e、 预防默认值（）；
如果（！isDown）{return；}
//清除拖动标志
//将临时画布移到屏幕外
//在主画布上绘制用户的线条
isDown=假；
mouseX=parseInt（e.clientX-offsetX）；
mouseY=parseInt（例如clientY-offsetY）；
$（“#canvasTemp”）.css（{左：-500，顶部：0}）；
抽绳（mouseX、mouseY、ctx）；
}
功能手柄移动（e）{
e、 预防默认值（）；
如果（！isDown）{return；}
mouseX=parseInt（e.clientX-offsetX）；
mouseY=parseInt（例如clientY-offsetY）；
//清除临时画布
//在临时画布上，从拖动开始到鼠标移动绘制一条线
ctxTemp.clearRect（0,0，canvasTemp.width，canvasTemp.height）；
抽绳（mouseX、mouseY、ctxTemp）；
}
$（“#canvas”）.mousedown（函数（e）{handleMouseDown（e）；}）；
$（“#canvas”）.mousemove（函数（e）{handleMouseMove（e）；}）；
$（“#canvas”）.mouseup（函数（e）{handleMouseUp（e）；}）；
$（“#canvas”）.mouseout（函数（e）{handleMouseUp（e）；}）；
}); // end$（函数（）{}）；
当然可以，为什么不呢？如果您愿意跟踪并重新绘制所有以前的线段，那么1个画布就可以了。：-）这在pc上运行良好，但在移动设备上不起作用。我想在html5移动设备@markE中绘制触摸线、圆圈和矩形 
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #wrapper{
        position:relative;
        width:300px;
        height:200px;
    }
    #canvas,#canvasTemp{
        position:absolute; top:0px; left:0px;
        border:1px solid blue;
        width:100%;
        height:100%;
    }
    #canvasTemp{ border:1.5px solid green; }
    #canvas{ border:1px solid red; }
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var canvasTemp=document.getElementById("canvasTemp");
    var ctxTemp=canvasTemp.getContext("2d");
    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    var startX;
    var startY;
    var isDown=false;

    $("#canvasTemp").css({ left:-500, top:0 });

    function drawLine(toX,toY,context){
        context.beginPath();
        context.moveTo(startX, startY);
        context.lineTo(toX,toY);
        context.stroke();
    }

    function handleMouseDown(e){
      e.preventDefault();
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // save drag-startXY, 
      // move temp canvas over main canvas,
      // set dragging flag
      startX=mouseX;
      startY=mouseY;
      ctxTemp.clearRect(0,0,canvasTemp.width,canvasTemp.height);
      $("#canvasTemp").css({ left:0, top:0 });
      isDown=true;
    }

    function handleMouseUp(e){
      e.preventDefault();
      if(!isDown){return;}
      // clear dragging flag
      // move temp canvas offscreen
      // draw the user's line on the main canvas
      isDown=false;
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);
      $("#canvasTemp").css({ left:-500, top:0 });
      drawLine(mouseX,mouseY,ctx);
    }

    function handleMouseMove(e){
      e.preventDefault();        
      if(!isDown){return;}
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);
      // clear the temp canvas
      // on temp canvas draw a line from drag-start to mouseXY
      ctxTemp.clearRect(0,0,canvasTemp.width,canvasTemp.height);
      drawLine(mouseX,mouseY,ctxTemp);
    }

    $("#canvas").mousedown(function(e){handleMouseDown(e);});
    $("#canvas").mousemove(function(e){handleMouseMove(e);});
    $("#canvas").mouseup(function(e){handleMouseUp(e);});
    $("#canvas").mouseout(function(e){handleMouseUp(e);});

}); // end $(function(){});
</script>

</head>

<body>
    <div id="wrapper">
        <canvas id="canvasTemp" width=300 height=200></canvas>
        <canvas id="canvas" width=300 height=200></canvas>
    </div>
</body>
</html>