如何在 vue.js 中使用 konva 获取价值

Question

我可以使用下面的代码移动和转移矩形。
我在 vue.js 使用了 konva 库
这很好用。
但我想在移动后将 x,y 位置保存到本地存储中
你能教怎么得到吗？
我很抱歉长代码
您可以将此代码附加到“.vue”，它运行良好，没有问题。
它移动和转移很好，但我看不到移动它的位置值

<template>
  <div>
    <v-stage ref="stage" :config="stageSize" @mousedown="handleStageMouseDown">
      <v-layer ref="layer">
        <v-rect v-for="item in rectangles" :key="item.id" :config="item"/>
        <v-transformer ref="transformer"/>
      </v-layer>
    </v-stage>
    <div>
      <p>{{ rectangles[0].x }}</p>
      <button @click="addCounter">+</button>
      <button @click="subCounter">-</button>
      <button @click="position">SAVE</button>
    </div>
  </div>
</template>

<script>
const width = window.innerWidth;
const height = window.innerHeight;

export default {
  data() {
    return {
      stageSize: {
        width: width,
        height: height
      },
      rectangles: [
        {
          x: 150,
          y: 100,
          width: 100,
          height: 100,
          fill: "red",
          name: "rect1",
          draggable: true
        },
        {
          x: 150,
          y: 150,
          width: 100,
          height: 100,
          fill: "green",
          name: "rect2",
          draggable: true
        }
      ],
      selectedShapeName: ""
    };
  },
  methods: {
    position() {
      localStorage.setItem(this.rectangles[0].x, true);
    },
    addCounter() {
      this.rectangles[0].x++;
    },
    subCounter() {
      this.rectangles[0].x--;
    },

    handleStageMouseDown(e) {
      // clicked on stage - cler selection
      if (e.target === e.target.getStage()) {
        this.selectedShapeName = "";
        this.updateTransformer();
        return;
      }

      // clicked on transformer - do nothing
      const clickedOnTransformer =
        e.target.getParent().className === "Transformer";
      if (clickedOnTransformer) {
        return;
      }

      // find clicked rect by its name
      const name = e.target.name();
      const rect = this.rectangles.find(r => r.name === name);
      if (rect) {
        this.selectedShapeName = name;
      } else {
        this.selectedShapeName = "";
      }
      this.updateTransformer();
    },
    updateTransformer() {
      // here we need to manually attach or detach Transformer node
      const transformerNode = this.$refs.transformer.getStage();
      const stage = transformerNode.getStage();
      const { selectedShapeName } = this;

      const selectedNode = stage.findOne("." + selectedShapeName);
      // do nothing if selected node is already attached
      if (selectedNode === transformerNode.node()) {
        return;
      }

      if (selectedNode) {
        // attach to another node
        transformerNode.attachTo(selectedNode);
      } else {
        // remove transformer
        transformerNode.detach();
      }
      transformerNode.getLayer().batchDraw();
    }
  }
};
</script>

Answer 1

您可以使用dragmove 和transform 事件。

<v-rect
  v-for="item in rectangles"
  :key="item.id"
  :config="item"
  @dragmove="handleRectChange"
  @transform="handleRectChange"
/>

handleRectChange(e) {
  console.log(e.target.x(), e.target.y()); // will log current position
},

演示：https://codesandbox.io/s/lp53194w59