DIR : /home/kozerus/public_html/go/konva11.html
/home/kozerus/public_html/go
Konva 20000 Nodes Demo
view raw
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/konva@8.3.0/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Interactive Scatter Plot with 20,000 Nodes Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div id="container_tooltip"></div>
<script>
var width = window.innerWidth;
var height = window.innerHeight;
function addNode(obj, layer) {
var node = new Konva.Circle({
x: obj.x,
y: obj.y,
radius: 20,
// radius: 100,
fill: obj.color,
id: obj.id,
});
layer.add(node);
}
var stage = new Konva.Stage({
container: 'container_tooltip',
width: width,
height: height,
});
var tooltipLayer = new Konva.Layer();
var dragLayer = new Konva.Layer();
var tooltip = new Konva.Label({
opacity: 0.75,
visible: false,
listening: false,
});
tooltip.add(
new Konva.Tag({
fill: 'black',
pointerDirection: 'down',
pointerWidth: 10,
pointerHeight: 10,
lineJoin: 'round',
shadowColor: 'black',
shadowBlur: 10,
shadowOffsetX: 10,
shadowOffsetY: 10,
shadowOpacity: 0.2,
})
);
tooltip.add(
new Konva.Text({
text: '',
fontFamily: 'Calibri',
fontSize: 18,
padding: 5,
fill: 'white',
})
);
tooltipLayer.add(tooltip);
// build data
var data = [];
// var colors = ['red', 'orange', 'cyan', 'green', 'blue', 'purple'];
// for (var n = 0; n < 1000; n++) {
// var x = Math.random() * width;
// var y = height + Math.random() * 200 - 100 + (height / width) * -1 * x;
// data.push({
// x: x,
// y: y,
// id: n,
// color: colors[Math.round(Math.random() * 5)],
// });
// }
var colors = ['red', 'orange', 'cyan', 'green', 'blue', 'purple'];
var colors = ['black', 'white', 'black', 'white', 'black', 'white'];
var t = 0;
var bx=0; var by=0; var bx0=100; var by0=100; var bdx=50; var bdy=50;
var bxlim = 19; var bylim = 19;
for (var n = 0; n < 500; n++) {
// var x = n * width;
// var y = n * height;
// bx=bx+1;
// if( bx > bxlim ) {
// by=by+1;
// if( by > bylim ) {
// bx=0; by=0;
// }
// }
// x=(bx*bdx)+bx0;
// y=(by*bdy)+by0;
var t = n;
// var x = n * bdx;
// var y = n * bdy;
// if( isOdd(n)) { var color = 'black'; }
// if( bx < bxlim ) { bx=bx+1; }
// else {
// bx = 0;
// by=by+1;
// }
x = (bx * bdx) + bx0;
y = (by * bdy) + by0;
bx=bx+1; if( bx>bxlim ) { bx=0; by=by+1; }
// var x = Math.random() * width;
// var y = height + Math.random() * 200 - 100 + (height / width) * -1 * x;
// color: colors[Math.round(Math.random() * 5)],
data.push({
x: x,
y: y,
id: n,
color: colors[Math.round(Math.random() * 5)],
});
}
// render data
var nodeCount = 0;
var layer = new Konva.Layer();
for (var n = 0; n < data.length; n++) {
addNode(data[n], layer);
nodeCount++;
// if (nodeCount >= 1000) {
if (nodeCount >= 100) {
nodeCount = 0;
stage.add(layer);
layer = new Konva.Layer();
}
}
stage.add(dragLayer);
stage.add(tooltipLayer);
stage.on('mouseover mousemove dragmove', function (evt) {
var node = evt.target;
// update tooltip
if (node) {
var mousePos = node.getStage().getPointerPosition();
tooltip.position({
x: mousePos.x,
y: mousePos.y - 5,
});
tooltip
.getText()
.text('node: ' + node.id() + ', color: ' + node.fill() + ' t: '+t+' ('+bx+','+by+')'
);
tooltip.show();
}
});
stage.on('mouseout', function (evt) {
tooltip.hide();
});
var startLayer;
stage.on('mousedown', function (evt) {
var shape = evt.target;
if (shape) {
startLayer = shape.getLayer();
shape.moveTo(dragLayer);
// manually trigger drag and drop
shape.startDrag();
}
});
stage.on('mouseup', function (evt) {
var shape = evt.target;
if (shape) { shape.moveTo(startLayer); }
});
</script>
</body>
</html>
//
koh5_pano
Drag mouse to navigate.
Navigation
- Left/Right Mouse drag: Changes camera heading.
- Up/Sown Mouse drag: Changes camera pitch.
- Scroll wheel: Changes camera field of view.
- I-Key: Displays Info panel with canvas size, image size and FPS.
17.Aug.2010, Martin Wengenmayer