konva js сохраняет соотношение изображения при загрузке

Question

Есть ли способ сохранить пропорции изображения, когда я загружаю изображение в konva.js. По сути, я использую konva с расширением Vue, и мне нужен такой метод, как загрузка фонового изображения, я установил размер холста в зависимости от пользовательского устройства и могу сделать размер загружаемого изображения таким же, но он не будет сохранен. это пропорция. Один способ, я думаю, я могу сделать это, написав функцию для определения максимальной высоты или ширины (выберите, что больше подходит в конкретном случае), которого может достичь изображение, и затем пропорционально измените его размер, но я не вижу этот ответ элегантным и свободным от жуков, поэтому я подумал, что спрошу, прежде чем делать это.

Answer 1

Вам нужно будет справиться с масштабированием изображения самостоятельно, но это не сложно.

Как вы уже определили, вам нужна функция, чтобы установить масштаб изображения, чтобы покрыть область просмотра, сохраняя при этом соотношение сторон.

Математика, необходимая для вычисления соотношения ширины области просмотра и ширины изображения, одинакова для высоты. Затем сравните два соотношения и используйте большее.

Если видовой экран и изображение не имеют одинаковых форматных соотношений, вы увидите, что некоторые изображения обрезаны, как это видно из фрагмента при выборе кнопки 300x500.

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

Эксперимент 1: при запуске несколько раз нажмите кнопку "шире" и посмотрите, как части верхней и нижней части изображения обрезаются за пределами области просмотра.

Эксперимент 2: На старте несколько раз нажмите "уже" и наблюдайте аналогичный эффект.

/*
function to caluclate and return appropriate scale to fill one rect with another whilst preserving aspect ratio
*/
var autoScale = function(container, imgEle){

var rW = container.width() / imgEle.width;
var rH = container.height() / imgEle.height;

var scale = (rW < rH ? rH : rW);
return {x: scale, y: scale};
}

// from here on the code is about making the demo.

var sz = '600x600';
var miniMag = 0.3333

// Set up the canvas / stage
var div = $('#container');

var stage = new Konva.Stage({container: 'container', width: div.width(), height: div.height()});
var layer = new Konva.Layer({draggable: false});
stage.add(layer)
stage.scale({x: miniMag, y: miniMag});
var pic = new Konva.Image({ x: 300, y: 300});
layer.add(pic);
var rect = new Konva.Rect({x: 300, y: 300, width : div.width(), height: div.height(), stroke: 'magenta'})
layer.add(rect)
stage.draw()

// load an image
var imageObj = new Image();
imageObj.onload = function(){

  pic.image(imageObj);  
  pic.scale(autoScale(rect, imageObj));
  pic.x(rect.x() + ((rect.width() -  (pic.width() * pic.scaleX()) )/2)) 
  pic.y(rect.y() + ((rect.height() -  (pic.height() * pic.scaleY()) )/2)) 
  layer.draw();

}

// if we click a change-size button then change the viewport indicator
$('#narrower').data('change', {x:-10, y:   0});
$('#wider').data('change',  {x: 10, y:   0});
$('#shorter').data('change', {x:  0, y: -10});
$('#taller').data('change',  {x:  0, y:  10});
$('.btn').on('click', function(e){

  var diff = $(this).data('change');  
  rect.width(rect.width() + diff.x)
  rect.height(rect.height() + diff.y)
  pic.scale(autoScale(rect, imageObj));
  pic.x(rect.x() + ((rect.width() -  (pic.width() * pic.scaleX()) )/2)) 
  pic.y(rect.y() + ((rect.height() -  (pic.height() * pic.scaleY()) )/2)) 
  layer.draw();

})

// If we click an image selection button change the image
$('.imgsel').on('click', function(e){

imageObj.src = "https://via.placeholder.com/" + $(this).attr('sz');

})

// Kick off with a 600 x 600 image
$('.imgsel600').trigger('click');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.5.1/konva.min.js"></script>
<div>
<button id='narrower' class='btn'>Narrower</button>
<button id='wider' class='btn'>Wider</button>
<button id='shorter' class='btn'>Shorter</button>
<button id='taller' class='btn'>Taller</button>
<button class='imgsel' sz='300x300'>300 x 300</button>
<button class='imgsel' sz='300x500'>300 x 500</button>
<button class='imgsel' sz='500x300'>500 x 300</button>
<button class='imgsel imgsel600' sz='600x600'>600 x 600</button>
</div>
<div id='container' style="position: absolute; z-index: -1; display: inline-block; left: 0px; top: 0px; width: 300px; height: 300px; background-color: silver;"></div>