1

KineticJS Rectオブジェクトがインスタンス化された後、レイヤーとシーンに追加された後、およびアニメーションループで、塗りつぶしスタイルを変更しようとしています。

キャンバスをレンダリングするメインアプリファイルのユーザーボタンコントロールに基づいて、塗りつぶしタイプを単色タイプから線形グラデーションタイプに切り替えようとしています。

オブジェクトを別のファイルでインスタンス化します。これは、次のようにコンストラクターで最初に線形グラデーション塗りつぶしを使用してKineticJSRectをインスタンス化するクラスです。

function MyBackground(width,height,c1,c2,mode) {
  this.width = width;
  this.height = height;
  this.color1 = c1;
  this.color2 = c2;
  this.mode = mode;
  this.background = new Kinetic.Rect({
  x: 0,
  y: 0,
  width: this.width,
  height: this.height,
  fillLinearGradientStartPoint: [0, 0],
  fillLinearGradientEndPoint: [this.width, this.height],
  fillLinearGradientColorStops: [0, this.color1, 1, this.color2]
  });
  this.getMode = function() { return this.mode; }; }

次に、メインファイルにこのインスタンスを作成します。

var myBack= new MyBackground(stageWidth,stageHeight,getRandomHexColor(),getRandomHexColor(),'dualColorLinearGradientStatic');
var background = myBack.getBackground();
myBack.setMode('singleColor');

次に、背景のRectをレイヤーに追加し、レイヤーをステージに追加します。

layer.add(background);
stage.add(layer);

次に、アニメーションループコードを開始し、その後、ボタンの押下をキャッチするイベントハンドラーを使用して、内部でこれを試行して塗りつぶしを変更します。

myBack.setMode(bgmodeselected);
background = myBack.getBackground();

アプリページが正常に読み込まれ、最初の線形グラデーションの塗りつぶしが表示されます。同じモードの線形グラデーションを選択してボタンコントロールを押すと、塗りつぶしタイプの線形グラデーションを維持したいので、色が変わります。次に、モードを単色塗りつぶしに切り替えて、コントロールボタンをクリックすると、それも機能し、四角形を単色に変更します。これが、クラス関数内にあるもので、それを具体的に機能させるモードを変更します。

this.background.setFill(this.color1);

条件に基づく同じ関数内で、塗りつぶしを線形グラデーションに変更する必要があります（最初に上記のように単色の塗りつぶしに変更されない限り、これを行います）

this.background.setAttrs({
    fillLinearGradientStartPoint: [0, 0],
    fillLinearGradientEndPoint: [960, 600],
    fillLinearGradientColorStops: [0, this.color1, 1, this.color2]
  });

私も同じブロック内で試しました：

this.background.setFillLinearGradientStartPoint(0, 0);
this.background.setFillLinearGradientEndPoint(960, 600);
this.background.setFillLinearGradientColorStops([0, this.color1, 1, this.color2]);

適切な変数と値が関数に渡され、条件が機能していることを知っています。これは、塗りつぶしモードのタイプが（最初にインスタンス化された）線形グラデーション塗りつぶしから単一の色塗りつぶしに変更されるためです（別の単色）。

問題は、BACKを線形グラデーション塗りつぶしに切り替えようとすると、切り替えられないか、少なくともこの同じ関数を適切な値で呼び出しているにもかかわらず、再描画/更新することです。したがって、私の具体的な質問は、KineticJS Rectの塗りつぶしスタイルを、レイヤーとステージに追加されてアニメーションが作成された後、単色の塗りつぶしから線形グラデーションの塗りつぶしに複数回変更するにはどうすればよいかということだと思います。ループが実装されていますか？

これは私の最初の質問投稿なので、適切に行っていることを願っています。何か違うことをする必要があるかどうか教えてください。ありがとう。

4

1 に答える 1

1

stackoverflowへようこそ！

グラデーションを再適用するときは、必ず単色の塗りつぶしをクリアしてください。

      // clear the solid fill
      this.setFill('');
      // then apply the gradient fill
      this.setFillLinearGradientStartPoint(-50);
      this.setFillLinearGradientEndPoint(50);
      this.setFillLinearGradientColorStops([0, 'green', 1, 'yellow']);

コードとフィドルは次のとおりです。http：//jsfiddle.net/m1erickson/dmMF2/

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js"></script>
    <script>

      function draw(images) {
        var stage = new Kinetic.Stage({
          container: 'container',
          width: 578,
          height: 200
        });
        var layer = new Kinetic.Layer();

        var linearGradPentagon = new Kinetic.Rect({
          x: 100,
          y: 30,
          width: 75,
          height: 50,
          fill:"red",
          stroke: 'black',
          strokeWidth: 4,
          draggable: true
        });


        linearGradPentagon.on('mouseover touchstart', function() {
          this.setFill('');
          this.setFillLinearGradientStartPoint(-50);
          this.setFillLinearGradientEndPoint(50);
          this.setFillLinearGradientColorStops([0, 'green', 1, 'yellow']);
          layer.draw();
        });

        linearGradPentagon.on('mouseout touchend', function() {
          this.setFill('red');
          layer.draw();
        });

        layer.add(linearGradPentagon);
        stage.add(layer);
      }

      draw();

    </script>
  </body>
</html>
于 2013-03-26T18:44:39.217 に答える