1 // ==========================================================================
  2 // Project:   The M-Project - Mobile HTML5 Application Framework
  3 // Copyright: (c) 2011 panacoda GmbH. All rights reserved.
  4 // Creator:   dominik
  5 // Date:      28.10.11
  6 // License:   Dual licensed under the MIT or GPL Version 2 licenses.
  7 //            http://github.com/mwaylabs/The-M-Project/blob/master/MIT-LICENSE
  8 //            http://github.com/mwaylabs/The-M-Project/blob/master/GPL-LICENSE
  9 // ==========================================================================
 10 
 11 /**
 12  * @class
 13  *
 14  * This is the prototype of any canvas view. It basically renders a simple canvas
 15  * tag into the DOM. Additionally it offers some wrappers for canvas-based methods,
 16  * but mostly you will just use this view for the first rendering of the canvas
 17  * element and then work on the dom element itself.
 18  *
 19  * @extends M.View
 20  */
 21 M.CanvasView = M.View.extend(
 22 /** @scope M.CanvasView.prototype */ {
 23 
 24     /**
 25      * The type of this object.
 26      *
 27      * @type String
 28      */
 29     type: 'M.CanvasView',
 30 
 31     /**
 32      * This property specifies the recommended events for this type of view.
 33      *
 34      * @type Array
 35      */
 36     recommendedEvents: ['tap'],
 37 
 38     /**
 39      * This method simply renders a canvas view as a html canvas element.
 40      *
 41      * @private
 42      * @returns {String} The image view's styling as html representation.
 43      */
 44     render: function() {
 45         this.html += '<canvas id="' + this.id + '" ></canvas>';
 46 
 47         return this.html;
 48     },
 49 
 50     /**
 51      * Updates the canvas (e.g. with content binding).
 52      *
 53      * @private
 54      */
 55     renderUpdate: function() {
 56         // nothing so far...
 57     },
 58 
 59     /**
 60      * This method returns the canvas' DOM representation.
 61      *
 62      * @returns {Object} The canvas' DOM representation.
 63      */
 64     getCanvas: function() {
 65         return $('#' + this.id).get(0);
 66     },
 67 
 68     /**
 69      * This method returns the canvas' context.
 70      *
 71      * @param {String} type The context tyoe to return.
 72      * @returns {Object} The canvas' context.
 73      */
 74     getContext: function(type) {
 75         return $('#' + this.id).get(0).getContext(type);
 76     },
 77 
 78     /**
 79      * This method sets the canvas' size.
 80      *
 81      * @param {Number} width The width to be applied to the canvas view.
 82      * @param {Number} height The height to be applied to the canvas view.
 83      */
 84     setSize: function(width, height) {
 85         this.setWidth(width);
 86         this.setHeight(height);
 87     },
 88 
 89     /**
 90      * This method sets the canvas' width.
 91      *
 92      * @param {Number} width The width to be applied to the canvas view.
 93      */
 94     setWidth: function(width) {
 95         $('#' + this.id).get(0).width = width;
 96     },
 97 
 98     /**
 99      * This method returns the canvas' width.
100      *
101      * @returns {Number} The canvas' width.
102      */
103     getWidth: function() {
104         return $('#' + this.id).get(0).width;
105     },
106 
107     /**
108      * This method sets the canvas' height.
109      *
110      * @param {Number} height The height to be applied to the canvas view.
111      */
112     setHeight: function(height) {
113         $('#' + this.id).get(0).height = height;
114     },
115 
116     /**
117      * This method returns the canvas' height.
118      *
119      * @returns {Number} The canvas' height.
120      */
121     getHeight: function() {
122         return $('#' + this.id).get(0).height;
123     }
124 
125 });