Question

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

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

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

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

polygon.setFill(color hexcode)
layer.add(polygon)
stage.add(layer)
stage.draw()

Answer 1

这是一个使用setAttrs方法更新多边形背景的dynamic.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>

KineticJS：多边形上的.SetFill更新填充属性，但不使用颜色填充

1 个答案: