加载并居中未知尺寸的图像，保持纵横比和填充

Question

I'm trying to directly center an image that's dynamically added to the canvas via KonvasJS.

Here's the fiddle:

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

I already have the code figured out, but it's not using Konva, it's an attempt of doing this without the library, and it works perfectly.

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;
}

I'm just not sure how to convert that to here:

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

How do I do this?

Answer 1

The technique is same as with plain JS. Use the onload event for a JS image to decide what you want to display and what size etc. Once all that is done the job of centering is a very standard piece of rectangle logic. See the centreRectShape() function below.

EDIT: added more dynamic image sizing to enrich the snippet.

EDIT: Changed image source as prior was moved.

 // 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 off 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://via.placeholder.com/600x280/0000FF/FFFFFF.png?text=Wombats are awsome';

 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>