1

我刚刚搬到 Famo.us，我认为它具有惊人的潜力。我正在尝试使用 Famo.us 构建一个新应用程序，并将拥有“分层”视图，其中一个内部有一个 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 的例子或者有没有人有任何想法？

再次感谢您提前提供的帮助。

:)

4

1 回答 1

2

我在您的代码中添加了几件事。定义原型和原型构造函数，以及将 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);
于 2014-05-23T18:01:48.733 回答