Question

我是famo.us的新手并克隆了开始示例。我要做的是创建一个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);

Answer 1

CanvasSurface允许画布的大小调整：

backgroundCanvas.setSize(surfaceSize, canvasSize);

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

在下面的代码中，等待CanvasSurface部署以获取部署的大小，然后加载图像可能是更好的做法。加载图像后，可以将画布大小设置为加载图像的大小，因此可以使用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>

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

1 个答案: