изображение внезапно исчезло, когда я рисую прямоугольники щелчка мыши над файлом загруженного изображения

Question

изображение внезапно исчезло, когда я рисую прямоугольники щелчка мыши над файлом загруженного изображения

1

Я новичок в HTML5 canvas & JavaScript, я пытаюсь нарисовать несколько щелчков мышью, перемещать прямоугольники на загруженном файле на холсте, как это сделать? Я попробовал некоторые идеи, но изображение внезапно исчезло, когда я нарисую прямоугольник над холстом изображения.

Вот мой код:

<script>
(function() {
var canvas = new fabric.Canvas('panel');

var line, isDown, startPosition={}, rect,drawingMode=true;

canvas.on('mouse:down', function(event){
 if (!drawingMode) return;
    isDown = true;
    console.log(event.e.clientX,event.e.clientY);
    startPosition.x=event.e.clientX;
    startPosition.y=event.e.clientY;

    console.log(startPosition);
        rect=new fabric.Rect({
            left:event.e.clientX,
            top:event.e.clientY,
            width:0,
            height:0,
            stroke:'red',
            strokeWidth:3,
            fill:''
        });
        canvas.add(rect);
});

canvas.on('mouse:move', function(event){
    if (!isDown || !drawingMode) return;

     rect.setWidth(Math.abs( event.e.clientX-startPosition.x ));
     rect.setHeight(Math.abs( event.e.clientY -startPosition.y ));

    canvas.renderAll();
});

canvas.on('mouse:up', function(){
    isDown = false;
    
     canvas.add(rect);
    
//      window.alert("hi");
});

canvas.on('object:selected', function(){
    drawingMode = false;         
});

canvas.on('object:selected', function(){
    drawingMode = false;         
});
canvas.on('selection:cleared', function(){  
    drawingMode = true;      
});

})();
</script>
  <input type='file' id="fileUpload" onChange="readURL(this);" accept="image/*" style="margin-top: 30px; margin-left: 80px;" >     
<script>
function el(id){return document.getElementById(id);} // Get elem by ID
var canvas  = el("panel");
var context = canvas.getContext("2d");


function readImage() {
    if ( this.files && this.files[0] ) {
        var FR= new FileReader();
        FR.onload = function(e) {
           var img = new Image();
           img.addEventListener("load", function() {
             context.drawImage(img, 0, 0, 700, 450);
           });
           img.src = e.target.result;
        };       
        FR.readAsDataURL( this.files[0] );
    }
}
el("fileUpload").addEventListener("change", readImage, false);    
</script>

 <html lang="en" >
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="/index.css" rel="stylesheet" type="text/css" />
    <script src="/fabric.all.min.js" ></script>
    <script src="/jquery.min.js"></script> 
</head>
     
     
     
<body>
    <div class="container">
        <div class="column1">
        
            <canvas id="panel" width="700" height="450" style="border: 2px solid black; width: 500px;height: 400px;"></canvas>
            <input type='file' id="fileUpload" onChange="readURL(this);" accept="image/*" style="margin-top: 30px; margin-left: 80px;" >
        </div>
 
</div>

Кроме того, у меня есть эта скрипка кода:

jsfiddle.net/mahbub_rahman/m04c3smj/5

Спасибо за вашу помощь.

Harshitha Raj 27 апр. 2018, в 11:01

Источник

0

Пожалуйста, предоставьте свой код, он поможет людям понять вашу проблему @Harshitha :).
Federico Navarrete 27 апр. 2018, в 09:03
0

вот ссылка: jsfiddle.net/mahbub_rahman/m04c3smj/5
Harshitha Raj 27 апр. 2018, в 09:16
0

Если вы говорите о JavaScript-библиотеке CanvasJS, вам следует использовать тег canvasjs вместо общего тега canvas .
anothernode 27 апр. 2018, в 09:18
1

