CODEWITHSUNDEEP
famo.us
Pandafinity
Pandafinity

Reputation: 713

Famo.us - How to add content to a CanvasSurface

I've just moved to Famo.us and think it has some amazing potential. I am trying to build a new App using Famo.us and will be having 'layered' Views, one of which has a CanvasSurface inside.

My question is about how I would populate the CanvasSurface? I have checked the Docs and while they talk about some of the parameter options they do not tell you how.

I have a View within which I add a Layout and then a Surface to that Layout. Other Views that have ImageSurfaces work fine - but I do not know if I am on the right track with CanvasSurface.

So far I have: (part of inside a BackgroundView.js file)

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

It runs with no errors, but shows nothing. The CanvasSurface is rendered... Are there any examples using CanvasSurface or does anyone have any thoughts?

Thanks again for your help in advance.

:)

Upvotes: 1

Views: 427

Answers (1)

johntraver
johntraver

Reputation: 3612

There are a couple of things I added to your code.. Defining the prototype and prototype.constructor, as well as adding the CanvasSurface to the BackgroundView. I found that canvasSize does not currently support the undefined size attribute like Surface does. You need to be explicit and use pixel size.

Check out what I did to your code.. Hope this helps..

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

Upvotes: 2

Related Questions