Question

我添加了37个形状，这是添加mousedown和mouseover事件处理程序的正确方法。这37个形状的性能并不慢，但随着100个形状的增加而增加。

for(var i = 1;i<37;i++)
{
    Independent_Bet_Shape = new createjs.Shape()
    Independent_Bet_Shape.graphics.beginFill("#FFFFFF").drawRect(0,0,Independent_Bet_Width,Independent_Bet_Height);
    Independent_Bet_Shape.alpha=0.8
    Independent_Bet_Shape.cache(0,0,Independent_Bet_Width,Independent_Bet_Height)

    Independent_Bet_Container.name = "Bet_Container"+i
Independent_Bet_Container.addChild(Independent_Bet_Shape)   
    s_oStage.addChild(Independent_Bet_Container)
    if(i%3 == 0) //Splitting them in column for every 3 bets from bottom to top.
    {               
        Current_Bet_X = Current_Bet_X+Independent_Bet_Width+0.1
        Current_Bet_Y = Start_Bet_Y                     
        for(var j = 0;j<3;j++)
        {
            Independent_Column_Bets_Array[columnCount][j] = j + (last_J + 1) 
        }       
        columnCount +=1     
        last_J = j * columnCount            
    }
}

for(var i = 1;i<37;i++)
{
    Selection_Bet_Container = new createjs.Container();
    Selection_Bet_Container.x = 5//-700
    Selection_Bet_Container.y = 5//-210

    Selection_Bets_Array.push(Selection_Bet_Container)
    Independent_Bets_Array[i].addChild(Selection_Bet_Container)
    Selection_Bet_Container.cache(0,0,Independent_Bet_Width,Independent_Bet_Height)
    Independent_Chips_Array.push(Selection_Bet_Container)
}
for(var i = 1;i<37;i++)
{
    Independent_Bets_Array[i].on("mousedown", Independent_TableBetFun);
    Independent_Bets_Array[i].cursor='pointer'

}

Answer 1

以下是快速概述：

舞台必须重绘每一帧的所有内容。
每帧绘制的内容越多，它就越慢。
图形和文字不硬件加速。这意味着您只能使用CPU渲染，这比绘制位图要慢得多。

你可以做很多事情来获得更好的表现：

缓存形状。通过缓存它们，可以使用GPU渲染它们，这要快得多。很多缓存并不理想，但仍然比堆积图形更快。请参阅cache demo。
对不会更改的内容进行分组，并将其缓存。如果您要在舞台上添加不会更改的内容，或者作为一个组进行更改，那么缓存将提供巨大的性能优势。我们在绘制演示时使用了这种方法，它只为舞台绘制了新的内容，并没有清除舞台。

查看以下示例：

通常，粒子系统和其他高性能内容将使用位图，甚至是SpriteSheets，它们可以让您通过一个图像显示一堆不同的元素，这将为您带来巨大的性能优势。

如果你能够移动到位图或缓存的内容，check out StageGL，它支持大多数事情（像掩码这样的东西将不起作用 - 因为它们使用向量）。

干杯，

添加更多形状会减慢createjs中的FPS吗？

1 个答案: