Javascript 在画布html中绘制线条_Javascript_Jquery_Html_Canvas_Html5 Canvas

Javascript 在画布html中绘制线条

javascript jquery html canvas html5-canvas

Javascript 在画布html中绘制线条,javascript,jquery,html,canvas,html5-canvas,Javascript,Jquery,Html,Canvas,Html5 Canvas,我试图做一个画布，用户可以画一些线，也可以删除它们。一切都很好，但当我删除一些线，然后试图画一些其他的线，删除的线也变得可见。当鼠标按下执行时，删除的行将可见。请帮我解决这个问题 <html> <script type="text/javascript" src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script> <script src="htt

我试图做一个画布，用户可以画一些线，也可以删除它们。一切都很好，但当我删除一些线，然后试图画一些其他的线，删除的线也变得可见。当鼠标按下执行时，删除的行将可见。请帮我解决这个问题

<html>
    <script type="text/javascript" src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function(){
            $("#can").mousemove(function(e){handleMouseMove(e);});
        })
    </script>
    <script type="text/javascript">
        var arr_points = new Array();
        var canvas;
        var isDown;
        function init() {
            canvas = new fabric.Canvas('c', {
                selection: false
            });
            canvas.on('mouse:down', function(o) {
                isDown = true;
                var pointer = canvas.getPointer(o.e);
                start_point_x = pointer.x;
                start_point_y = pointer.y;
                var points = [pointer.x, pointer.y, pointer.x, pointer.y];
                line = new fabric.Line(points, {
                    strokeWidth: 2,
                    fill: 'red',
                    stroke: 'red',
                    originX: 'center',
                    originY: 'center'
                });
                canvas.add(line);
            });
            canvas.on('mouse:move', function(o) {
                if (!isDown) return;
                var pointer = canvas.getPointer(o.e);
                line.set({
                    x2: pointer.x,
                    y2: pointer.y
                });
                canvas.renderAll();
            });
            canvas.on('mouse:up', function(o) {
                var pointer = canvas.getPointer(o.e);
                var point_x = pointer.x;
                var point_y = pointer.y;
                arr_points.push([start_point_x,start_point_y,point_x,point_y]); 
                $(".canvas-container").append(
                    "<a class='remove_line' start_point_x='" + start_point_x + "' start_point_y='" + start_point_y + "' end_point_x='" + point_x +
                    "' end_point_y='" + point_y + "' href='#'><span style='position:absolute; left:" + (point_x + 10) + "px; top:" + (point_y - 7) + "px;'>X</span></a>"
                )
                isDown = false;
            });
        }
        $(document).on('click','.remove_line',function(){
            var len = arr_points.length;
            var start_x = $(this).attr("start_point_x");
            var start_y = $(this).attr("start_point_y");
            var end_x = $(this).attr("end_point_x");
            var end_y = $(this).attr("end_point_y");
            for(i=0; i<len; i++){
                if(start_x == arr_points[i][0] && start_y == arr_points[i][1] && end_x == arr_points[i][2] && end_y == arr_points[i][3]){
                    var temp_index = i;
                }
            }
            arr_points.splice(temp_index, 1);
            $(this).remove();
            var canvas=document.getElementById("c");
            var context=canvas.getContext("2d");
            context.canvas.width = context.canvas.width;
            context.clearRect(0, 0, context.canvas.width, context.canvas.height);
            var newlen = arr_points.length;
            for(i=0; i<newlen; i++){
                context.beginPath();
                context.strokeStyle ='red';
                context.lineWidth = 2;
                context.moveTo(arr_points[i][0],arr_points[i][1]);  
                context.lineTo(arr_points[i][2],arr_points[i][3]);
                context.stroke();
                context.closePath();
            }
        })
    </script>
    <body onload="init()">
        <div><img src="sample.jpg" height="400" width="400" style="position:absolute;" /></div>
        <canvas id="c" width="400" height="400" style="position:absolute;border:2px solid;"></canvas>
    </body>
</html>


$（文档）.ready（函数（）{
$（“#can”）.mousemove（函数（e）{handleMouseMove（e）；}）；
})
var arr_points=新数组（）；
var帆布；
var isDown；
函数init（）{
canvas=new fabric.canvas（'c'{
选择：false
});
canvas.on（'mouse:down'，函数（o）{
isDown=真；
var pointer=canvas.getPointer（o.e）；
起始点=指针.x；
起始点=指针.y；
var points=[pointer.x，pointer.y，pointer.x，pointer.y]；
线=新织物。线（点{
冲程宽度：2，
填充：“红色”，
笔划：“红色”，
原文：“中心”，
原创：“中心”
});
canvas.add（行）；
});
canvas.on（'mouse:move'，函数（o）{
如果（！isDown）返回；
var pointer=canvas.getPointer（o.e）；
line.set({
x2:pointer.x，
y2:pointer.y
});
canvas.renderAll（）；
});
canvas.on（'mouse:up'，函数（o）{
var pointer=canvas.getPointer（o.e）；
var point_x=指针.x；
var point_y=指针.y；
arr_points.push（[start_point_x，start_point_y，point_x，point_y]）；
$（“.canvas容器”）.append(
""
)
isDown=假；
});
}
$（文档）。在（'单击'，'上。删除'u行'，函数（）{
var len=arr_points.length；
var start_x=$（this.attr（“start_point_x”）；
var start_y=$（this.attr（“start_point_y”）；
var end_ux=$（this）.attr（“end_point_ux”）；
var end_y=$（this.attr（“end_point_y”）；
对于（i=0；i我调试了您的代码，发现您的canvas.\u对象仍然有删除的行。因此，我稍微更改了您的代码，请尝试此操作，并告知我是否有效
<html>
<script type="text/javascript" src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script>
    $(document).ready(function(){
        $("#can").mousemove(function(e){handleMouseMove(e);});
    })
