鼠标点击Dart StageXL精灵颜色变化

Question

我对StageXL和Dart都比较陌生，我在鼠标点击时很难改变雪碧的颜色。目前，我只是引用sprite并调用图形fillColor()方法，但是没有什么变化。关于如何通过鼠标点击改变个别雪碧线有什么想法吗？

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中使用Bitmap/BitmapDatas将获得最佳性能。他们是基于纹理，这将被渲染得比矢量图形快得多。