StageXL GraphicsGradient

Question

使用GraphicsGradient创建的渐变似乎总是产生没有实际渐变的粉红色。我从StageXL / TransitionFunction /example06/example06.dart复制了代码，将TransitionFunction更改为转换。我还稍微修改了舞台，以适应我的计划，并围绕不同的颜色。

我使用的代码如下：

import 'dart:html' as html;
import 'package:stagexl/stagexl.dart';

void main()
{
  //------------------------------------------------------------------
  // Initialize the Display List
   //------------------------------------------------------------------

 Stage stage = new Stage(html.querySelector('#stage'),width: 800, height: 800);

   RenderLoop renderLoop = new RenderLoop();
   renderLoop.addStage(stage);

   //------------------------------------------------------------------
   // Draw a cloud with vectors
   //------------------------------------------------------------------

   var gradient = new GraphicsGradient.linear(230, 0, 370, 200);
   gradient.addColorStop(0, Color.LightBlue);
   gradient.addColorStop(1, Color.DarkBlue);

   Sprite sprite = new Sprite();
   sprite.useHandCursor = true;
   stage.addChild(sprite);

   Shape shape = new Shape();
   shape.pivotX = 278;
   shape.pivotY = 90;
   shape.x = 400;
   shape.y = 300;
   sprite.addChild(shape);

   shape.graphics
     ..beginPath()
     ..moveTo(170, 80)
     ..bezierCurveTo(130, 100, 130, 150, 230, 150)
     ..bezierCurveTo(250, 180, 320, 180, 340, 150)
     ..bezierCurveTo(420, 150, 420, 120, 390, 100)
     ..bezierCurveTo(430, 40, 370, 30, 340, 50)
     ..bezierCurveTo(320, 5, 250, 20, 250, 50)
     ..bezierCurveTo(200, 5, 150, 20, 170, 80)
     ..closePath()
     ..fillGradient(gradient)
     ..strokeColor(Color.Blue, 5);

   //------------------------------------------------------------------
   // Add some animation
   //------------------------------------------------------------------

   Tween tween1 = new Tween(shape, 3.0, Transition.easeInOutBack)
     ..animate.scaleX.to(2.5)
     ..animate.scaleY.to(2.5)
     ..delay = 1.0;

   Tween tween2 = new Tween(shape, 3.0, Transition.easeInOutBack)
     ..animate.scaleX.to(1.0)
     ..animate.scaleY.to(1.0)
     ..delay = 5.0;

   renderLoop.juggler.add(tween1);
   renderLoop.juggler.add(tween2);
 }

如有任何意见或帮助，将不胜感激。

Answer 1

不幸的是，在当前的WebGL版本中，这是对StageXL呈现程序的限制。只有坚实的颜色支持笔画和填充。Canvas2D渲染器只支持图形渐变和模式。您还可以在显示对象上使用applyCache方法，该方法将使用Canvas2D呈现临时纹理，该纹理还将用WebGL呈现器显示正确的结果。

您可以像这样配置呈现器(在创建Stage实例之前这样做)：

// to use the WebGL renderer (default)
StageXL.stageOptions.renderEngine = RenderEngine.WebGL;

// to use the Canvas2D renderer
StageXL.stageOptions.renderEngine = RenderEngine.Canvas2D; 

Answer 2

在进行了有益的评论并尝试了这两种方法之后，我决定沿着applyCache()路由前进，因为我希望保持WebGL的速度。我编写的具有渐变填充的六边形精灵代码如下(其中root3over2是一个全局定义的常量)：

Sprite getSprite(num x, num y, num hexSize) {

var gradient = new GraphicsGradient.linear(x-hexSize, y-hexSize, x + hexSize, y+ hexSize);
gradient.addColorStop(0, Color.BlanchedAlmond);
gradient.addColorStop(1, Color.Coral);

Sprite sprite = new Sprite()
   ..graphics.beginPath()
   ..graphics.moveTo( -1 * hexSize + x, y)
   ..graphics.lineTo(-0.5 * hexSize + x, root3over2 * hexSize  + y)
   ..graphics.lineTo(0.5 * hexSize + x, root3over2 * hexSize + y)
   ..graphics.lineTo(1 * hexSize + x, y)
   ..graphics.lineTo(0.5 * hexSize + x, -root3over2 * hexSize + y)
   ..graphics.lineTo(-0.5 * hexSize + x, -root3over2 * hexSize + y)
   ..graphics.closePath()
   ..graphics.fillGradient(gradient)
   ..graphics.strokeColor(Color.Black,2);

    sprite.applyCache(x - hexSize,y - hexSize, hexSize * 2, hexSize * 2);

    return sprite;
}