fix: DOMElement display wrong when parent have scale

hiloteam · Jul 16, 2018 · b778071 · b778071
1 parent 5c5fbb9
commit b778071
Showing 1 changed file with 17 additions and 4 deletions.
diff --git a/src/view/DOMElement.js b/src/view/DOMElement.js
@@ -24,7 +24,7 @@
  * }).addTo(stage);
  * </pre>
  * @name DOMElement
- * @class DOMElement is a wrapper of dom element.
+ * @class DOMElement is a wrapper of dom element.（The DOMElement's parent must be stage）
  * @augments View
  * @param {Object} properties create Objects properties. Contains all writable properties in this class. Special properties include:
  * <ul>
@@ -56,7 +56,7 @@
  * }).addTo(stage);
  * </pre>
  * @name DOMElement
- * @class DOMElement是dom元素的包装。
+ * @class DOMElement是dom元素的包装。（ 注意：DOMElement 的父容器必须是 stage ）
  * @augments View
  * @param {Object} properties 创建对象的属性参数。可包含此类所有可写属性。特殊属性有：
  * <ul>
@@ -116,8 +116,21 @@ var DOMElement = Class.create(/** @lends DOMElement.prototype */{
     render: function(renderer, delta){
         if(renderer.renderType !== 'dom'){
             var canvas = renderer.canvas;
+            var stage = this.parent;
+            var domElementContainer = renderer._domElementContainer;
+            if(!renderer._domElementContainer){
+                domElementContainer = renderer._domElementContainer = Hilo.createElement('div', {
+                    style:{
+                        'position':'absolute',
+                        'transform':'scale3d(' + stage.scaleX + ',' + stage.scaleY + ', 1)',
+                        'transformOrigin':'0 0'
+                    }
+                });
+                canvas.parentNode.insertBefore(renderer._domElementContainer, canvas.nextSibling);
+            }
+
             var elem = this.drawable.domElement, depth = this.depth,
-                nextElement = canvas.nextSibling, nextDepth;
+                nextElement = domElementContainer.childNodes[0], nextDepth;
             if(elem.parentNode) return;
 
             //draw dom element just after stage canvas
@@ -128,7 +141,7 @@ var DOMElement = Class.create(/** @lends DOMElement.prototype */{
                 }
                 nextElement = nextElement.nextSibling;
             }
-            canvas.parentNode.insertBefore(this.drawable.domElement, nextElement);
+            domElementContainer.insertBefore(this.drawable.domElement, nextElement);
         }else{
             renderer.draw(this);
         }