Я играю с проектом, чтобы узнать больше о node.js & html холстах.
В моем проекте у меня есть холст, для которого я хочу сохранить фиксированный размер растрового изображения, но заполнить его содержанием. div, сохраняя соотношение сторон.
Я применил размер 500x500 к своему элементу canvas, а затем применил следующий стиль в CSS.
canvas {
display: block;
width:100%;
height:100%;
object-fit: contain;
background-color: lightgrey;
}
Внутри javascript Сначала залейте холст белым, чтобы я получил что-то похожее на приведенное ниже, пока что все хорошо.
Я подключаюсь к событиям мыши и использую их для рисования линий. Я использую приведенную ниже функцию для правильного масштабирования событий на холсте.
function getMousePos(evt) {
var rect = canvas.getBoundingClientRect(); // abs. size of element
var raw_x = evt.clientX||evt.touches[0].clientX;
var raw_y = evt.clientY||evt.touches[0].clientY;
var min_dimension = Math.min(rect.width,rect.height);
var x_offset = 0.5*(rect.width-min_dimension);
var y_offset = 0.5*(rect.height-min_dimension);
return {
x: ((raw_x - rect.left - x_offset) / min_dimension) * canvas.width,
y: ((raw_y - rect.top - y_offset) / min_dimension) * canvas.height
}
}
Это работает, однако при рисовании на холсте, когда мышь перемещается по полосе на правой стороне изображения, оно не обновляется. пока мышь не покинет полосу. Полоса имеет такой же размер, как пространство слева от холста, поэтому я думаю, что это связано, но я не знаю, как исследовать. У меня нет проблем, если я изменяю размер окна до тех пор, пока не останется места по обе стороны от растрового изображения холста (и производительность будет значительно выше). Приведенный ниже рисунок должен прояснить ситуацию.
Есть ли у кого-нибудь предложение о том, что может быть причиной этого, или лучший способ для меня достичь тот же эффект.
Примечание: я работаю chrome версия 80.0.3987.149