1 
  2 /**
  3  * @class DOM+CSS3渲染器。将可视对象以DOM元素方式渲染出来。
  4  * @augments Renderer
  5  * @param {Object} properties 创建对象的属性参数。可包含此类所有可写属性。
  6  * @module hilo/renderer/DOMRenderer
  7  * @requires hilo/core/Class
  8  * @requires hilo/core/Hilo
  9  * @requires hilo/renderer/Renderer
 10  */
 11 var DOMRenderer = (function(){
 12 
 13 return Class.create({
 14     Extends: Renderer,
 15     constructor: function DOMRenderer(properties){
 16         DOMRenderer.superclass.constructor.call(this, properties);
 17     },
 18 
 19     /**
 20      * @private
 21      * @see Renderer#startDraw
 22      */
 23     startDraw: function(target){
 24         if(target.visible && target.alpha > 0){
 25             //prepare drawable
 26             var drawable = (target.drawable = target.drawable || new Drawable());
 27             drawable.domElement = drawable.domElement || createDOMDrawable(target, drawable);
 28             return true;
 29         }
 30         return false;
 31     },
 32 
 33     /**
 34      * @private
 35      * @see Renderer#draw
 36      */
 37     draw: function(target){
 38         var parent = target.parent,
 39             targetElem = target.drawable.domElement,
 40             currentParent = targetElem.parentNode;
 41 
 42         if(parent){
 43             var parentElem = parent.drawable.domElement;
 44             if(parentElem != currentParent){
 45                 parentElem.appendChild(targetElem);
 46             }
 47         }else if(target === stage && !currentParent){
 48             this.canvas.appendChild(targetElem);
 49         }
 50     },
 51 
 52     /**
 53      * @private
 54      * @see Renderer#transform
 55      */
 56     transform: function(target){
 57         Hilo.setElementStyleByView(target);
 58     },
 59 
 60     /**
 61      * @private
 62      * @see Renderer#remove
 63      */
 64     remove: function(target){
 65         var targetElem = target.drawable.domElement,
 66             parentElem = targetElem.parentNode;
 67 
 68         if(parentElem) parentElem.removeChild(targetElem);
 69     },
 70 
 71     /**
 72      * @private
 73      * @see Renderer#hide
 74      */
 75     hide: function(target){
 76         var elem = target.drawable && target.drawable.domElement;
 77         if(elem) elem.style.display = "none";
 78     }
 79 });
 80 
 81 /**
 82  * 创建一个可渲染的DOM，可指定tagName，如canvas或div。
 83  * @param {Object} view 一个可视对象或类似的对象。
 84  * @param {Object} imageObj 指定渲染的image及相关设置，如绘制区域rect。
 85  * @return {HTMLElement} 新创建的DOM对象。
 86  * @private
 87  */
 88 function createDOMDrawable(view, imageObj){
 89     var tag = view.tagName || "div",
 90         img = imageObj.image,
 91         w = view.width || (img && img.width),
 92         h =  view.height || (img && img.height),
 93         elem = Hilo.createElement(tag), style = elem.style;
 94 
 95     if(view.id) elem.id = view.id;
 96     style.position = "absolute";
 97     style.left = (view.left || 0) + "px";
 98     style.top = (view.top || 0) + "px";
 99     style.width = w + "px";
100     style.height = h + "px";
101 
102     if(tag == "canvas"){
103         elem.width = w;
104         elem.height = h;
105         if(img){
106             var ctx = elem.getContext("2d");
107             var rect = imageObj.rect || [0, 0, w, h];       
108             ctx.drawImage(img, rect[0], rect[1], rect[2], rect[3], 
109                          (view.x || 0), (view.y || 0), 
110                          (view.width || rect[2]), 
111                          (view.height || rect[3]));
112         }
113     }else{
114         style.opacity = view.alpha != undefined ? view.alpha : 1;
115         if(view === stage || view.clipChildren) style.overflow = "hidden";
116         if(img && img.src){
117             style.backgroundImage = "url(" + img.src + ")";
118             var bgX = view.rectX || 0, bgY = view.rectY || 0;
119             style.backgroundPosition = (-bgX) + "px " + (-bgY) + "px";
120         }
121     }
122     return elem;
123 }
124 
125 })();