DIR : /home/kozerus/public_html/go/konva14_bestbugs2.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_brd(x,y) {
Konva.Image.fromURL(itemURL, function (image) {
layer.add(image);
image.position(stage.getPointerPosition());
image.draggable(true);
}
function createShape_stn(t,x,y) {
}
function createShape_bowls() {
}
function createShape_lids() {
}
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>
<!--
<div id="drag-items">
<img src="imgs/yoda.jpg" draggable="true" />
<img src="imgs/darth-vader.jpg" draggable="true" />
-->
<!--
<div id=div_equipment hidden>
<hr color=goldenrod>
<img src="/imgs/btn/ko.png" id=img_ko draggable="true" height=25 />
       
<img src="/imgs/btn/kob.png" id=img_kob draggable="true" height=25 />
   
<img src="/imgs/btn/koeyeb.png" id=img_koeyeb draggable="true" height=25 />
<img src="/imgs/btn/koeye.png" id=img_koeye draggable="true" height=25 />
<img src="/imgs/btn/koeyew.png" id=img_koeyew draggable="true" height=25 />
   
<img src="/imgs/btn/kow.png" id=img_kow draggable="true" height=25 />
       
<img src="/imgs/btn/ok.png" id=img_ok draggable="true" height=25 />
<hr color=goldenrod>
<img src="/go/imgs/bowls/bowlb.png" id=img_bowlb draggable="true" height=100 width=100 />
<img src="/go/imgs/bowls/lidb.png" id=img_lidb draggable="true" height=50 width=50 />
   
<img src="/go/imgs/bowls/bowlw.png" id=img_bowlb draggable="true" height=100 width=100 />
<img src="/go/imgs/bowls/lidw.png" id=img_lidw draggable="true" height=50 width=50 />
<hr color=goldenrod>
<img src="/go/dgs/images/50/b_b.gif" id=img_w draggable="true" />
<img src="/go/dgs/images/50/b_w.gif" id=img_w draggable="true" />
<img src="/go/dgs/images/50/bb.gif" id=img_w draggable="true" />
<img src="/go/dgs/images/50/bc.gif" id=img_w draggable="true" />
<img src="/go/dgs/images/50/bm.gif" id=img_w draggable="true" />
<img src="/go/dgs/images/50/bs.gif" id=img_w draggable="true" />
<img src="/go/dgs/images/50/bt.gif" id=img_w draggable="true" />
<hr color=goldenrod>
<img src="/go/dgs/images/50/w_w.gif" id=img_w draggable="true" />
<img src="/go/dgs/images/50/w_b.gif" id=img_w draggable="true" />
<img src="/go/dgs/images/50/wb.gif" id=img_w draggable="true" />
<img src="/go/dgs/images/50/wc.gif" id=img_w draggable="true" />
<img src="/go/dgs/images/50/wm.gif" id=img_w draggable="true" />
<img src="/go/dgs/images/50/ws.gif" id=img_w draggable="true" />
<img src="/go/dgs/images/50/wt.gif" id=img_w draggable="true" />
<hr color=goldenrod>
<img src="/go/dgs/images/wood1.gif" id=img_brd draggable="true" height=24 width=25 />
<img src="/go/dgs/images/wood1_ul.gif" id=img_brd draggable="true" height=24 width=25 />
<img src="/go/dgs/images/wood1_ur.gif" id=img_brd draggable="true" height=24 width=25 />
<img src="/go/dgs/images/wood1_dl.gif" id=img_brd draggable="true" height=24 width=25 />
<img src="/go/dgs/images/wood1_dr.gif" id=img_brd draggable="true" height=24 width=25 />
<img src="/go/dgs/images/wood1_l.gif" id=img_brd draggable="true" height=24 width=25 />
<img src="/go/dgs/images/wood1_r.gif" id=img_brd draggable="true" height=24 width=25 />
<img src="/go/dgs/images/wood1_d.gif" id=img_brd draggable="true" height=24 width=25 />
<img src="/go/dgs/images/wood1.gif" id=img_brd draggable="true" height=24 width=25 />
<hr color=goldenrod>
</div id=div_equipment_end>
-->
</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