Vue-Konva。有没有办法在飞行中重新排列图层?

所以,我一直在使用vue-konva,我有这样的东西。

<v-container>
    <v-stage ref="stage">
        <v-layer ref="baseImage">
            <v-image>
        </v-layer>
        <v-layer ref="annotationLayer">
            <v-rect ref="eventBox">
            <v-rect ref="rubberBox">
            <v-rect ref="annotationRect">
        </v-layer>
    </v-stage>
<v-container>

目前有一些问题,如果我想绘制新的盒子, 当图像上已经有其他的注解区域时。因为从技术上讲,它们在eventBox和rubberbox上面,当光标在现有的annotationRect上面时,它们就会 “阻挡 “这两个图层。

但是,我不想让eventBox和RubberBox一直处于annotationRect的上方,因为我需要能够与annotationRect交互,移动它们,调整它们的大小等等。

有没有一种方法可以让我重新安排eventBox、rubberBox和annotationRect的顺序,即从原来的eventBox-rubberBox-annotationRect,改变为(从下到上)annotationRect-eventBox-rubberBox的顺序,然后再改变回来,例如当vue组件从另一个组件接收到一个事件时?

解决方案:

你需要定义你的 eventBox, rubberBoxannotationRect 在你的应用程序的状态下的顺序数组内。然后你可以使用 v-for 指令来渲染数组中的项目。

<template>
  <div>
    <v-stage ref="stage" :config="stageSize" @click="changeOrder">
      <v-layer>
        <v-text :config="{text: 'Click me to change order', fontSize: 15}"/>
        <v-rect v-for="item in items" v-bind:key="item.id" :config="item"/>
      </v-layer>
      <v-layer ref="dragLayer"></v-layer>
    </v-stage>
  </div>
</template>

<script>
const width = window.innerWidth;
const height = window.innerHeight;
export default {
  data() {
    return {
      stageSize: {
        width: width,
        height: height
      },
      items: [
        { id: 1, x: 10, y: 50, width: 100, height: 100, fill: "red" },
        { id: 2, x: 50, y: 70, width: 100, height: 100, fill: "blue" }
      ]
    };
  },
  methods: {
    changeOrder() {
      const first = this.items[0];
      // remove first item:
      this.items.splice(0, 1);
      // add it to the top:
      this.items.push(first);
    }
  }
};
</script>

DEmo。https:/codesandbox.iosvue-konva-list-render-l70vs?file=srcApp.vue。

本文来自投稿,不代表运维实战侠立场,如若转载,请注明出处:https://www.shizhanxia.com/514.html

(0)
上一篇 2022年6月29日 下午3:57
下一篇 2022年6月29日 下午3:57

相关推荐

发表评论

登录后才能评论