1 /**
  2  * Hilo
  3  * Copyright 2015 alibaba.com
  4  * Licensed under the MIT License
  5  */
  6 
  7 /**
  8  * <iframe src='../../../examples/DOMElement.html?noHeader' width = '330' height = '250' scrolling='no'></iframe>
  9  * <br/>
 10  * 使用示例:
 11  * <pre>
 12  * var domView = new Hilo.DOMElement({
 13  *     element: Hilo.createElement('div', {
 14  *         style: {
 15  *             backgroundColor: '#004eff',
 16  *             position: 'absolute'
 17  *         }
 18  *     }),
 19  *     width: 100,
 20  *     height: 100,
 21  *     x: 50,
 22  *     y: 70
 23  * }).addTo(stage);
 24  * </pre>
 25  * @name DOMElement
 26  * @class DOMElement是dom元素的包装。
 27  * @augments View
 28  * @param {Object} properties 创建对象的属性参数。可包含此类所有可写属性。特殊属性有:
 29  * <ul>
 30  * <li><b>element</b> - 要包装的dom元素。必需。</li>
 31  * </ul>
 32  * @module hilo/view/DOMElement
 33  * @requires hilo/core/Hilo
 34  * @requires hilo/core/Class
 35  * @requires hilo/view/View
 36  * @requires hilo/view/Drawable
 37  */
 38 var DOMElement = Class.create(/** @lends DOMElement.prototype */{
 39     Extends: View,
 40     constructor: function(properties){
 41         properties = properties || {};
 42         this.id = this.id || properties.id || Hilo.getUid("DOMElement");
 43         DOMElement.superclass.constructor.call(this, properties);
 44 
 45         this.drawable = new Drawable();
 46         var elem = this.drawable.domElement = properties.element || Hilo.createElement('div');
 47         elem.id = this.id;
 48     },
 49 
 50     /**
 51      * 覆盖渲染方法。
 52      * @private
 53      */
 54     _render: function(renderer, delta){
 55         if(!this.onUpdate || this.onUpdate(delta) !== false){
 56             renderer.transform(this);
 57             if(this.visible && this.alpha > 0){
 58                 this.render(renderer, delta);
 59             }
 60         }
 61     },
 62 
 63     /**
 64      * 覆盖渲染方法。
 65      * @private
 66      */
 67     render: function(renderer, delta){
 68         var canvas = renderer.canvas;
 69         if(canvas.getContext){
 70             var elem = this.drawable.domElement, depth = this.depth,
 71                 nextElement = canvas.nextSibling, nextDepth;
 72             if(elem.parentNode) return;
 73 
 74             //draw dom element just after stage canvas
 75             while(nextElement && nextElement.nodeType != 3){
 76                 nextDepth = parseInt(nextElement.style.zIndex) || 0;
 77                 if(nextDepth <= 0 || nextDepth > depth){
 78                     break;
 79                 }
 80                 nextElement = nextElement.nextSibling;
 81             }
 82             canvas.parentNode.insertBefore(this.drawable.domElement, nextElement);
 83         }else{
 84             renderer.draw(this);
 85         }
 86     }
 87 });