如何在vue.js上使用konva获得价值

我可以用下面的代码移动和传输矩形。
我使用了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>

{{矩形[0].x}

+
-
拯救
常量宽度=window.innerWidth；
const height=window.innerHeight；
导出默认值{
数据（）{
返回{
阶段化：{
宽度：宽度，
高度：高度
},
矩形：[
{
x:150，
y:100，
宽度：100，
身高：100，
填充：“红色”，
名称：“rect1”，
德拉格布尔：是的
},
{
x:150，
y:150，
宽度：100，
身高：100，
填充：“绿色”，
名称：“rect2”，
德拉格布尔：是的
}
],
selectedShapeName:“
};
},
方法：{
职位（{
localStorage.setItem（this.rectangles[0].x，true）；
},
addCounter（）{
这个.矩形[0].x++；
},
子计数器（）{
这个.矩形[0].x--；
},
扶手床向下（e）{
//点击舞台-文员选择
如果（e.target==e.target.getStage（））{
this.selectedShapeName=“”；
this.updateTransformer（）；
返回；
}
//点击transformer-什么都不做
常量点击转换器=
e、 target.getParent（）.className==“Transformer”；
如果（单击反变换器）{
返回；
}
//按其名称查找单击的rect
const name=e.target.name（）；
const rect=this.rectanges.find（r=>r.name==name）；
if（rect）{
this.selectedShapeName=名称；
}否则{
this.selectedShapeName=“”；
}
this.updateTransformer（）；
},
updateTransformer（）{
//这里我们需要手动附加或分离Transformer节点
const transformerNode=this.$refs.transformer.getStage（）；
const stage=transformerNode.getStage（）；
const{selectedShapeName}=这个；
const selectedNode=stage.findOne（“.”+selectedShapeName）；
//如果已附加选定节点，则不执行任何操作
if（selectedNode==transformerNode.node（））{
返回；
}
如果（selectedNode）{
//附加到另一个节点
transformerNode.attachTo（selectedNode）；
}否则{
//拆下变压器
transformerNode.detach（）；
}
transformerNode.getLayer（）.batchDraw（）；
}
}
};

您可以使用

dragmove

和

transform

事件

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

---

演示：

那么如何获得位置-x是e.target.attrs.x？或者event.target是Konva对象，因此x是e.target.position（）。x？

e.target

是Konva节点。我建议不要触摸属性

e.target.position（）.x

也可以。

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