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.
79 lines
1.4 KiB
79 lines
1.4 KiB
import Konva from "konva";
|
|
|
|
export default function (width,height,callback){
|
|
console.log(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 rect=new Konva.Rect({
|
|
x:0,
|
|
y:0,
|
|
width:_width,
|
|
height:_height,
|
|
stroke:'black',
|
|
strokeWidth:1,
|
|
})
|
|
|
|
group.add(rect)
|
|
|
|
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
|
|
})
|
|
group.on('click touchstart',function (){
|
|
console.log(item)
|
|
callback(index,item.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:item.name,
|
|
align:'center',
|
|
verticalAlign:'middle',
|
|
fontSize:20
|
|
})
|
|
group.add(text)
|
|
|
|
return group
|
|
}
|
|
|
|
return {
|
|
container,dw
|
|
}
|
|
|
|
}
|