如何在jquery中使用mousemove事件绘制线条？

Question

我正在使用jquery绘制线条，它对我来说很好，但问题是只有当我执行mouseup事件时才能看到线条，当我执行mousemove事件时我想做什么，它应该必须长大，任何人都可以帮助我，我该怎么做？我在这里添加了我的脚本，只想做mousemove事件，我想只用jquery做这个我不想要画布，有人可以帮我这个吗？谢谢你的时间

var coordinate = [];
            var count_line = 1;
            $("div").mousedown(function (event) {
		if(!$(event.target).hasClass('line')) {
		    var parentOffset = $(this).parent().offset();
		    var relX = event.pageX - parentOffset.left;
		    var relY = event.pageY - parentOffset.top;
		    var temp_array = [];
		    temp_array['X'] = (event.pageX - $(this).offset().left);
		    temp_array['Y'] = event.pageY - $(this).offset().top;
		    coordinate.push(temp_array);
		}
                
            });

            $("div").mouseup(function (event) {
		if(!$(event.target).hasClass('line')) {
		    var parentOffset = $(this).parent().offset();
		    var relX = event.pageX - parentOffset.left;
		    var relY = event.pageY - parentOffset.top;
		    var temp_array = [];
		    temp_array['X'] = (event.pageX - $(this).offset().left);
		    temp_array['Y'] = event.pageY - $(this).offset().top;
		    coordinate.push(temp_array);
		    drawLine();
		    coordinate = [];
		    count_line++;
		    $(".line").draggable();
		}
            });

            function drawLine() {
                console.log(coordinate);
                if (coordinate.length > 1)
                {
                    var start_x = coordinate[0]['X'];
                    var start_y = coordinate[0]['Y'];
                    var end_x = coordinate[1]['X'];
                    var end_y = coordinate[1]['Y'];
                    var x_diff = Math.abs(parseInt(end_x) - parseInt(start_x));
                    var y_diff = Math.abs(parseInt(end_y) - parseInt(start_y));
                    console.log(x_diff + ' - ' + y_diff);
                    if (x_diff > y_diff)
                    {
                        if (start_x < end_x) {
                            var width = parseInt(end_x) - parseInt(start_x);
                            $(".center-div").append("<div class='line' draggable='true' id='line_" + count_line + "' />");
                            $("div #line_" + count_line).css("position", "absolute");
                            $("div #line_" + count_line).css("left", start_x + "px");
                            $("div #line_" + count_line).css("top", end_y + "px");
                            $("div #line_" + count_line).css("width", width + "px");
                            $("div #line_" + count_line).css("border", "1px solid black");
                            $("div #line_" + count_line).css("height", "0px");
                        } else if (start_x > end_x) {
                            var width = parseInt(start_x) - parseInt(end_x);
                            $(".center-div").append("<div class='line' draggable='true' id='line_" + count_line + "' />");
                            $("div #line_" + count_line).css("position", "absolute");
                            $("div #line_" + count_line).css("left", end_x + "px");
                            $("div #line_" + count_line).css("top", end_y + "px");
                            $("div #line_" + count_line).css("width", width + "px");
                            $("div #line_" + count_line).css("border", "1px solid black");
                            $("div #line_" + count_line).css("height", "0px");
                        }
                    }
                    else
                    {
                        if (start_y < end_y) {
                            var height = parseInt(end_y) - parseInt(start_y);
                            $(".center-div").append("<div class='line' draggable='true' id='line_" + count_line + "' />");
                            $("div #line_" + count_line).css("position", "absolute");
                            $("div #line_" + count_line).css("top", start_y + "px");
                            $("div #line_" + count_line).css("left", start_x + "px");
                            $("div #line_" + count_line).css("height", height + "px");
                            $("div #line_" + count_line).css("width", "0px");
                            $("div #line_" + count_line).css("border", "1px solid black");
                        } else if (start_y > end_y) {
                            var height = parseInt(start_y) - parseInt(end_y);
                            $(".center-div").append("<div class='line' draggable='true' id='line_" + count_line + "' />");
                            $("div #line_" + count_line).css("position", "absolute");
                            $("div #line_" + count_line).css("top", end_y + "px");
                            $("div #line_" + count_line).css("left", start_x + "px");
                            $("div #line_" + count_line).css("height", height + "px");
                            $("div #line_" + count_line).css("width", "0px");
                            $("div #line_" + count_line).css("border", "1px solid black");
                        }
                    }
                    coordinate = [];
                }
            }

            $("div").mousemove(function (event) {
		
            });

.center-div {
		width: 80%;
		height: 80%;		
		background: grey;
		position: absolute;
		top:0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	    }

            .line{
                height: 47px;
                border-bottom: 1px solid black;
                position: absolute;
            }
	    .line:hover {
		border: 1px dotted #000;
		background: white;
		padding: 2px;
		font-size: 1.2em;
		cursor: pointer;
	    }

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="center-div"></div>

Answer 1

＆＃13;

＆＃13;

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var drawx=0;
var drawy=0;


    $(document).mousemove(function(event){
        $("span").text(event.pageX + ", " + event.pageY);
        
    

 
});

