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