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

所以，它的工作正常，但我对画布/图像尺寸有些困难。

如果我没有为画布Html设置任何宽度/高度，则会产生一个 300 * 150画布，但图像未调整大小，因此它只显示一个一小段真实形象。
如果我在画布html中设置宽度和高度（实际尺寸为1700 * 1133），则图像仅显示为842 * 561，并且画布会发生。
我尝试了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;

如果屏幕上有更多元素且总大小大于图像本身，您可以在屏幕上添加容器中的所有内容，然后缩放容器本身以完美地适合画布，如下所示：

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调整位图大小

1 个答案: