Question

我是画架的新手，我试图将图像放入矩形内。我可以设置x，y但不能设置宽度和高度。什么是正确的方法？

    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();

我想将图像放在图像容器中。

Answer 1

首先，要使图像适合矩形，您需要获得图像的宽度和高度，但如果未加载图像，则无法直接执行此操作。

您可以手动创建图像对象，然后将其用作createjs.Bitmap的第一个参数。

通过这种方式，您已经能够调整图像大小。我在评论中更新了基于@Lanny小提琴的示例，而不是更新 imageobj 大小，我将 image 的比例设置为< strong> scale ，我将图像放在图像容器的中心点。我对EaselJS不太熟悉，所以我之前没有尝试更新图像比例。

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

在easelJS中将图像放入矩形内

1 个答案: