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

Posted 2023-02-22

【中文标题】创建基于按钮单击事件动态创建的 Konvajs 形状和连接

【英文标题】：Create Konvajs Shapes and Connections creating dynamically based on button click events

【发布时间】：2021-12-18 21:21:09

【问题描述】：

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

我查看了一些东西，并能够使用 mouse events 完成此操作，但无法将其转换为 button clicks。

以下是我拥有的当前代码：CodeSandbox

有人可以指导我如何在单击按钮事件时创建形状和连接器吗？非常感谢任何建议或指导。

我看起来像这样：

【问题讨论】：

你看到了吗？ konvajs.org/docs/vue/index.html

@VanquiishedWombat 非常感谢您的回复。我查看了这个示例，但问题是他们已经创建了star shape，然后他们在dragging 中创建了stage，但在我的情况下，我想在用户每次点击时创建一个新形状Add Node 按钮。

【参考方案1】：

在尝试了一些事情之后，我能够让它工作。在此处发布，因为它可能对将来的某人有用：

<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>