单击鼠标时 Dart StageXL 精灵颜色发生变化

Question

我对 StageXL 和 Dart 都比较陌生，我很难通过单击鼠标来更改 Sprite 的颜色。目前我只是引用精灵并调用图形 fillColor() 方法，但没有任何变化。关于如何通过鼠标单击更改单个 Sprite 行的任何想法？

class GameBoard
{
    Stage stage;
    int xPos;
    int yPos;
    var circle;
    var line;

    GameBoard(Stage s)
    {   
        this.stage = s;
        this.xPos = 100;
        this.yPos = 100;
        this.circle = new Sprite();
        this.line = new Sprite();
    }

    Sprite generateDots(int x, int y, int size)
    {
        circle.graphics.circle(x,y,size);
        circle.graphics.fillColor(Color.Black);
        circle.addEventListener(MouseEvent.CLICK, reactCircle);
        return circle;
    }

    Sprite generateHorzLines(int x, int y)
    {
        line.graphics.beginPath();
        line.graphics.moveTo(x, y);
        line.graphics.lineTo(x+100, y);
        line.graphics.closePath();
        line.graphics.strokeColor(Color.Gray);
        line.addEventListener(MouseEvent.CLICK, reactHorzLine);
        return line;
    }
    Sprite generateVertLines(int x, int y)
    {
        line.graphics.beginPath();
        line.graphics.moveTo(x, y);
        line.graphics.lineTo(x, y+100);
        // this.line.graphics.closePath();
        line.graphics.strokeColor(Color.Gray);
        line.addEventListener(MouseEvent.CLICK, reactVertLine);
        return line;
    }

    void generateBoard()
    {
        for(int i = 0; i < 5;i++)
        {   
            for(int j = 0; j< 5;j++)
            {
                //render horizontal lines
                if(j < 4)
                {
                    stage.addChild(generateHorzLines(xPos,yPos));
                }
                //render vertical lines
                if(i<4)
                {
                    stage.addChild(generateVertLines(xPos,yPos));
                }
                //render points
                stage.addChild(generateDots(xPos,yPos,5));
                xPos+=100;
            }
        yPos+=100;
        xPos = 100;
        }
    }

    void reactHorzLine(MouseEvent event)
    {
        line.graphics.fillColor(Color.Red);
    }
    void reactVertLine(MouseEvent event)
    {
        line.graphics.fillColor(Color.Green);
    }
    void reactCircle(MouseEvent event)
    {
        circle.graphics.fillColor(Color.Blue);
    }
}

Answer 1

当前版本的 StageXL (0.12) 在使用 WebGL 渲染器时不支持矢量图形，仅支持 Canvas2D 渲染器。这将随着 WebGL 渲染器也支持矢量图形的下一个版本而改变。同时，您可以选择退出 WebGL 渲染器以使用 Canvas2D 渲染器。

// do this before you construct the Stage
StageXL.stageOptions.renderEngine = RenderEngine.Canvas2D;

顺便说一句。在 StageXL 中使用 Bitmaps/BitmapDatas 将获得最佳性能。它们基于纹理，渲染速度比矢量图形快得多。

单击鼠标时 Dart StageXL 精灵颜色发生变化

Dart StageXL sprite color change on mouse click

dart

sprite

stagexl