javascript - KineticJS:多边形上的 .SetFill 更新填充属性但不填充颜色

Question

我有一个现有的代码库，它创建了一个舞台，然后添加了一些图层，并在其中一个图层中绘制了 KineticJS 多边形。现在我需要在用户单击舞台外的元素时更新多边形的背景。

我已经设法获取了舞台细节，然后是我想要更改的确切多边形，并且还设法使用 .SetFill 方法更改了多边形的fill。当我访问多边形的属性时，我看到填充属性设置正确。但是多边形的背景没有改变。

在 .SetFill 函数之后我们需要做些什么吗？或者，在创建 KineticJS 形状后更改/更新填充的正确方法是什么？我没有看到任何更新或重绘方法...

代码在 Clojurescript 中，所以我没有确切的 JS 代码，但这些是我的步骤:

1. polygon.setFill(color hexcode)
2. layer.add(多边形)
3. stage.add(层)
4. stage.draw()

Answer 1

这是一个使用 setAttrs 方法更新多边形背景的 kinetic.js 示例。更改后，使用batchDraw方法更新图层。

let index = 0;
const colors = [
  [0, 'yellow', 1, 'red'],
  [0, 'red', 1, 'yellow']
];
document.querySelector('#container').addEventListener('click', function() {
  if (index++ > 0) index = 0;
  polygon.setAttrs({
    fillLinearGradientColorStops: colors[index]
  });
  // force update of layer
  layer.batchDraw();
});

const stage = new Kinetic.Stage({
  container: 'container',
  width: 615,
  height: 145
});
const layer = new Kinetic.Layer();
const polygon = new Kinetic.RegularPolygon({
  x: stage.width() / 2,
  y: stage.height() / 2,
  sides: 5,
  radius: 70,
  fillLinearGradientStartPoint: {
    x: -50,
    y: -50
  },
  fillLinearGradientEndPoint: {
    x: 50,
    y: 50
  },
  fillLinearGradientColorStops: colors[index],
  stroke: 'black',
  strokeWidth: 4,
  draggable: true
});
layer.add(polygon);
stage.add(layer);
stage.draw();

<script src="https://cdnjs.cloudflare.com/ajax/libs/kineticjs/5.2.0/kinetic.min.js"></script>
<div id='container'></div>
<div>Click or drag polygon</div>