Famo.us - Как добавить контент на CanvasSurface

Question

Я только что переехал в Famo.us и думаю, что у него есть удивительный потенциал. Я пытаюсь создать новое приложение с использованием Famo.us и будет иметь «слоистые» представления, один из которых имеет CanvasSurface внутри.

Мой вопрос о том, как я мог бы заполнить CanvasSurface? Я проверил Документы и, пока они говорят о некоторых параметрах, они не говорят вам, как это сделать.

У меня есть представление, в котором я добавляю макет, а затем поверхность к этому макету. Другие виды, которые имеют 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 в настоящее время не поддерживает атрибут undefined size, такой как 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);