DIR : /home/kozerus/public_html/go/konva14_20211209_1230.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>
<script id=script_startup_konva14>
function startup_konva14(args) {
alert( "MSG_100 startup_konva14 args="+args );
htmout="done:startup_konva14";
return(htmout);
}
</script>
<script id=script_toggle>
// $('#msform').fadeOut(50);
// $('#msform').fadeIn(50);
// $(body).html($(body).html().replace('lollypops', 'marshmellows'));
function toggle(divid) {
// alert( "BUGS_37850 BEG divid="+divid );
var imgid=divid.replace("div_","img_" );
if(! document.getElementById(divid)) { return; }
var imgid=divid.replace("div_","img_" );
style_display=document.getElementById(divid).style.display;
// alert( "BUGS_37850 TOGGLE imgid="+imgid+" style_display="+style_display );
if( style_display == "none" ) {
img="<img src=/imgs/btn/koeyew.png id="+imgid+" height=50 onclick=\"toggle('"+divid+"'); return false;\" >";
// alert( "BUGS_37881 NONE img="+img );
document.getElementById(divid).style.display="inline";
document.getElementById(imgid).innerHTML=img;
document.getElementById(imgid).src="/imgs/btn/koeyew.png";
// $("#img_ajax_ko").html(img);
// $("#img_ajax_ko").attr("src","/imgs/btn/koeyew.png");
// htmimg=document.getElementById(imgid).innerHTML;
// alert( "BUGS_37884 NONE htmimg="+htmimg );
}
else {
img="<img src=/imgs/btn/koeyeb.png id="+imgid+" height=50 onclick=\"toggle('"+divid+"'); return false;\" >";
// alert( "BUGS_37891 INLINE img="+img );
document.getElementById(divid).style.display="none";
document.getElementById(imgid).innerHTML=img;
document.getElementById(imgid).src="/imgs/btn/koeyeb.png";
// $("#img_ajax_ko").html(img);
// $("#img_ajax_ko").attr("src","/imgs/btn/koeyeb.png");
// htmimg=document.getElementById(imgid).innerHTML;
// alert( "BUGS_37893 INLINE htmimg="+htmimg );
}
}
</script>
<script id=script_random_int>
function random_int(max,min) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min +1)) + min;
}
</script>
<script id="script_geturlvars" >
// var number = geturlvars()["x"];
// var mytext = geturlvars()["text"];
// var mytext = geturlparam('text','Empty');
function geturlvars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
</script>
<script id="script_geturlparam" >
function geturlparam(parameter, defaultvalue){
var urlparameter = defaultvalue;
if(window.location.href.indexOf(parameter) > -1) {
urlparameter = getUrlVars()[parameter];
}
return urlparameter;
}
// var mytext = getUrlParam('text','Empty');
</script>
</head>
<body bgcolor=linen onload="startup_konva14(); return false;" >
<div id="container_collision"></div>
<script id=script_konva_starup >
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>
<hr color=goldenrod>
<img src=/imgs/btn/koeye.png id=img_equipment onclick="toggle('div_equipment',''); return false;" height=25>equipment
<hr color=goldenrod>
<div id=div_equipment>
<h1>div_equipment</h1>
<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