代码：
<template><div class="rect"><div class="header">
<!-- <el-button type="primary" @click="show">展示</el-button>-->
<!-- <el-button type="success" @click="hide">隐藏</el-button>--><el-button type="warning" @click="moveToTop">置顶</el-button><el-button type="danger" @click="moveToBottom">置地</el-button><el-button type="info" @click="moveUp">上移一层</el-button><el-button type="success" @click="moveDown">下移一层</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()
const group :Konva.Group=new Konva.Group()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)//矩形group.setAttrs({x:clientWidth/2,y:clientHeight/2,draggable:true})
const colors=["#ff8800","#ff0000","#ff00ff","#00ffff"]for (let i=0;i<4;i++){const rect=new Konva.Rect({//给图形添加id和名称,方便之后通过id和名称查找图形id:`rect${i}`,name:"textName",x:i * 20,y:i * 20,width:100,height:50,fill:colors[i],stroke:'black',strokeWidth:1,draggable:true})group.add(rect)}layer.add(group)
}
const moveToTop=()=>{if (!stage){return}const shapes=stage.findOne("#rect0")shapes?.moveToTop()
}
const moveToBottom=()=>{if (!stage){return}const shapes=stage.findOne("#rect0")shapes?.moveToBottom()}
const moveUp=()=>{if (!stage){return}const shapes=stage.findOne("#rect0")shapes?.moveUp()}
const moveDown=()=>{if (!stage){return}const shapes=stage.findOne("#rect0")shapes?.moveDown()}
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>