</script>
<script type="text/javascript">
  var arr_points = new Array();
  var canvas;
  var isDown;
  function init() {
      canvas = new fabric.Canvas('c', {
        selection: false
      });

    canvas.on('mouse:down', function(o) {
      isDown = true;
      var pointer = canvas.getPointer(o.e);
      // console.log(pointer)
      start_point_x = pointer.x;
      start_point_y = pointer.y;
      var points = [pointer.x, pointer.y, pointer.x, pointer.y];
      line = new fabric.Line(points, {
        strokeWidth: 2,
        fill: 'red',
        stroke: 'red',
        originX: 'center',
        originY: 'center'
      });
      canvas.add(line);
    });

    canvas.on('mouse:move', function(o) {
      if (!isDown) return;
      var pointer = canvas.getPointer(o.e);
      line.set({
        x2: pointer.x,
        y2: pointer.y
      });
      canvas.renderAll();
    });

    canvas.on('mouse:up', function(o) {
        var pointer = canvas.getPointer(o.e);
        var point_x = pointer.x;
        var point_y = pointer.y;
        arr_points.push([start_point_x,start_point_y,point_x,point_y]); 
        $(".canvas-container").append("<a class='remove_line' array_index='"+canvas._objects.length+"' start_point_x='"+start_point_x+"' start_point_y='"+start_point_y+"' end_point_x='"+point_x+"' end_point_y='"+point_y+"' href='#'><span style='position:absolute; left:"+(point_x + 10)+"px; top:"+(point_y - 7)+"px;'>X</span></a>")
      isDown = false;
    });

    $(document).on('click','.remove_line',function(){
        var len = arr_points.length;
        var start_x = $(this).attr("start_point_x");
        var start_y = $(this).attr("start_point_y");
        var end_x = $(this).attr("end_point_x");
        var end_y = $(this).attr("end_point_y");
        for(i=0; i<len; i++){
            if(start_x == arr_points[i][0] && start_y == arr_points[i][1] && end_x == arr_points[i][2] && end_y == arr_points[i][3]){
                var temp_index = i;
            }
        }
        arr_points.splice(temp_index, 1);
        $(this).remove();
        var canvasT=document.getElementById("c");
        var context=canvasT.getContext("2d");
        context.canvas.width = context.canvas.width;
        context.clearRect(0, 0, context.canvas.width, context.canvas.height);
        var newlen = arr_points.length;
        for(i=0; i<newlen; i++){
            context.beginPath();
            context.strokeStyle ='red';
            context.lineWidth = 2;
            context.moveTo(arr_points[i][0],arr_points[i][1]);  
            context.lineTo(arr_points[i][2],arr_points[i][3]);
            context.stroke();
            context.closePath();
        }
        var array_index = -1;
        for(var i=0; i< canvas._objects.length; i++){
          if(canvas._objects[i].x1 == start_x && canvas._objects[i].x2 == end_x && canvas._objects[i].y1 == start_y && canvas._objects[i].y2 == end_y){
              array_index = i;
          }

        }
        canvas._objects.splice(array_index, 1)

  })   
  }







</script>
<body onload="init()">
    <div><img src="sample.jpg" height="400" width="400" style="position:absolute;" /></div>
    <canvas id="c" width="400" height="400" style="position:absolute;border:2px solid;"></canvas>
</body>
</html>


$（文档）.ready（函数（）{
$（“#can”）.mousemove（函数（e）{handleMouseMove（e）；}）；
})
var arr_points=新数组（）；
var帆布；
var isDown；
函数init（）{
canvas=new fabric.canvas（'c'{
选择：false
});
canvas.on（'mouse:down'，函数（o）{
isDown=真；
var pointer=canvas.getPointer（o.e）；
//console.log（指针）
起始点=指针.x；
起始点=指针.y；
var points=[pointer.x，pointer.y，pointer.x，pointer.y]；
线=新织物。线（点{
冲程宽度：2，
填充：“红色”，
笔划：“红色”，
原文：“中心”，
原创：“中心”
});
canvas.add（行）；
});
canvas.on（'mouse:move'，函数（o）{
如果（！isDown）返回；
var pointer=canvas.getPointer（o.e）；
line.set({
x2:pointer.x，
y2:pointer.y
});
canvas.renderAll（）；
});
canvas.on（'mouse:up'，函数（o）{
var pointer=canvas.getPointer（o.e）；
var point_x=指针.x；
var point_y=指针.y；
arr_points.push（[start_point_x，start_point_y，point_x，point_y]）；
$（.canvas容器”）.append（“”）
isDown=假；
});
$（文档）。在（'单击'，'上。删除'u行'，函数（）{
var len=arr_points.length；
var start_x=$（this.attr（“start_point_x”）；
var start_y=$（this.attr（“start_point_y”）；
var end_x=$（this.attr（“end_point_x”）；
var end_y=$（this.attr（“end_point_y”）；
对于（i=0；i可能的副本）