著名：无法使用自己的 size 属性将图像绘制到 CanvasSurface答案

【问题标题】：famous: can't draw image to CanvasSurface with own size property著名：无法使用自己的 size 属性将图像绘制到 CanvasSurface
【发布时间】：2015-05-13 01:12:45
【问题描述】：

我是 famo.us 的新手，并克隆了 start 示例。我想要做的是创建一个CanvasSurface，创建一个Image，将ImageData 加载到其中，然后将draw() 和Image 放到画布的上下文中。

奇怪的是，当不定义自定义尺寸时，它只工作一次。刷新 Firefox 时，图像已加载，但看不到。

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

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

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

【问题讨论】：

这里要记住的是，您必须像没有famo.us 一样处理canvas 元素。将图像绘制到画布时，时间和画布大小很重要。希望我的回答能澄清一点。此外，在调整 famo.us 时没有有效值 false。我更改为使用修饰符来调整 CanvasSurface 的大小，以表明您如何设置大小无关紧要。

标签： javascript css canvas famo.us

【解决方案1】：

CanvasSurface 允许调整画布的大小：

backgroundCanvas.setSize(surfaceSize, canvasSize);

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

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

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>

【讨论】：