Нарисуйте ограничивающий прямоугольник над изображением, присутствующим внутри модального - PullRequest
Новая
       12

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

0 голосов
/ 21 апреля 2020

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

Я пробовал следующее код для рисования ограничивающего прямоугольника над изображением.

Html: (код модального окна, отображающего изображение) 

<div id="myModal" class="modal">

 <!-- The Close Button -->
 <span class="close">&times;</span>

 <!-- Modal Content (The Image) -->
 <div id="imagearea" class="imagearea">
 <img class="modal-content" id="img01">
 </div>

</div>

Javascript: (логика c что я пытался нарисовать ограничивающий прямоугольник над изображением) 

 initDraw(document.getElementById('imgarea'));

function initDraw(imgarea) {
    var mouse = {
        x: 0,
        y: 0,
        startX: 0,
        startY: 0
    };
    function setMousePosition(e) {
        var ev = e || window.event; //Moz || IE
        if (ev.pageX) { //Moz
            mouse.x = ev.pageX + window.pageXOffset;
            mouse.y = ev.pageY + window.pageYOffset;
        } else if (ev.clientX) { //IE
            mouse.x = ev.clientX + document.body.scrollLeft;
            mouse.y = ev.clientY + document.body.scrollTop;
        }
    };

    var element = null;
    imgarea.onmousemove = function (e) {
        setMousePosition(e);
        if (element !== null) {
            element.style.width = Math.abs(mouse.x - mouse.startX) + 'px';
            element.style.height = Math.abs(mouse.y - mouse.startY) + 'px';
            element.style.left = (mouse.x - mouse.startX < 0) ? mouse.x + 'px' : mouse.startX + 'px';
            element.style.top = (mouse.y - mouse.startY < 0) ? mouse.y + 'px' : mouse.startY + 'px';
        }
    }

    imagearea.onmouseup = function (e) {
        if (element !== null) {
            element = null;
            imagearea.style.cursor = "default";
            console.log("finsihed.");
        } }
        imagearea.onmousedown = function (e) {
          if(element==null){
            console.log("begun.");
            mouse.startX = mouse.x;
            mouse.startY = mouse.y;
            element = document.createElement('div');
            element.className = 'rectangle'
            element.style.left = mouse.x + 'px';
            element.style.top = mouse.y + 'px';
            imagearea.appendChild(element)
            imagearea.style.cursor = "crosshair";
            e.preventDefault();
          }
        }
      }

css: (для ограничивающего прямоугольника) 

 .rectangle {
      border: 10px solid red;
      position: absolute;
  }
  .imagearea {
     display: flex;
     flex-direction: column;
     float: left;
     width: 35%;
     max-width: 700px;
     position: relative;
    }
    #img01{
     position: absolute;
     }

Приведенный выше код отображает изображение в модальном и когда Я пытаюсь нарисовать ограничивающий прямоугольник на изображении, курсор меняется на перекрестие, как и ожидалось, но я не мог видеть ограничивающий прямоугольник, когда рисую его поверх изображения Просто курсор меняется, но прямоугольник (ограничивающий прямоугольник), который я рисую поверх изображения, не виден.

Может кто-нибудь помочь мне с этим. Спасибо

1 Ответ

0 голосов
/ 21 апреля 2020

Есть две проблемы.

  1. Вы не можете добавить детей к <img>.

  2. Ваши расчеты основаны на области просмотра в то время как границы CSS относятся к изображению. Есть несколько способов исправить это, самый быстрый из них - вычесть положение изображения из положения мыши, например: 

function setMousePosition(e) {
    // your mouse calculations

    const boundaries = e.currentTarget.getBoundingClientRect();

    mouse.x -= boundaries.left;
    mouse.y -= boundaries.top;
}

Кроме того, убедитесь, что вы используете setMousePosition() в ваш mousedown обработчик.

...