创建Konvajs形状和连接基于按钮单击事件动态创建

本教程将介绍创建Konvajs形状和连接基于按钮单击事件动态创建的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

创建Konvajs形状和连接基于按钮单击事件动态创建 教程 第1张

问题描述

我希望在我的应用程序中使用Vue-Konva/Konvajs创建Rectangle ShapesConnections。我不想创建加载Static值,而是希望在用户单击Add Node按钮时创建Shapes,在用户单击Add Connector按钮时创建Connectors,并在Shapes之间建立连接。

我查看了一些内容,可以使用mouse events执行此操作,但无法将其转换为button clicks

以下是我目前拥有的代码:CodeSandbox

有人可以指导我怎么在单击按钮事件时创建形状和连接符吗?我们非常感谢您的任何建议或指导。

我看起来像这样:

推荐答案

尝试了几种方法后,我能够使其正常工作。在此发帖,因为它可能对将来的某人有用:

<template>
  <div class="container-fluid">
 <div class="row">
<div class="col-sm-6">
  <button class="btn btn-primary btn-sm" @click="addEvent()">
 Add Event
  </button>&nbsp;
  <button class="btn btn-success btn-sm" @click="submitNodes()">
 Submit
  </button>&nbsp;
</div>
 </div>
 <div class="row root">
<div class="col-sm-12 body">
  <v-stage
 ref="stage"
 class="stage"
 :config="stageSize"
 @mouseup="handleMouseUp"
 @mousemove="handleMouseMove"
 @mousedown="handleMouseDown"
  >
 <v-layer ref="layer">
<v-rect
  v-for="(rec, index) in nodeArray"
  :key="index"
  :config="{
 x: Math.min(rec.startPointX, rec.startPointX + rec.width),
 y: Math.min(rec.startPointY, rec.startPointY + rec.height),
 width: Math.abs(rec.width),
 height: Math.abs(rec.height),
 fill: 'rgb(0,0,0,0)',
 stroke: 'black',
 strokeWidth: 3,
  }"
/>
 </v-layer>
  </v-stage>
</div>
 </div>
  </div>
</template>

<script>
export default {
  data () {
 return {
stageSize: {
  width: null,
  height: 900
},
lines: [],
isDrawing: false,
eventFlag: false,
nodeCounter: 0,
nodeArray: []
 }
  },
  mounted () {
 if (process.browser && window !== undefined) {
this.stageSize.width = window.innerWidth
// this.stageSize.height = window.innerHeight
 }
  },
  methods: {
 handleMouseDown (event) {
if (this.eventFlag) {
  this.isDrawing = true
  const pos = this.$refs.stage.getNode().getPointerPosition()
  const nodeInfo = this.nodeArray[this.nodeArray.length - 1]
  nodeInfo.startPointX = pos.x
  nodeInfo.startPointY = pos.y
  console.log(JSON.stringify(nodeInfo, null, 4))
}
 },
 handleMouseUp () {
this.isDrawing = false
this.eventFlag = false
 },
 setNodes (element) {
this.nodeArray = element
 },
 handleMouseMove (event) {
if (!this.isDrawing) {
  return
}
// console.log(event);
const point = this.$refs.stage.getNode().getPointerPosition()
// Handle  rectangle part
const curRec = this.nodeArray[this.nodeArray.length - 1]
curRec.width = point.x - curRec.startPointX
curRec.height = point.y - curRec.startPointY
 },
 // Function to read the Nodes after add all the nodes
 submitNodes () {
console.log('ALL NODE INFO')
console.log(JSON.stringify(this.nodeArray, null, 4))
this.handleDragstart()
 },
 addEvent () {
this.eventFlag = true
this.setNodes([
  ...this.nodeArray,
  {
 width: 0,
 height: 0,
 draggable: true,
 name: 'Event ' + this.nodeCounter
  }
])
this.nodeCounter++
 }
  }
}
</script>

<style scoped>
.root {
  --bg-color: #fff;
  --line-color-1: #D5D8DC;
  --line-color-2: #a9a9a9;
}

.body {
  height: 100vh;
  margin: 0;
}

.stage {
  height: 100%;
  background-color: var(--bg-color);
  background-image: conic-gradient(at calc(100% - 2px) calc(100% - 2px),var(--line-color-1) 270deg, #0000 0),
 conic-gradient(at calc(100% - 1px) calc(100% - 1px),var(--line-color-2) 270deg, #0000 0);
  background-size: 100px 100px, 20px 20px;
}
</style>

好了关于创建Konvajs形状和连接基于按钮单击事件动态创建的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。