1

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

我正在使用的代码是这样的： 

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);
 }

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

4

2 回答 2

1

不幸的是，这是当前 StageXL 版本中 WebGL 渲染器的限制。描边和填充仅支持纯色。只有 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;
于 2016-05-06T09:08:51.867 回答
1

在有用的评论和尝试这两种方法之后，我决定走 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;
}
于 2016-05-06T09:53:19.173 回答