我有一个现有的代码库,它创建了一个舞台,然后添加了一些图层,并在其中一个图层中绘制了 KineticJS 多边形。现在我需要在用户单击舞台外的元素时更新多边形的背景。
我已经设法获取了舞台细节,然后是我想要更改的确切多边形,并且还设法使用 .SetFill
方法更改了多边形的fill
。当我访问多边形的属性时,我看到填充属性设置正确。但是多边形的背景没有改变。
在 .SetFill
函数之后我们需要做些什么吗?或者,在创建 KineticJS 形状后更改/更新填充的正确方法是什么?我没有看到任何更新或重绘方法...
代码在 Clojurescript 中,所以我没有确切的 JS 代码,但这些是我的步骤:
polygon.setFill(color hexcode)
layer.add(多边形)
stage.add(层)
stage.draw()
最佳答案
这是一个使用 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>
关于javascript - KineticJS:多边形上的 .SetFill 更新填充属性但不填充颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57718124/