1

我试图在KineticJS Rect 对象实例化后、添加到图层和场景后以及在动画循环中更改其填充样式。

我正在尝试根据渲染画布的主应用程序文件中的用户按钮控件在单一颜色类型和线性渐变类型之间切换填充类型。

我在一个不同的文件中实例化对象，这是我编写的一个类，它最初在它的构造函数中实例化一个具有线性渐变填充的 KineticJS Rect，如下所示：

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

然后我将背景矩形添加到图层，并将图层添加到舞台：

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

我知道正确的变量和值正在传递给函数并且条件正在工作，因为它将填充模式类型从其（最初实例化的）线性渐变填充更改为单色填充（即使作为不同的单色）。

问题是当我尝试切换回线性渐变填充时，它不会这样做，或者至少重新绘制/刷新，尽管它使用正确的值调用相同的函数。所以，我想我的具体问题是如何多次更改 KineticJS Rect 的填充样式，从单一颜色填充回线性渐变填充，之后它已经被添加到图层和舞台并具有动画循环实现了吗？

这是我的第一个问题帖子，所以我希望我做得正确；如果我应该做不同的事情，请告诉我。谢谢。

4

1 回答 1

1

欢迎来到堆栈溢出！

当您重新应用渐变时，请务必清除纯色填充：

      // 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 回答