83 lines
1.5 KiB
83 lines
1.5 KiB
1 year ago
|
import Konva from "konva";
|
||
|
|
|
||
|
|
const liliao=function (width,height,dw,callback) {
|
||
|
|
|
||
|
|
const _width=width*0.4,_height=height*0.81
|
||
|
|
const container=function (){
|
||
|
|
const x=width*0.2+30,y=190
|
||
|
|
|
||
|
|
const group=new Konva.Group({
|
||
|
|
x:x,
|
||
|
|
y:y,
|
||
|
|
width:_width,
|
||
|
|
height:_height
|
||
|
|
})
|
||
|
|
|
||
|
|
const rect=new Konva.Rect({
|
||
|
|
x:0,
|
||
|
|
y:0,
|
||
|
|
width:_width,
|
||
|
|
height:_height,
|
||
|
|
stroke:'black',
|
||
|
|
strokeWidth:1,
|
||
|
|
})
|
||
|
|
|
||
|
|
group.add(rect)
|
||
|
|
|
||
|
|
for (let i = 0; i < dw.length; i++) {
|
||
|
|
const item=dw[i]
|
||
|
|
const _group=duowei(i,item.name)
|
||
|
|
group.add(_group)
|
||
|
|
}
|
||
|
|
|
||
|
|
return group
|
||
|
|
}
|
||
|
|
|
||
|
|
const duowei=function (index,str){
|
||
|
|
const alignSize=3
|
||
|
|
const width=((_width-60)/alignSize),height=208
|
||
|
|
const x=index%alignSize*width+index%alignSize*10+20,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 (){
|
||
|
|
callback(index,dw[index].list)
|
||
|
|
})
|
||
|
|
|
||
|
|
const rect=new Konva.Rect({
|
||
|
|
x:0,
|
||
|
|
y:0,
|
||
|
|
width:width,
|
||
|
|
height:height,
|
||
|
|
stroke:'black',
|
||
|
|
strokeWidth:1,
|
||
|
|
})
|
||
|
|
|
||
|
|
group.add(rect)
|
||
|
|
|
||
|
|
const text=new Konva.Text({
|
||
|
|
x:0,
|
||
|
|
y:0,
|
||
|
|
width: width,
|
||
|
|
height: height,
|
||
|
|
fill:'black',
|
||
|
|
text:str,
|
||
|
|
align:'center',
|
||
|
|
verticalAlign:'middle',
|
||
|
|
fontSize:20
|
||
|
|
})
|
||
|
|
group.add(text)
|
||
|
|
|
||
|
|
return group
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
container,duowei
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default liliao
|