неправильного положения при рисовании над холстом - HTML и JAVASCRIPT

Question

У меня есть изображение в холсте рисунка и им установить его, как показывает ниже в коде:

<div class="two40"> 
    <img class = "hidden" src="lungs.PNG"width="100%" height="300" id="lungs"> 
    <canvas height="300px" style="background:transparent; width: 100%; height: 300" id="specialLung"></canvas> 
</div> 


function draw(){     
    var drawing = document.getElementById("specialLung"); 
    var con = drawing.getContext("2d"); 
    var image = document.getElementById("lungs"); 
    con.drawImage(image, 0, 0, drawing.offsetWidth, 300); 

} 

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

холст, если он находится под div. со следующей структурой

<div> 
    <div> 
    !!some code  
    <div> 
    <div> 
    !!Canvas and picture code 
    </div> 
<div> 

Итак, что может быть проблема? что им не хватает! Заранее спасибо

Answer 1

Для начала, вы используете недопустимые значения для CSS height холста, что 300 должен быть 300px.

Даже тогда вы растягиваете холст с помощью css, который не добавляет пиксели в буфер холста. Вы можете проверить это, нарисуя квадрат на холсте с помощью ctx.fillRect(10, 10, 30, 30): вы увидите, что он будет фактически прямоугольником. Вам нужно что-то сделать, чтобы противодействовать этому.

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

parentElement.addEventListener('resize', function(){ canvas.width = parentElement.getBoundingClientRect().width });

На данный момент, ваш холст будет имеют полную ширину родителя с правильным соотношением сторон пикселей, но проблема, которая возникнет, заключается в том, что содержимое вашего холста будет перерисовано, так как изменение width и height холста через переменную элемента javascript приведет к сбросу буфера рисования. Вам не нужно беспокоиться о том, что это значит слишком много, но вам все равно нужно найти способ сохранить это содержимое, если это то, к чему вы стремитесь.

Довольно разумное решение, чтобы создать виртуальный холст

var virtualCanvas = document.createElement('canvas'), 
    virtualCtx = virtualCanvas.getContext('2d'); 
virtualCanvas.height = canvas.height; // or 300 

то перед изменением canvas.width в слушателе изменения размера событий, Вы можете установить ширину virtualCanvas к ширине холста перед изменением размеров, а просто рисовать текущий холст на виртуальном, чтобы сохранить его, с virtualCtx.drawImage(canvas, 0, 0);. Скорее всего, вы не столкнетесь с проблемами с альфа-каналами, так как изменение ширины virtualCanvas также приведет к удалению всего в нем.

На данный момент все, что вам нужно сделать, это прочитать чертежи virtualCanvas до canvas с ctx.drawImage(virtualCanvas, 0, 0);, и вы золотистые!