DIR : /home/kozerus/public_html/go/konva14_orig.html
/home/kozerus/public_html/go
Konva Drag and Drop Multiple Shapes Demo
view raw
<!DOCTYPE html>
<html>
<head>
<!-- <script src="https://unpkg.com/konva@8.3.0/konva.min.js"></script> -->
<script src="/go/js/konva_min.js"></script>
<meta charset="utf-8" />
<title>Konva Drag and Drop Collision Detection Demo</title>
// <style id=style_konva14>
// body {
// margin: 0;
// padding: 0;
// overflow: hidden;
// background-color: #f0f0f0;
// }
// </style>
</head>
<body>
<div id="container_collision"></div>
<script>
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container_collision',
width: width,
height: height,
});
var layer = new Konva.Layer();
stage.add(layer);
function createShape() {
var group = new Konva.Group({
x: Math.random() * width,
y: Math.random() * height,
draggable: true,
});
var shape = new Konva.Rect({
width: 30 + Math.random() * 30,
height: 30 + Math.random() * 30,
fill: 'grey',
rotation: 360 * Math.random(),
name: 'fillShape',
});
group.add(shape);
var board = new Konva.Rect({
width: 30 + Math.random() * 30,
height: 30 + Math.random() * 30,
fill: 'burleywood',
// rotation: 360 * Math.random(),
name: 'fillBoard',
});
group.add(board);
var stones = new Konva.Rect({
width: 30 + Math.random() * 30,
height: 30 + Math.random() * 30,
fill: 'white',
// rotation: 360 * Math.random(),
name: 'fillStones',
});
group.add(stones);
var boundingBox = shape.getClientRect({ relativeTo: group });
var box = new Konva.Rect({
x: boundingBox.x,
y: boundingBox.y,
width: boundingBox.width,
height: boundingBox.height,
stroke: 'red',
strokeWidth: 1,
});
group.add(box);
return group;
}
for (var i = 0; i < 10; i++) {
layer.add(createShape());
}
layer.on('dragmove', function (e) {
var target = e.target;
var targetRect = e.target.getClientRect();
// do not check intersection with itself
layer.children.forEach(function (group) {
if (group === target) { return; }
if (haveIntersection(group.getClientRect(), targetRect)) {
group.findOne('.fillShape').fill('red');
}
else {
group.findOne('.fillShape').fill('grey');
}
});
});
function haveIntersection(r1, r2) {
return !(
r2.x > r1.x + r1.width ||
r2.x + r2.width < r1.x ||
r2.y > r1.y + r1.height ||
r2.y + r2.height < r1.y
);
}
</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