Кроме того, предпочтительно включить в свой вопрос код, соответствующий вашему вопросу, в виде правильно отформатированного текста. Переполнение стека - это создание вопросов и ответов, которые полезны не только для человека, который задал исходный вопрос, но и для сообщества в целом. Например, если в какой-то момент в будущем jsfiddle.net закроется, все вопросы и ответы по этой ссылке будут бесполезны. Вы можете прочитать на страницах справки о том, что именно включить в вопрос.
anothernode 27 апр. 2018, в 09:26
0

@anothernode Да, конечно, спасибо
Harshitha Raj 27 апр. 2018, в 09:31
0

@ Джордж не работает с загруженным файлом.
Harshitha Raj 27 апр. 2018, в 10:05
0

файл загружен значит? я не вижу загрузки файла в твоей скрипке
Vel 27 апр. 2018, в 10:08
0

я обновил код nw, пройдите его, спасибо @ Джордж
Harshitha Raj 27 апр. 2018, в 10:26
0

обновленная скрипка jsfiddle.net/gnanavelr/vsyo5cej/6
Vel 27 апр. 2018, в 10:36
0

изображение снова исчезло @ Джордж
Harshitha Raj 27 апр. 2018, в 10:42
0

обновленная скрипка здесь jsfiddle.net/gnanavelr/vsyo5cej/10
Vel 27 апр. 2018, в 11:04
1

Спасибо, ооооооооооооо
Harshitha Raj 27 апр. 2018, в 12:16
0

пожалуйста :).
Vel 27 апр. 2018, в 12:20
0

@ Джордж может помочь мне, пожалуйста? stackoverflow.com/questions/50097766/...
Harshitha Raj 30 апр. 2018, в 10:53

Показать ещё 12 комментариев

Теги:

javascript

html5-canvas

1 ответ

Ещё вопросы

Пожалуйста, предоставьте свой код, он поможет людям понять вашу проблему @Harshitha :).
Если вы говорите о JavaScript-библиотеке CanvasJS, вам следует использовать тег canvasjs вместо общего тега canvas .
Кроме того, предпочтительно включить в свой вопрос код, соответствующий вашему вопросу, в виде правильно отформатированного текста. Переполнение стека - это создание вопросов и ответов, которые полезны не только для человека, который задал исходный вопрос, но и для сообщества в целом. Например, если в какой-то момент в будущем jsfiddle.net закроется, все вопросы и ответы по этой ссылке будут бесполезны. Вы можете прочитать на страницах справки о том, что именно включить в вопрос.
@ Джордж не работает с загруженным файлом.
файл загружен значит? я не вижу загрузки файла в твоей скрипке
я обновил код nw, пройдите его, спасибо @ Джордж
обновленная скрипка jsfiddle.net/gnanavelr/vsyo5cej/6
изображение снова исчезло @ Джордж
обновленная скрипка здесь jsfiddle.net/gnanavelr/vsyo5cej/10
@ Джордж может помочь мне, пожалуйста? stackoverflow.com/questions/50097766/...

Vel · Accepted Answer · 2018-04-27T08-24-00.000Z

Вы хотите, как это?

проверьте эту ссылку.

<canvas id="canvas" width="400" height="233" style="border:1px solid red"></canvas>


#canvas {
  background-color: white;
}

