Загрузите и отцентрируйте изображение неизвестных размеров, сохраняя соотношение сторон и отступы. - PullRequest
Новая
       11

Загрузите и отцентрируйте изображение неизвестных размеров, сохраняя соотношение сторон и отступы.

0 голосов
/ 12 октября 2018

Я пытаюсь центрировать изображение, которое динамически добавляется на холст через KonvasJS.

Вот скрипка:

http://jsfiddle.net/71Lw0bk8/7/

У меня уже естькод разобрался, но он не использует Konva, это попытка сделать это без библиотеки, и она отлично работает. 

function addImage(imgUrl) {

    const img = new Image();

    img.onload = function () {
        var padding = 20;
        while (img.width + padding > canvas.width || img.height + padding > canvas.height) {
            if (img.width + padding > canvas.width) {
                let newWidth = canvas.width - (padding * 2);
                img.height = Math.round((img.height / img.width) * newWidth);
                img.width = newWidth;
            }
            else if (img.height + padding > canvas.height) {
                let newHeight = canvas.height - (padding * 2);
                img.width = Math.round((img.width / img.height) * newHeight);
                img.height = newHeight;
            }
        }
        ctx.drawImage(img, canvas.width / 2 - img.width / 2, canvas.height / 2 - img.height / 2, img.width, img.height);
    };
    img.src = imgUrl;
}

Я просто не уверен, как преобразовать это здесь: 

var uploadedImage = new Konva.Image({
    x: stage.getWidth() / 2,
    y: stage.getHeight() / 2,
    width: 200,
    height: 200,
    ...

Как мне это сделать?

1 Ответ

0 голосов
/ 12 октября 2018

Техника такая же, как с простым JS.Используйте событие onload для изображения JS, чтобы решить, что вы хотите отобразить, какой размер и т. Д. После того, как все, что сделано, работа по центрированию является очень стандартной частью прямоугольной логики.См. Функцию centreRectShape () ниже.

РЕДАКТИРОВАТЬ: добавлены более динамические размеры изображения для обогащения фрагмента. 

// the x,y position of a rect shape is in fact the top left corner, so to 
// correcty centre we should consider width and height in the mix.
// Konva.Rect and Konva.Image shapes both have x, y being topleft. 
function centreRectShape(shape){
  shape.x( ( stage.getWidth() - shape.getWidth() ) / 2);
  shape.y( ( stage.getHeight() - shape.getHeight() ) / 2);
}

// Set up the stage
var stage = new Konva.Stage({
  container: 'canvas-container',
  width: 650,
  height: 300
});

// We draw on layers so create one
var layer = new Konva.Layer();
stage.add(layer);

var bgRect = new Konva.Rect({width: stage.getWidth(), height: stage.getHeight(), fill: 'gold', opacity: 0.1});
layer.add(bgRect);

// we will be uploading an image so make somewhere for it to be displayed later
var uploadedImage = new Konva.Image({
    x: stage.getWidth() / 2,
    y: stage.getHeight() / 2,
    width: 200, 
    height: 200,
    stroke: 'red',
    strokeWidth: 10,
    draggable: false
});

// Always have to add shapes to a layer.
layer.add(uploadedImage);

// use a standard plain old JS image to do the pull of the image from src
imgObj = new Image();

// we harness the onload event to know when to update the canvas image
imgObj.onload = function() {

  uploadedImage.image(imgObj);  // give the image to the cannvas image object.
  
  // since this is a dynamic image upload we want to resize the canvas image object to get 
  // a pleasing effect.
  var padding = 20;
  var w = imgObj.width;  
  var h = imgObj.height;
  
  // get the aperture we need to fit by taking padding of the stage size.
  var targetW = stage.getWidth() - (2 * padding);
  var targetH = stage.getHeight() - (2 * padding);

  // compute the ratios of image dimensions to aperture dimensions 
  var widthFit =  targetW / w;
  var heightFit = targetH / h;
  
  // compute a scale for best fit and apply it
  var scale = (widthFit > heightFit) ? heightFit : widthFit  ;
    
  w = parseInt(w * scale, 10);
  h = parseInt(h * scale, 10);
  
  uploadedImage.size({
    width: w,
    height: h
  });
   
  // Finally position the canvas image object centered.
  centreRectShape(uploadedImage); 
  
  layer.draw(); // My favourite thing to forget.
}

// to start the image load give the object a new src.
imgObj.src = 'https://craftblock.me/koa/fb-upload-clone/images/avatar.png';
html, * {
  margin: 0;
  padding: 0;
}

body {
  background: #eee;
}

#canvas-container {
  background: #fff;
  border-radius: 3px;
  border: 1px solid #d8d8d8;
  width: 650px;
  margin: 0 auto;
  margin-top: 20px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, .2);
}

.stickers {
  padding: 10px 5px;
}

.stickers > img {
  margin-right: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.4.1/konva.min.js"></script>

<div id="canvas-container"></div>
...