function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {
          x: evt.clientX - rect.left,
          y: evt.clientY - rect.top
        };
      }
   
      canvas.addEventListener('mousemove', function(evt) {
        var mousePos = getMousePos(canvas, evt);
        var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
       if (drawx==0 && drawy==0) {
       drawx=mousePos.x;
drawy=mousePos.y;
       }
           ctx.moveTo(drawx,drawy);
ctx.lineTo(mousePos.x,mousePos.y);
ctx.stroke();

drawx=mousePos.x;
drawy=mousePos.y;
       
      }, false);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>


<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #d3d3d3;">
Your browser does not support the canvas element.
</canvas>


<span></span>

＆＃13;

＆＃13;

＆＃13;

在画布上看我的剪刀。 Div元素不是为绘图而设计的，它会带来性能和内存问题。

Answer 2

最后我解决了它

＆＃13;

＆＃13;

            var coordinate = [];
            var count_line = 1;
            var starting_coordinate_x = '';
            var starting_coordinate_y = '';
            var is_clicked = false;
            $("div").mousedown(function (event) {
                if (!$(event.target).hasClass('line')) {
                    var parentOffset = $(this).parent().offset();
                    var relX = event.pageX - parentOffset.left;
                    var relY = event.pageY - parentOffset.top;
                    var temp_array = [];
                    temp_array['X'] = (event.pageX - $(this).offset().left);
                    temp_array['Y'] = event.pageY - $(this).offset().top;
                    starting_coordinate_x = temp_array['X'];
                    starting_coordinate_y = temp_array['Y'];
                    coordinate.push(temp_array);
                    is_clicked = true;
                    $(".center-div").append("<div class='line' id='line_" + count_line + "' />");
                }
            });

            $("div").mouseup(function (event) {
                coordinate = [];
                count_line++;
                is_clicked = false;
                $(".line").draggable();
            });

            function drawLine(starting_coordinate_x, starting_coordinate_y, end_coordinate_x, end_coordinate_y) {
                console.log(coordinate);
                if (coordinate.length > 1)
                {
                    var start_x = starting_coordinate_x;
                    var start_y = starting_coordinate_y;
                    var end_x = end_coordinate_x;
                    var end_y = end_coordinate_y;
                    var x_diff = Math.abs(parseInt(end_x) - parseInt(start_x));
                    var y_diff = Math.abs(parseInt(end_y) - parseInt(start_y));
                    console.log(x_diff + ' - ' + y_diff);
                    if (x_diff > y_diff)
                    {
                        if (start_x < end_x) {
                            var width = parseInt(end_x) - parseInt(start_x);
                            $("div #line_" + count_line).css("position", "absolute");
                            $("div #line_" + count_line).css("left", start_x + "px");
                            $("div #line_" + count_line).css("top", end_y + "px");
                            $("div #line_" + count_line).css("width", width + "px");
                            $("div #line_" + count_line).css("border", "1px solid black");
                            $("div #line_" + count_line).css("height", "0px");
                        } else if (start_x > end_x) {
                            var width = parseInt(start_x) - parseInt(end_x);
                            $("div #line_" + count_line).css("position", "absolute");
                            $("div #line_" + count_line).css("left", end_x + "px");
                            $("div #line_" + count_line).css("top", end_y + "px");
                            $("div #line_" + count_line).css("width", width + "px");
                            $("div #line_" + count_line).css("border", "1px solid black");
                            $("div #line_" + count_line).css("height", "0px");
                        }
                    }
                    else
                    {
                        if (start_y < end_y) {
                            var height = parseInt(end_y) - parseInt(start_y);
                            $("div #line_" + count_line).css("position", "absolute");
                            $("div #line_" + count_line).css("top", start_y + "px");
                            $("div #line_" + count_line).css("left", start_x + "px");
                            $("div #line_" + count_line).css("height", height + "px");
                            $("div #line_" + count_line).css("width", "0px");
                            $("div #line_" + count_line).css("border", "1px solid black");
                        } else if (start_y > end_y) {
                            var height = parseInt(start_y) - parseInt(end_y);
                            $("div #line_" + count_line).css("position", "absolute");
                            $("div #line_" + count_line).css("top", end_y + "px");
                            $("div #line_" + count_line).css("left", start_x + "px");
                            $("div #line_" + count_line).css("height", height + "px");
                            $("div #line_" + count_line).css("width", "0px");
                            $("div #line_" + count_line).css("border", "1px solid black");
                        }
                    }
                    coordinate = [];
                }
            }

            $("div").mousemove(function (event) {
                if (is_clicked) {
                    var parentOffset = $(this).parent().offset();
                    var relX = event.pageX - parentOffset.left;
                    var relY = event.pageY - parentOffset.top;
                    var temp_array = [];
                    temp_array['X'] = (event.pageX - $(this).offset().left);
                    temp_array['Y'] = (event.pageY - $(this).offset().top);
                    console.log(temp_array['X'], temp_array['Y']);
                    coordinate.push(temp_array);
                    drawLine(starting_coordinate_x, starting_coordinate_y, temp_array['X'], temp_array['Y']);
                }
            });
	

＆＃13;

	    .center-div {
		width: 80%;
		height: 80%;		
		background: grey;
		position: absolute;
		top:0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	    }

            .line{
                height: 47px;
                border-bottom: 1px solid black;
                position: absolute;
            }
	    .line:hover {
		border: 1px dotted #000;
		background: white;
		padding: 2px;
		font-size: 1.2em;
		cursor: pointer;
	    }
	

＆＃13;

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="center-div"></div>

＆＃13;

＆＃13;

＆＃13;