캔버스의 선 그리기 html

사용자가 몇 줄을 그릴 수 있고 캔버스를 제거 할 수있는 캔버스를 만들려고합니다. 모든 것이 잘 작동하지만 일부 선을 제거한 다음 다른 선을 그릴 때 삭제 된 선도 표시됩니다. 마우스 다운이 수행되면 삭제 된 행이 표시됩니다. 이 문제를 해결하도록 도와주세요.캔버스의 선 그리기 html

<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>

출처

2017-05-24 Nitish Mahna

가능한 중복 [fabric.js 직선 및 클릭에 선택] (https://stackoverflow.com/questions/35016961/fabric-js-straight-line-and-select-on-click) – Durga

코드를 디버깅 한 결과 canvas._object에 삭제 된 행이 남아있는 것으로 나타났습니다. 그래서, 당신의 코드를 약간 바꾸었고, 이것을 시도해보고 이것이 작동하는지 알려주세요.

<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>

출처

2017-05-24 06:44:19

고마워요, 효과가있었습니다. :) –

캔버스의 선 그리기 html

답변

관련 문제