Createjs帆布调整位图

Question

我当前正在使用CreateJs Canvas。我在JSON文件中有一个具有预定义大小的图像，该框链接到" MouseOut"one_answers" MouseOver"上的EventListener）。

var stage = new createjs.Stage("testCanvas");
createjs.Touch.enable(stage);
stage.enableMouseOver(10);

图像的位图：

var image = new Image();
image.onload = function () {
  var img = new createjs.Bitmap(event.target);
  stage.addChild(img);

然后我绘制盒子（矩形）：

angular.forEach(..., function(value){
  var rectGreen = new createjs.Shape();
  rectGreen.graphics.beginFill("green")
    .drawRect(
       value.shapeDimension....,
       value.shapeDimension....,
       value.shapeDimension....,
       value.shapeDimension....
     );
     rectGreen.alpha = 0.01;
     stage.addChild(rectGreen);

我的鼠标事件：

rectGreen.addEventListener("mouseover", function (event) {
  var target = event.target;
  target.alpha = 0.35;
  stage.update();
});
rectGreen.addEventListener("mouseout", function (event) {
  var target = event.target;
  target.alpha = 0.01;
  stage.update();
});

所以，它在工作，但是我在画布/图像大小上遇到了一些困难。

1. 如果我不为画布html设置任何宽度/heigth，则会导致300*150画布，但没有调整图像的大小，因此仅显示一个真实图像的轻微。
2. 如果我在画布HTML中设置宽度和高度（实际尺寸为1700*1133），则图像仅出现842*561，并且发生了画布）。
3. 我尝试了使用JavaScript中设置DIV宽度和高度的其他解决方案

在

为了动态地将画布大小调整到图像的确切大小，您可以执行此操作：

//to get a variable reference to the canvas
var canvas = document.getElementById("testCanvas");
//supposing the Bitmap is the variable named 'img'
canvas.width = img.image.width;
canvas.height = img.image.height;

如果您在屏幕上有更多的元素，并且总尺寸大于图像本身，则可以在容器中添加所有内容，然后将容器本身缩放以完美地适合帆布，例如：

var container = new createjs.Container();
container.addChild(img, [your other rectangle elements here]);
stage.addChild(container);
//will downscale or upscale the container to fit the canvas
container.scaleX = container.scaleY = canvas.width / img.image.width;