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.
81 lines
1.6 KiB
81 lines
1.6 KiB
import Konva from "konva";
|
|
|
|
export default function (width,height){
|
|
const x=0,y=0,_width=width*0.16,_height=height*0.945
|
|
|
|
const container=function (){
|
|
const x=width*0.5+30,y=40
|
|
|
|
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
|
|
}
|
|
|
|
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
|
|
})
|
|
|
|
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 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
|
|
}
|
|
|
|
}
|