Passen Sie ein Bild in ein Rechteck in StaffeleiJS

Question

Ich bin neu in Staffelei und ich habe versucht, ein Bild in ein Rechteck zu passen. Ich kann die x, y aber nicht die Breite und Höhe einstellen. Was ist der richtige Ansatz?

var stage = new createjs.Stage("canvas"); 
    var layoutWidth = 0.8 * stage.canvas.width; 
    var layoutHeight = 0.6 * stage.canvas.height; 
    var layoutRect = new createjs.Shape(); 
    layoutRect.graphics.beginStroke("black").drawRect((stage.canvas.width - layoutWidth)/2, (stage.canvas.height - layoutHeight)/2, layoutWidth, layoutHeight); 
    var imageContainer = new createjs.Shape(); 
    imageContainer.graphics.beginStroke("black").drawRect((stage.canvas.width - layoutWidth)/2 + (layoutWidth - 0.25 * layoutWidth)/2, (stage.canvas.height - layoutHeight)/2 + 0.1 * layoutHeight, 0.25 * layoutWidth, 0.25 * layoutWidth); 
    var image = new createjs.Bitmap("pizza.jpg"); 
    image.x = (stage.canvas.width - layoutWidth)/2 + (layoutWidth - 0.25 * layoutWidth)/2; 
    image.y = (stage.canvas.height - layoutHeight)/2 + 0.1 * layoutHeight; 
    stage.addChild(layoutRect, imageContainer, image); 
    stage.update(); 

Ich möchte das Bild in Bildcontainer platzieren.

Answer 1

Erstens, um das Bild in ein Rechteck zu passen, müssen Sie die Breite und Höhe des Bildes erhalten, aber Sie können das nicht direkt tun, wenn das Bild nicht geladen ist. Sie können das Bildobjekt manuell erstellen und es dann als ersten Parameter von createjs.Bitmap verwenden.

Auf diese Weise können Sie bereits die Größe des Bildes ändern. Dieses Beispiel aktualisiert in den Kommentaren in @Lanny Geige zu stützen, statt imageobj Größe zu aktualisieren, ich bin Einstellung der Skala von image als scale, und ich habe das Bild in den Mittelpunkt des Bildes Container. Ich war mit EaselJS nicht so vertraut, also habe ich nicht versucht, die Bildskala vorher zu aktualisieren.

var containerX = (stage.canvas.width - layoutWidth)/2, 
    containerY = (stage.canvas.height - layoutHeight)/2; 

var image, 
    imageobj = new Image; 

imageobj.onload = function() { 
    var containerBounds = imageContainer.getTransformedBounds(); 

    var xratio = layoutWidth/this.width, 
     yratio = layoutHeight/this.height; 

    var scale = Math.min(xratio, yratio); 

    image = new createjs.Bitmap(imageobj); 
    image.scaleX = 
    image.scaleY = scale; 
    image.x = containerX + ((imageobj.width/2) * scale); 
    image.y = containerY + ((imageobj.height/2) * scale); 
}; 

imageobj.src = "pizza.jpg";