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 =400const height=200const x=clientWidth/2-width/2const y=clientHeight/2-height/2const 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 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>