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.
114 lines
2.4 KiB
114 lines
2.4 KiB
import Konva from "konva";
|
|
|
|
export default function (width,height,callback){
|
|
const x=0,y=0,_width=width*0.16,_height=height*0.67
|
|
|
|
const container=function (){
|
|
const x=width*0.134+30,y=300
|
|
|
|
const group=new Konva.Group({
|
|
x:x,
|
|
y:y,
|
|
width:_width,
|
|
height:_height
|
|
})
|
|
|
|
const imageObj = new Image();
|
|
imageObj.src = require('@/assets/sliao/personbg.png');
|
|
imageObj.onload = function () {
|
|
const shape = new Konva.Image({
|
|
x: 0,
|
|
y: 0,
|
|
width: _width,
|
|
height:_height,
|
|
image: this,
|
|
});
|
|
group.add(shape)
|
|
shape.zIndex(0)
|
|
}
|
|
|
|
return group
|
|
}
|
|
|
|
let selectedShape=null;
|
|
const dw=function (index,item=[]){
|
|
|
|
const alignSize=2
|
|
const width=((_width-20)/alignSize),height=150
|
|
const x=index%alignSize*width+index%alignSize*10+5,y=height*(Math.floor(index/alignSize))+(Math.floor(index/alignSize)+1)*10
|
|
const group=new Konva.Group({
|
|
x:x,
|
|
y:y,
|
|
width:width,
|
|
height:height
|
|
})
|
|
group.on('click touchstart',function (){
|
|
if (selectedShape){
|
|
selectedShape.hide()
|
|
if (selectedShape===selectShape){
|
|
selectedShape=null
|
|
return
|
|
}
|
|
}
|
|
selectedShape=selectShape
|
|
selectedShape.show()
|
|
callback(index,item)
|
|
})
|
|
|
|
const bgObj = new Image();
|
|
bgObj.src = require('@/assets/sliao/personbg1.png');
|
|
bgObj.onload = function () {
|
|
const shape = new Konva.Image({
|
|
x: 0,
|
|
y: 0,
|
|
offsetX:4,
|
|
width: width,
|
|
height:height,
|
|
image: this,
|
|
});
|
|
group.add(shape)
|
|
shape.zIndex(0)
|
|
}
|
|
|
|
const selectObj = new Image();
|
|
selectObj.src = require('@/assets/sliao/selected.png');
|
|
let selectShape=null
|
|
const setSelectShape=function (shape){
|
|
selectShape=shape
|
|
}
|
|
selectObj.onload = function () {
|
|
const shape = new Konva.Image({
|
|
x: width-width*0.31,
|
|
y: 4,
|
|
width: width*0.25,
|
|
height:width*0.25,
|
|
image: this,
|
|
visible:false
|
|
});
|
|
group.add(shape)
|
|
shape.zIndex(0)
|
|
setSelectShape(shape)
|
|
}
|
|
|
|
const text=new Konva.Text({
|
|
x:0,
|
|
y:0,
|
|
width: width,
|
|
height: height,
|
|
fill:'black',
|
|
text:`${item.name}\n${item.list.length}张`,
|
|
align:'center',
|
|
verticalAlign:'middle',
|
|
fontSize:18
|
|
})
|
|
group.add(text)
|
|
|
|
return group
|
|
}
|
|
|
|
return {
|
|
container,dw
|
|
}
|
|
|
|
}
|