CreateJs Canvas 调整位图大小

Question

我目前正在使用 createJS canvas。我有一个预定义大小的图像到 Json 文件和 link 到 "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();
});

所以，它工作正常，但我在 canvas/image 大小方面遇到了一些困难。

如果我没有为 canvas Html 设置任何 width/heigth，它会导致 300*150 canvas 但图像未调整大小，因此仅显示真实图像的一小部分。
如果我在 canvas html 中设置宽度和高度，（实际尺寸为 1700*1133），图像仅显示 842*561，并且 canvas 发生） .
我用 Setting DIV width and height in JavaScript

但我无法正确设置我的图像和响应，以便我的矩形大小适应图像的屏幕大小。

Answer 1

为了将 Canvas 动态调整为图像的确切大小，您可以这样做：

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

如果屏幕上有更多元素并且总尺寸大于图像本身，您可以将屏幕上的所有内容添加到容器中，然后缩放容器本身以完美适应 canvas ，像这样：

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;

CreateJs Canvas 调整位图大小

CreateJs Canvas resize Bitmap

javascript

canvas

createjs