优化NG重复tilemap的 [英] Optimizing ng-repeat tilemap

问题描述

我创建如瓷砖

的mapeditor Web应用程序

我的NG-重复看起来是这样的：

 ＆LT; D​​IV CLASS =mapContainer不可选择NG-CLASS ={hideBordersFromMapContainer：hideBorders}＆GT;
    ＆LT; D​​IV NG重复=Y在mapDisplayerImages级=tilegroupNG式={'宽度':( y.length * 32）+1＆GT;
        ＆LT; D​​IV
            NG-重复=X的Y
            类=平铺
            NG-鼠标悬停=的onMouseOver（{'Y'：$父$指数，'X'：$指数}）
            ng-mousedown=\"drawOrSelectTile({'y':$parent.$index,'x':$index},true);onMouseDown({'y':$parent.$index,'x':$index});\"
            NG-鼠标松开=onMouseUp（{'Y'：$父$指数，'X'。$指数}）;
            NG-CLASS ={selectedTile：x.active}
        ＆GT;
            ＆LT; D​​IV
                NG-重复=形象x.bi{＃NG-重复底部图​​像＃}
                类=tileImage
                NG-风格={'背景'：图片}
            ＆GT;
            ＆LT; / DIV＆GT;
            ＆LT; D​​IV
                NG-重复=形象x.ti{＃NG-重复上面的图像＃}
                类=tileImage
                NG-风格={'背景'：图片}
            ＆GT;
            ＆LT; / DIV＆GT;
            ＆LT; D​​IV
            类=tileImage
            ＆GT;
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

碰巧使用的地图比 50 50瓦的更大的时候要慢柠渲染和编辑。

这意味着你将有50×50 = 2500 * 2（层）= 5000瓦/ div的。如果有更多的叠加图像底部或顶部的图像以上。

东西我想：

• 更换{{结合}}与NG- *属性


• 使用当前范围变量X或Y变量，而不是的$范围变量mapDisplayerImages [Y]和[Y] [X]

是否有更多的事情我可以做优化mapeditor？

解决方案

您可能需要的东西关于项目集成ReactJS。<​​/ P>

<一个href=\"http://www.williambrownstreet.net/blog/2014/04/faster-angularjs-rendering-angularjs-and-reactjs/\" rel=\"nofollow\">http://www.williambrownstreet.net/blog/2014/04/faster-angularjs-rendering-angularjs-and-reactjs/

I am creating an mapeditor web application like tiled

My ng-repeat looks like this:

<div class="mapContainer unselectable" ng-class="{hideBordersFromMapContainer:hideBorders}">
    <div ng-repeat="y in mapDisplayerImages" class="tilegroup" ng-style="{'width':(y.length * 32)+1}">
        <div 
            ng-repeat="x in y" 
            class="tile" 
            ng-mouseover="onMouseOver({'y':$parent.$index,'x':$index})"
            ng-mousedown="drawOrSelectTile({'y':$parent.$index,'x':$index},true);onMouseDown({'y':$parent.$index,'x':$index});" 
            ng-mouseup="onMouseUp({'y':$parent.$index,'x':$index});"
            ng-class="{selectedTile: x.active}" 
        >
            <div
                ng-repeat="image in x.bi" {# ng-repeat bottom images #}
                class="tileImage"
                ng-style="{'background':image}"
            >
            </div>
            <div
                ng-repeat="image in x.ti" {# ng-repeat top images #}
                class="tileImage"
                ng-style="{'background':image}"
            >
            </div>
            <div
            class="tileImage"
            >
            </div>
        </div>
    </div>
</div>

It happens to be verry slow rendering and editing when using maps bigger than 50 by 50 tiles.

This means you will have 50 x 50 = 2500 * 2(layers) = 5,000 tiles/divs. And more if there are more bottom images or top images stacked.

Things I tried:

• Replacing {{bind}} with ng-* attributes
• Using current scope variables x or y variable instead of the $scope variable mapDisplayerImages[y] and [y][x]

Are there more things I can do to optimize the mapeditor?

解决方案

You might need to thing about integrating ReactJS in your project.

http://www.williambrownstreet.net/blog/2014/04/faster-angularjs-rendering-angularjs-and-reactjs/

这篇关于优化NG重复tilemap的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！