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