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