Как получить значение с конвой в vue.js - PullRequest
Новая
       11

Как получить значение с конвой в vue.js

0 голосов
/ 10 февраля 2019

Я могу перемещать и переносить прямоугольники с помощью приведенного ниже кода.
Я использовал библиотеку konva в vue.js
Это хорошо работает.
Но я хочу получить положение 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>

1 Ответ

0 голосов
/ 11 февраля 2019

Вы можете использовать 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

...