如何在Konva JS中修改或更新已创建形状的宽度与高度属性

Konva 形状宽高动态更新方案 #

Konva 中所有形状的属性修改都遵循「修改属性→触发图层重绘」的逻辑，你可以选下面任意一种方式实现update_shape函数：

方案1：直接修改单个属性 #

var update_shape = (newWidth, newHeight) => {
  // 给bg实例的width、height属性赋新值
  bg.width(newWidth);
  bg.height(newHeight);
  // 调用图层的draw方法让修改生效
  layer.draw();
}

方案2：批量设置属性 #

如果要同时修改多个属性，也可以用set方法批量操作，代码更简洁：

var update_shape = (newWidth, newHeight) => {
  bg.set({
    width: newWidth,
    height: newHeight
    // 此处可新增其他要修改的属性，比如fill、x、y等
  });
  layer.draw();
}

如果你需要同时更新Stage的宽高匹配形状尺寸，除了修改Rect的宽高，还需要同步给Stage设置新宽高后再执行重绘：

stage.width(newWidth);
stage.height(newHeight);

内容的提问来源于stack exchange，提问作者Balaji