<script>
    var lineOffset = 4;
    var anchrSize = 2;

    var mousedown = false;
    var clickedArea = {box: -1, pos:'o'};
    var x1 = -1;
    var y1 = -1;
    var x2 = -1;
    var y2 = -1;

    var boxes = [];
    var tmpBox = null;

    document.getElementById("panel").onmousedown = function(e) {
      mousedown = true;
      clickedArea = findCurrentArea(e.offsetX, e.offsetY);
      x1 = e.offsetX;
      y1 = e.offsetY;
      x2 = e.offsetX;
      y2 = e.offsetY;
    };
    document.getElementById("panel").onmouseup = function(e) {
        if (clickedArea.box == -1 && tmpBox != null) {
        boxes.push(tmpBox);
      } else if (clickedArea.box != -1) {
        var selectedBox = boxes[clickedArea.box];
        if (selectedBox.x1 > selectedBox.x2) {
        var previousX1 = selectedBox.x1;
          selectedBox.x1 = selectedBox.x2;
          selectedBox.x2 = previousX1;
        }
        if (selectedBox.y1 > selectedBox.y2) {
        var previousY1 = selectedBox.y1;
          selectedBox.y1 = selectedBox.y2;
          selectedBox.y2 = previousY1;
        }
      }
      clickedArea = {box: -1, pos:'o'};
      tmpBox = null;
      mousedown = false;
      console.log(boxes);
    };
    document.getElementById("panel").onmouseout = function(e) {
        if (clickedArea.box != -1) {
        var selectedBox = boxes[clickedArea.box];
        if (selectedBox.x1 > selectedBox.x2) {
        var previousX1 = selectedBox.x1;
          selectedBox.x1 = selectedBox.x2;
          selectedBox.x2 > previousX1;
        }
        if (selectedBox.y1 > selectedBox.y2) {
        var previousY1 = selectedBox.y1;
          selectedBox.y1 = selectedBox.y2;
          selectedBox.y2 > previousY1;
        }
      }
      mousedown = false;
      clickedArea = {box: -1, pos:'o'};
      tmpBox = null;
    };
    document.getElementById("panel").onmousemove = function(e) {
      if (mousedown && clickedArea.box == -1) {
        x2 = e.offsetX;
        y2 = e.offsetY;
        redraw();
      } else if (mousedown && clickedArea.box != -1) {
        x2 = e.offsetX;
        y2 = e.offsetY;
        xOffset = x2 - x1;
        yOffset = y2 - y1;
        x1 = x2;
        y1 = y2;

        if (clickedArea.pos == 'i'  ||
        clickedArea.pos == 'tl' ||
        clickedArea.pos == 'l'  ||
        clickedArea.pos == 'bl') {
          boxes[clickedArea.box].x1 += xOffset;
        }
        if (clickedArea.pos == 'i'  ||
        clickedArea.pos == 'tl' ||
        clickedArea.pos == 't'  ||
        clickedArea.pos == 'tr') {
          boxes[clickedArea.box].y1 += yOffset;
        }
        if (clickedArea.pos == 'i'  ||
        clickedArea.pos == 'tr' ||
        clickedArea.pos == 'r'  ||
        clickedArea.pos == 'br') {
          boxes[clickedArea.box].x2 += xOffset;
        }
        if (clickedArea.pos == 'i'  ||
        clickedArea.pos == 'bl' ||
        clickedArea.pos == 'b'  ||
        clickedArea.pos == 'br') {
          boxes[clickedArea.box].y2 += yOffset;
        }
        redraw();
      }
    }

    function redraw() {
      // canvas.width = canvas.width;
      var context = document.getElementById("panel").getContext('2d');
      context.globalCompositeOperation='destination-over';
      context.clearRect(0, 0, 800, 600);
      context.beginPath();
      for (var i = 0; i < boxes.length; i++) {
        drawBoxOn(boxes[i], context);
      }
      if (clickedArea.box == -1) {
        tmpBox = newBox(x1, y1, x2, y2);
        if (tmpBox != null) {
          drawBoxOn(tmpBox, context);
        }
      }
    }

    function findCurrentArea(x, y) {
      for (var i = 0; i < boxes.length; i++) {
        var box = boxes[i];
        xCenter = box.x1 + (box.x2 - box.x1) / 2;
        yCenter = box.y1 + (box.y2 - box.y1) / 2;
        if (box.x1 - lineOffset <  x && x < box.x1 + lineOffset) {
          if (box.y1 - lineOffset <  y && y < box.y1 + lineOffset) {
        return {box: i, pos:'tl'};
          } else if (box.y2 - lineOffset <  y && y < box.y2 + lineOffset) {
        return {box: i, pos:'bl'};
          } else if (yCenter - lineOffset <  y && y < yCenter + lineOffset) {
        return {box: i, pos:'l'};
          }
        } else if (box.x2 - lineOffset < x && x < box.x2 + lineOffset) {
          if (box.y1 - lineOffset <  y && y < box.y1 + lineOffset) {
        return {box: i, pos:'tr'};
          } else if (box.y2 - lineOffset <  y && y < box.y2 + lineOffset) {
        return {box: i, pos:'br'};
          } else if (yCenter - lineOffset <  y && y < yCenter + lineOffset) {
        return {box: i, pos:'r'};
          }
        } else if (xCenter - lineOffset <  x && x < xCenter + lineOffset) {
          if (box.y1 - lineOffset <  y && y < box.y1 + lineOffset) {
        return {box: i, pos:'t'};
          } else if (box.y2 - lineOffset <  y && y < box.y2 + lineOffset) {
        return {box: i, pos:'b'};
          } else if (box.y1 - lineOffset <  y && y < box.y2 + lineOffset) {
        return {box: i, pos:'i'};
          }
        } else if (box.x1 - lineOffset <  x && x < box.x2 + lineOffset) {
          if (box.y1 - lineOffset <  y && y < box.y2 + lineOffset) {
        return {box: i, pos:'i'};
          }
        }
      }
      return {box: -1, pos:'o'};
    }

    function newBox(x1, y1, x2, y2) {
      boxX1 = x1 < x2 ? x1 : x2;
      boxY1 = y1 < y2 ? y1 : y2;
      boxX2 = x1 > x2 ? x1 : x2;
      boxY2 = y1 > y2 ? y1 : y2;
      if (boxX2 - boxX1 > lineOffset * 2 && boxY2 - boxY1 > lineOffset * 2) {
        return {x1: boxX1,
            y1: boxY1,
            x2: boxX2,
            y2: boxY2,
            lineWidth: 2,
            color: 'red'};
      } else {
        return null;
      }
    }

    function drawBoxOn(box, context) {
      xCenter = box.x1 + (box.x2 - box.x1) / 2;
      yCenter = box.y1 + (box.y2 - box.y1) / 2;

      context.strokeStyle = box.color;
      context.fillStyle = box.color;

      context.rect(box.x1, box.y1, (box.x2 - box.x1), (box.y2 - box.y1));
      context.lineWidth = box.lineWidth;
      context.stroke();

      context.fillRect(box.x1 - anchrSize, box.y1 - anchrSize, 2 * anchrSize, 2 * anchrSize);
      context.fillRect(box.x1 - anchrSize, yCenter - anchrSize, 2 * anchrSize, 2 * anchrSize);
      context.fillRect(box.x1 - anchrSize, box.y2 - anchrSize, 2 * anchrSize, 2 * anchrSize);
      context.fillRect(xCenter - anchrSize, box.y1 - anchrSize, 2 * anchrSize, 2 * anchrSize);
      context.fillRect(xCenter - anchrSize, yCenter - anchrSize, 2 * anchrSize, 2 * anchrSize);
      context.fillRect(xCenter - anchrSize, box.y2 - anchrSize, 2 * anchrSize, 2 * anchrSize);
      context.fillRect(box.x2 - anchrSize, box.y1 - anchrSize, 2 * anchrSize, 2 * anchrSize);
      context.fillRect(box.x2 - anchrSize, yCenter - anchrSize, 2 * anchrSize, 2 * anchrSize);
      context.fillRect(box.x2 - anchrSize, box.y2 - anchrSize, 2 * anchrSize, 2 * anchrSize);
    }

    function el(id){return document.getElementById(id);} // Get elem by ID
    var canvas  = el("panel");
    var context = canvas.getContext("2d");
    var cx=100;

    function readImage() {
        if ( this.files && this.files[0] ) {
        var FR= new FileReader();
        FR.onload = function(e) {
           var img = new Image();
           img.addEventListener("load", function() {
             context.drawImage(img, 0, 0, 400, 233);
           });
           img.src = e.target.result;
        };       
        FR.readAsDataURL( this.files[0] );
        }
    }
    el("fileUpload").addEventListener("change", readImage, false);   


<script>