Vue-Konva中如何让Layer的宽高与Stage保持一致

嘿，这个问题我之前也碰到过！其实你不用费劲手动给Layer设置宽高的——Konva里的Layer默认就会自动和它所属的Stage保持相同的尺寸，这是框架本身的默认行为哦～

你遇到的那个警告，是因为Konva的Layer实例并没有提供可直接赋值的width属性，它的尺寸完全由Stage来管控。所以官方才提示你要用stage.width()方法去获取Stage的宽度值，而不是直接给Layer硬塞width参数。

如果是动态调整Stage宽高的场景（比如窗口 resize 时适配屏幕），你只需要专注更新Stage的尺寸就好，Layer会自动同步，根本不用额外操作。给你举个Vue3的简单例子：

<template>
  <v-stage :config="{ width: stageWidth, height: stageHeight }" ref="stage">
    <v-layer ref="layer">
      <!-- 举个例子：让一个矩形铺满整个Stage/Layer -->
      <v-rect 
        :config="{ 
          x: 0, 
          y: 0, 
          width: stageWidth, 
          height: stageHeight, 
          fill: '#f0f0f0' 
        }" 
      />
    </v-layer>
  </v-stage>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { VStage, VLayer, VRect } from 'vue-konva';

const stageWidth = ref(window.innerWidth);
const stageHeight = ref(window.innerHeight);

const handleResize = () => {
  stageWidth.value = window.innerWidth;
  stageHeight.value = window.innerHeight;
};

onMounted(() => {
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});
</script>

要是真的有特殊需求（这种情况非常少见），必须手动调整Layer尺寸的话，你可以通过Stage实例获取尺寸后，调用Layer的setSize方法：

// 先获取Stage和Layer的实例
const stageInstance = stage.value.getStage();
const layerInstance = layer.value.getLayer();
// 同步尺寸
layerInstance.setSize({ 
  width: stageInstance.width(), 
  height: stageInstance.height() 
});

但还是要再强调一遍：绝大多数场景下，你完全不需要手动设置Layer的宽高，它会乖乖跟着Stage走的～

备注：内容来源于stack exchange，提问作者Blank