Konva键盘事件

可以通过键盘进行上下左右移动图形

<template>
  <div class="rect">
    <div class="header">
      <el-button type="primary" @click="show">展示</el-button>
      <el-button type="success" @click="hide">隐藏</el-button>
    </div>
    <div id="canvas"></div>
  </div>
</template>
<script setup lang="ts">
import {onMounted} from 'vue'
import Konva from 'konva'

let  stage:Konva.Stage | null=null
const layer:Konva.Layer=new Konva.Layer()

onMounted(()=>{
  init()
})
const init=()=> {
  const el = document.getElementById("canvas")
  if (!el) {
    return
  }
  const { clientWidth, clientHeight } = el
  //创建一个stage平台
   stage = new Konva.Stage({
    container: 'canvas',
    width: clientWidth,
    height: clientHeight,

  })
  stage.add(layer)
  //矩形

  const width =400
  const height=200
  const x=clientWidth/2-width/2
  const y=clientHeight/2-height/2
  const rect=new Konva.Rect({
    //给图形添加id和名称,方便之后通过id和名称查找图形
    id:"textId",
    name:"textName",
    x:x,
    y:y,
    width:width,
    height:height,
    fill:'#ff8800',
    stroke:'black',
    strokeWidth:1,
    opacity:0.5
  })
layer.add(rect)
  const container=stage.container()//这行代码将获取到的 DOM 元素赋值给 container 变量。通过这个变量，你可以直接访问和操作这个 DOM 元素。
  const step=10
  container.tabIndex=1//tabIndex: 这是一个 HTML 属性，用于控制元素的可聚焦性和键盘导航顺序。
  container.addEventListener("keydown",(e)=>{
    if (e.key==="ArrowLeft"){
      rect.x(rect.x()-step)
    }else if (e.key==="ArrowDown"){
      rect.y(rect.y() + step)
    }
    else if (e.key==="ArrowRight") {
      rect.x(rect.x() + step)
    }
    else if (e.key==="ArrowUp") {
      rect.y(rect.y() - step)
    }
    else {
      return
    }
  })
}
const show=()=>{
  if (!stage){
    return
  }
//  const shapes=stage.findOne("#textId")//通过id查找
 // const shapes=stage?.findOne(".textName")//通过名称
 const shapes=stage?.findOne("Rect")//通过图形的类别来查找
  console.log(shapes)
  //设置展示
  shapes.show()

}
const hide=()=>{
  if (!stage){
    return
  }
//  const shapes=stage.findOne("#textId")//通过id查找
  // const shapes=stage?.findOne(".textName")//通过名称
  const shapes=stage?.findOne("Rect")//通过图形的类别来查找
  console.log(shapes)
  //设置展示
  shapes.hide()

}
</script>

<style scoped lang="scss">
.rect {
  padding: 20px;
  .header{
    height: 50px;
  }
  #canvas {
    background-color: #eee;
    border: 1px solid #666;
    height: calc(100vh - 92px);
  }
}
</style>