Как нарисовать прямоугольник над изображением - PullRequest
Новая
       11

Как нарисовать прямоугольник над изображением

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

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

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>

Javascript: 

myModal.onload=function(){
var canvas = document.getElementById('img01');
var ctx = canvas.getContext('2d');

//Variables
var canvasx = $(canvas).offset().left;
var canvasy = $(canvas).offset().top;
var last_mousex = last_mousey = 0;
var mousex = mousey = 0;
var mousedown = false;

 //Mousedown
 $(canvas).on('mousedown', function(e) {
 last_mousex = parseInt(e.clientX-canvasx);
 last_mousey = parseInt(e.clientY-canvasy);
 mousedown = true;
 });

 //Mouseup
  $(canvas).on('mouseup', function(e) {
  mousedown = false;
 });

 //Mousemove
 $(canvas).on('mousemove', function(e) {
 mousex = parseInt(e.clientX-canvasx);
 mousey = parseInt(e.clientY-canvasy);
 if(mousedown) {
    ctx.clearRect(0,0,canvas.width,canvas.height); //clear canvas
    ctx.beginPath();
    var width = mousex-last_mousex;
    var height = mousey-last_mousey;
    ctx.rect(last_mousex,last_mousey,width,height);
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 8;
    ctx.stroke();
   }
  });
 }

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

Может кто-нибудь помочь мне с этой проблемой ....

...