CreateJs Canvas調整位圖大小

Question

我目前正在使用createJS canvas。 我將一個具有預定義大小的圖像放入Json文件，並在“ mouseout”和“ 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設置任何寬度/高度，它將生成300 * 150的畫布，但是圖像的大小沒有調整，因此僅顯示真實圖像的一小部分。
2. 如果我在畫布html中設置寬度和高度（實際大小為1700 * 1133），則圖像僅顯示842 * 561，並且發生了畫布。
3. 我嘗試了在JavaScript中設置DIV寬度和高度的其他解決方案

但沒有任何東西使我能夠正確設置圖像並做出響應，以使矩形的尺寸適應圖像的屏幕尺寸。

Answer 1

為了將畫布動態調整為圖像的確切大小，可以執行以下操作：

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