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>