<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/[email protected]/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva 10,000 Shapes with Tooltips Stress Test Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height,
});
var circlesLayer = new Konva.Layer();
var tooltipLayer = new Konva.Layer();
var colors = [
'red',
'orange',
'yellow',
'green',
'blue',
'cyan',
'purple',
];
var colorIndex = 0;
for (var i = 0; i < 10000; i++) {
var color = colors[colorIndex++];
if (colorIndex >= colors.length) {
colorIndex = 0;
}
var randX = Math.random() * stage.width();
var randY = Math.random() * stage.height();
var circle = new Konva.Circle({
x: randX,
y: randY,
radius: 3,
fill: color,
name: i.toString(),
});
circlesLayer.add(circle);
}
var tooltip = new Konva.Text({
text: '',
fontFamily: 'Calibri',
fontSize: 12,
padding: 5,
visible: false,
fill: 'black',
opacity: 0.75,
textFill: 'white',
});
tooltipLayer.add(tooltip);
stage.add(circlesLayer);
stage.add(tooltipLayer);
circlesLayer.on('mousemove', function (e) {
var mousePos = stage.getPointerPosition();
tooltip.position({
x: mousePos.x + 5,
y: mousePos.y + 5,
});
tooltip.text(
'node: ' + e.target.name() + ', color: ' + e.target.fill()
);
tooltip.show();
});
circlesLayer.on('mouseout', function () {
tooltip.hide();
});
</script>
</body>
</html>
|