Question

我刚刚搬到Famo.us并认为它有一些惊人的潜力。我正在尝试使用Famo.us构建一个新的应用程序，并且正在进行“分层”＃39;视图，其中一个内部有CanvasSurface。

我的问题是如何填充CanvasSurface？我检查了文档，当他们谈论一些参数选项时，他们没有告诉你如何。

我有一个视图，在其中我添加了一个布局，然后将Surface添加到该布局。其他具有ImageSurfaces功能的视图效果很好 - 但我不知道我是否在使用CanvasSurface进入正确的轨道。

到目前为止，我有:(在BackgroundView.js文件中的一部分）

function BackgroundView() {
    View.apply(this, arguments);
    _createLayout.call(this);
    _createBody.call(this);
    _setListeners.call(this);
}
function _createBody() {
  this.bodySurface = new CanvasSurface({
    canvasSize : [undefined, undefined]
  });
  var bodyContext= this.bodySurface.getContext('2d');
  bodyContext.fillText("Text on Canvas", 100, 100);
  this.layout.content.add(this.bodySurface);
}

它运行时没有错误，但没有显示任何内容。 CanvasSurface被渲染...... 有没有使用CanvasSurface的例子或有没有人有任何想法？

再次感谢您的帮助。

：）

Answer 1

我在代码中添加了一些内容。定义原型和prototype.constructor，以及将CanvasSurface添加到BackgroundView。我发现canvasSize当前不支持像Surface这样的未定义大小属性。您需要明确并使用像素大小。

看看我对你的代码做了什么..希望这有帮助..

var Engine          = require('famous/core/Engine');
var Surface         = require('famous/core/Surface');
var View            = require('famous/core/View');

var CanvasSurface   = require('famous/surfaces/CanvasSurface');

var context = Engine.createContext();

function BackgroundView() {
    View.apply(this, arguments);
    // _createLayout.call(this);
    _createBody.call(this);
    // _setListeners.call(this);
}

BackgroundView.prototype = Object.create(View.prototype);
BackgroundView.prototype.constructor = BackgroundView;

function _createBody() {
    this.bodySurface = new CanvasSurface({
        size:[400,200]
    });
    var bodyContext= this.bodySurface.getContext('2d');
    bodyContext.font="20px Georgia";
    bodyContext.fillText("Hello World!",50,50);
    this.add(this.bodySurface);
}

var bg = new BackgroundView();

context.add(bg);

Famo.us - 如何向CanvasSurface添加内容

1 个答案: