<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script src="konva.min.js"></script>
</head>
<body>
<div id="map"></div>
<script>
//todo 滚动条
//todo 可见范围渲染
//
window.onload=function (){
const width=window.innerWidth*0.996;
const height=window.innerHeight*.983
const stage = new Konva.Stage({
container: 'map', // id of container <div> *包裹舞台的DIV元素的ID
width: width,
height: height
});
const layer = new Konva.Layer();
console.time()
const cellWidth=94;
const mountGroup=new Konva.Group({
x:0,
y:0,
clip:{
x:0,
y:0,
width:width,
height:height
}
})
const totalRow=100
for (let row=0;row<totalRow;row++){
//不在可视范围内隐藏显示
const group = new Konva.Group({
// visible:row>height/25?false:true,
});
group.setAttr('customData',{
czbh:'c16-'+row
})
for (let col=0;col<20;col++){
const cell=new Konva.Rect({
x:col*cellWidth,
y:row*25,
width:cellWidth,
height:25,
stroke:'black',
strokeWidth:1,
})
const text=new Konva.Text({
x:col*cellWidth,
y:row*25,
width:cellWidth,
height:25,
lineHeight:2.5,
stroke:'black',
strokeWidth:0.1,
text:col*row,
align:'center',
})
group.add(cell)
group.add(text)
}
group.on('click', function(evt) {
console.log(evt.target)
console.log('room obj', evt.target.parent.getAttr("customData"));
});
mountGroup.add(group)
}
console.log(mountGroup)
console.timeEnd();
// const clip=mountGroup.clip({
// x:0,
// y:height,
// width:width,
// height:height
// })
mountGroup.setAttr('height',totalRow*25)
layer.add(mountGroup);
// //添加滚动条
// if (totalRow*25>height){
// const group = new Konva.Group({
// x:width-12,
// y:0,
// stroke:'gray',
// strokeWidth:0.2,
// });
// const scroll=new Konva.Rect({
// width:10,
// height:height/(totalRow*25)*10,
// fill:'gray'
// })
// group.add(scroll)
// layer.add(group)
// }
//
layer.on('wheel',(evt)=>{
const ey=-evt.evt.deltaY
const my=ey>0?10:-10
for (let i=0;i<Math.abs(100);i+=10){
const {x,y}=mountGroup.getAbsolutePosition()
if (y>=0&&ey>0){
break
}
mountGroup.move({
y:my
})
}
})
// // create our shape *创建我们的形状
// const circle = new Konva.Circle({
// x: stage.getWidth() / 2,
// y: stage.getHeight() / 2,
// radius: 70,
// fill: 'red',
// stroke: 'black',
// strokeWidth: 4
// });
//
// // add the shape to the layer *将形状添加到图层上
// layer.add(circle);
// add the layer to the stage *将图层添加到舞台上
stage.add(layer);
setTimeout(()=>{
// layer.remove()
},2000)
}
</script>
</body>
</html>