javascript - 著名的 : can't draw image to CanvasSurface with own size property

Question

我是 famo.us 的新手并克隆了开始示例。我试图做的是创建一个 CanvasSurface，创建一个 Image，将 ImageData 加载到其中，然后 draw() 图像到 Canvas 的上下文中。

奇怪的是，它只在没有定义自定义尺寸时起作用一次。刷新 Firefox 时会加载图像，但看不到。

但是，我想让 Canvas 表现得像具有 css 样式一样:宽度:100%;因此有效地缩放绘制的图像，使其宽度与窗口大小相对应。

如果有人能指出我明显的错误，为什么图像没有渲染到 Canvas 上，我会很高兴。

http://codefamo.us/g/#gist=caeb0ba013ed3f955f33

/*global famous*/
// import dependencies
var Engine = famous.core.Engine;
var Modifier = famous.core.Modifier;
var Transform = famous.core.Transform;
//var ImageSurface = famous.surfaces.ImageSurface;
var CanvasSurface = famous.surfaces.CanvasSurface;
var Surface = famous.core.Surface;

// create the main context
var mainContext = Engine.createContext();



var backgroundCanvas = new CanvasSurface({
    size: [undefined, false]
});

var backgroundContext = backgroundCanvas.getContext('2d');

var imageObj = new Image();
imageObj.src = 'http://upload.wikimedia.org/wikipedia/commons/f/fe/WelteHandnuancierung.jpg';
imageObj.onload = function() {
    console.log("images loaded. has width: " + imageObj.width);
    backgroundContext.drawImage(imageObj, 0, 0);
};

mainContext.add(backgroundCanvas);

Answer 1

CanvasSurface 允许调整 Canvas 的大小:

backgroundCanvas.setSize(surfaceSize, canvasSize);

canvas 元素的大小应与要绘制的图像的大小相同。 CanvasSurface 将负责调整表面大小。

在下面的代码中，等待 CanvasSurface 部署以获得部署大小，然后加载图像可能是更好的做法。图片加载完成后， Canvas 大小可以设置为加载图片的大小，因此可以使用setSize设置 Canvas 的大小。现在您已准备好将图像绘制到 Canvas 的上下文中。

var Engine = famous.core.Engine;
var Modifier = famous.core.Modifier;
var Transform = famous.core.Transform;
//var ImageSurface = famous.surfaces.ImageSurface;
var CanvasSurface = famous.surfaces.CanvasSurface;
var Surface = famous.core.Surface;

// create the main context
var mainContext = Engine.createContext();

var modifier = new Modifier({
  size: [undefined, true]
});

var backgroundCanvas = new CanvasSurface();

mainContext.add(modifier).add(backgroundCanvas);

backgroundCanvas.on('deploy', function() {
  console.log("canvas surface deployed. has size: " + backgroundCanvas.getSize());
  var imageObj = new Image();
  imageObj.src = 'http://upload.wikimedia.org/wikipedia/commons/f/fe/WelteHandnuancierung.jpg';
  imageObj.onload = function() {
    var canvasSize = backgroundCanvas.getSize();
    var imageSize = [imageObj.width, imageObj.height];
    console.log("image loaded. has size: " + imageSize);

    // CanvasSurface.prototype.setSize = function setSize(size, canvasSize)
    backgroundCanvas.setSize(canvasSize, imageSize);

    var backgroundContext = backgroundCanvas.getContext('2d');
    backgroundContext.drawImage(imageObj, 0, 0);
  };
});

<!-- shims for backwards compatibility -->
<script type="text/javascript" src="http://code.famo.us/lib/functionPrototypeBind.js"></script>
<script type="text/javascript" src="http://code.famo.us/lib/classList.js"></script>
<script type="text/javascript" src="http://code.famo.us/lib/requestAnimationFrame.js"></script>

<!-- famous -->
<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.5/famous.css" />
<script type="text/javascript" src="http://code.famo.us/famous/0.3.5/famous-global.min.js"></script>