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