堆栈内存溢出
  简体   繁体   English

在画布html中绘制线条

[英]Drawing lines in canvas html

 原文  2017-05-24 05:43:28  3   1    javascript/ jquery/ html/ canvas/ html5-canvas

问题描述

I am trying to make a canvas where user can draw some lines and also can remove them. 我正在尝试制作一个画布，用户可以在其中绘制一些线条，也可以删除它们。 Everything is working fine but when I remove some line and then try to draw some other line, the deleted lines also get visible. 一切工作正常，但是当我删除一些线然后尝试画一些其他线时，删除的线也会变得可见。 As the mouse down performs, deleted lines get visible. 按下鼠标时，已删除的行将可见。 Please help me solving this issue. 请帮助我解决这个问题。 

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

1 个解决方案

解决方案1
 1 已采纳  2017-05-24 06:44:19

I debugged your code and found that your canvas._object still have the deleted line. 我调试了您的代码，发现您的canvas._object仍然具有已删除的行。 So, I changed your code a bit, try this and let me know if this works. 因此，我对您的代码做了一些更改，请尝试一下，让我知道是否可行。 

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 HTML 5 Canvas绘图线？ - HTML 5 Canvas drawing lines? HTML5 Canvas线条未绘制 - HTML5 Canvas lines not drawing HTML5画布绘图时显示线条 - HTML5 canvas Showing lines when drawing 使用HTML5 Canvas和jQuery绘制形状和线条 - Drawing shapes and lines with HTML5 Canvas and jQuery Html5画布，延迟绘制2行 - Html5 canvas, delay drawing 2 lines 绘制大量线条时的HTML画布性能 - HTML canvas performance when drawing lots of lines 画布动画绘图线 - canvas animate drawing lines 画布上的画线点缀着 - Drawing lines on canvas are dotted 更改画布以绘制线条 - Changing canvas for drawing lines 画布的绘制线条 - Drawing lines for Canvas
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM