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

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

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

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

鼠标单击时Dart StageXL精灵颜色更改

1 个答案: