2025-08-19 14:15:14 +12:00
|
|
|
<!doctype html>
|
2021-05-03 17:09:18 -05:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8" />
|
2025-09-01 09:06:07 -05:00
|
|
|
<title>KonvaJS Blur Comparison Sandbox</title>
|
2021-05-03 17:09:18 -05:00
|
|
|
<meta
|
|
|
|
|
name="viewport"
|
|
|
|
|
content="width=device-width, initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0, maximum-scale=1.0"
|
|
|
|
|
/>
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
margin: 0;
|
2025-08-23 02:50:50 -05:00
|
|
|
padding: 20px;
|
|
|
|
|
font-family: Arial, sans-serif;
|
|
|
|
|
background: #f0f0f0;
|
2021-05-03 17:09:18 -05:00
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
2025-09-01 09:06:07 -05:00
|
|
|
<div id="container"></div>
|
2021-10-22 10:09:34 -05:00
|
|
|
<script type="module">
|
|
|
|
|
import Konva from '../src/index.ts';
|
2022-03-21 13:49:55 -05:00
|
|
|
|
2025-09-01 09:06:07 -05:00
|
|
|
const stage = new Konva.Stage({
|
|
|
|
|
container: 'container',
|
|
|
|
|
width: window.innerWidth,
|
|
|
|
|
height: window.innerHeight,
|
2022-08-05 10:35:43 -05:00
|
|
|
});
|
2023-07-26 12:10:00 -05:00
|
|
|
|
2025-09-01 09:06:07 -05:00
|
|
|
const layer = new Konva.Layer();
|
|
|
|
|
stage.add(layer);
|
2023-07-26 12:10:00 -05:00
|
|
|
|
2025-11-21 12:29:09 -05:00
|
|
|
// const circle = new Konva.Circle({
|
|
|
|
|
// x: 100,
|
|
|
|
|
// y: 100,
|
|
|
|
|
// radius: 10,
|
|
|
|
|
// fill: 'red',
|
|
|
|
|
// });
|
|
|
|
|
// layer.add(circle);
|
|
|
|
|
// throw new Error('test');
|
|
|
|
|
|
2025-11-20 12:44:35 -05:00
|
|
|
// Given gridRows and gridCols, compute maximum possible radius and position circles
|
|
|
|
|
const gridRows = 200;
|
|
|
|
|
const gridCols = 200;
|
|
|
|
|
const width = window.innerWidth;
|
|
|
|
|
const height = window.innerHeight;
|
|
|
|
|
|
|
|
|
|
// Calculate spacing and radius so circles fit entire window
|
|
|
|
|
// There are (gridCols - 1) spaces between centers horizontally, and (gridRows - 1) vertically
|
|
|
|
|
// The available width is "width", so (gridCols) circles and (gridCols-1) spaces between
|
|
|
|
|
// The diameter must fit: gridCols * diameter + (gridCols - 1) * gap <= width
|
|
|
|
|
// But to maximize, gap should equal to at least 0, so best layout is circles tangent
|
|
|
|
|
|
|
|
|
|
// So the max diameter horizontally is width / gridCols
|
|
|
|
|
// Likewise for vertical
|
|
|
|
|
const cellWidth = width / gridCols;
|
|
|
|
|
const cellHeight = height / gridRows;
|
|
|
|
|
const radius = Math.min(cellWidth, cellHeight) / 2;
|
|
|
|
|
|
|
|
|
|
const circles = [];
|
|
|
|
|
|
|
|
|
|
// Create grid of circles - centers in each cell's center
|
|
|
|
|
for (let row = 0; row < gridRows; row++) {
|
|
|
|
|
for (let col = 0; col < gridCols; col++) {
|
|
|
|
|
const cx = cellWidth * col + cellWidth / 2;
|
|
|
|
|
const cy = cellHeight * row + cellHeight / 2;
|
|
|
|
|
const c = new Konva.Circle({
|
|
|
|
|
x: cx,
|
|
|
|
|
y: cy,
|
|
|
|
|
radius: radius,
|
|
|
|
|
fill: Konva.Util.getRandomColor(),
|
|
|
|
|
id: `circle-${row}-${col}`,
|
|
|
|
|
});
|
|
|
|
|
circles.push({
|
|
|
|
|
node: c,
|
|
|
|
|
x: cx,
|
|
|
|
|
y: cy,
|
|
|
|
|
row,
|
|
|
|
|
col,
|
|
|
|
|
});
|
|
|
|
|
layer.add(c);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
layer.draw();
|
|
|
|
|
|
|
|
|
|
// Test hits at each center
|
|
|
|
|
for (const cInfo of circles) {
|
|
|
|
|
const { node, x, y } = cInfo;
|
|
|
|
|
const hit = stage.getIntersection({ x, y });
|
|
|
|
|
if (hit !== node) {
|
|
|
|
|
const gotId = hit ? hit.id && hit.id() : null;
|
|
|
|
|
console.error(
|
|
|
|
|
`Hit test failed at (${x},${y}): expected id=${node.id()}, got id=${gotId}`
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
console.log('Hit test grid check complete.');
|
2021-10-22 10:09:34 -05:00
|
|
|
</script>
|
2021-05-03 17:09:18 -05:00
|
|
|
</body>
|
|
|
|
|
</html>
|
