在 vue-konva 中，具有 getNode() 函数的代理类型是什么

Question

我正在使用 TypeScript 在 Vue 3 的 Composition API 中编写应用程序。

在我看来，我想获得拖动的 v-group 的新位置。为此，我需要引用 v-group 并使用

getNode()

函数从 vue-konva 代理中解开它。当我使用 TypeScript 时，我需要知道从 v-group 的引用中获取的元素类型是什么。

但是，我无法找到有关用于每个 konva 对象的 vue-konva 代理的文档。

这是我当前的代码：

<template>
  <v-stage :config="configKonva">
    <v-layer>
      <v-group ref="mainGroup" :config="mainGroupConfig" @dragend="groupDragEnd">
        <v-rect :config="getPixelConfig" />
      </v-group>
    </v-layer>
  </v-stage>
</template>

<script setup lang="ts">
import Konva from "konva";
import { computed, ref } from "vue";

const configKonva = computed(() => ({
  width: 100,
  height: 100,
}));
const mainGroupConfig = computed(() => {
  return {
    x: 0,
    y: 0,
    draggable: true,
  };
});
function getPixelConfig() {
  return {
    x: 0,
    y: 0,
    width: 5,
    height: 5,
    fill: "black",
    stroke: "transparent",
  };
}

const mainGroup = ref<Konva.Group | null>(null); // HERE IS THE PROBLEM
function groupDragEnd() {
  if (mainGroup.value) {
    console.log("mainGroup.value: ", mainGroup.value); // return proxy
    const groupNode = mainGroup.value.getNode(); // required to unwrap Konva node from Vue proxy
    console.log("groupNode: " + groupNode.getX());
  }
}
</script>

这有效，并且在拖动结束时给出了以下结果：

mainGroup.value 代理（对象）{__v_skip：true，getStage：f，getNode：f}

组节点：91.00000546773309

但是这是不正确的，因为

mainGroup

的类型应该包括vue-konva的类型，例如：

const mainGroup = ref<ProxyOfVueKonva<Konva.Group> | null>(null);

其中

ProxyOfVueKonva

是代理的实际类型。缺少此类型会导致 typeScript 错误。

Answer 1

我必须创建所需的类型。因此编辑的最后一部分是：

import { Transformer } from "konva/lib/shapes/Transformer";
type VueKonvaProxy<Group> = { getNode(): Group }; // THIS SOLVED THE PROBLEM
const mainGroupProxy = ref<VueKonvaProxy<Konva.Group> | null>(null);
function groupDragEnd() {
    if (mainGroupProxy.value) {
        console.log("mainGroupProxy.value: " + mainGroupProxy.value);
        const mainGroup = mainGroupProxy.value.getNode() as Transformer; // setting type Transformer is required for TypeScript to allow for use of required function
        console.log("X position: " + mainGroup.getX());
    }
}