You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
1.3 KiB
80 lines
1.3 KiB
import Konva from "konva";
|
|
|
|
let $layer=null
|
|
let $width=null
|
|
let $height=null
|
|
let $group=null
|
|
|
|
const container=function (width=0,height=0,container){
|
|
$width=width
|
|
$height=height
|
|
const stage = new Konva.Stage({
|
|
container: container,
|
|
width: width,
|
|
height: height,
|
|
});
|
|
|
|
const layer = new Konva.Layer();
|
|
stage.add(layer)
|
|
layer.draw();
|
|
$layer=layer
|
|
|
|
const imageObj = new Image();
|
|
imageObj.src = require('@/assets/pwan/gbSelectBg.png');
|
|
imageObj.onload = function () {
|
|
const shape = new Konva.Image({
|
|
x: 0,
|
|
y: 0,
|
|
width: width,
|
|
height:height,
|
|
image: imageObj,
|
|
});
|
|
layer.add(shape)
|
|
}
|
|
return {
|
|
stage,layer
|
|
}
|
|
}
|
|
|
|
const onMsg=function (msg,replay=false){
|
|
if ($group){
|
|
$group.remove()
|
|
}
|
|
const group=new Konva.Group({
|
|
x:$width-50,
|
|
y:0,
|
|
width:$width*0.35,
|
|
height:$height,
|
|
})
|
|
$layer.add(group)
|
|
$group=group
|
|
|
|
const text=new Konva.Text({
|
|
x:0,
|
|
y:0,
|
|
width:$width*0.35,
|
|
height:$height,
|
|
fill:'yellow',
|
|
verticalAlign:'middle',
|
|
fontSize:24,
|
|
text:msg
|
|
})
|
|
group.add(text)
|
|
|
|
const play=function (){
|
|
group.to({
|
|
x: -$width*0.3,
|
|
y: 0,
|
|
duration: 10, //持续时间
|
|
onFinish() {
|
|
group.remove()
|
|
replay&&play()
|
|
}
|
|
})
|
|
}
|
|
|
|
play()
|
|
}
|
|
|
|
export default {container,onMsg}
|