|
|
|
|
<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>
|
