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

有益なコメントと両方のアプローチを試した後、WebGL の速度を維持したいので、applyCache() ルートを下ることにしました。グラデーション塗りつぶしを使用した六角形スプライトのコードは次のようになります (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 に答える