DIR : /home/kozerus/public_html/go/konva3.html

/home/kozerus/public_html/go

Konva Elastic Stars Demo
view raw

<!DOCTYPE html>
<html>
  <head>
<!--    <script src="https://unpkg.com/konva@8.3.0/konva.min.js"></script> -->
	<script id=script_konva_min_js src=/go/js/konva_min.js></script>
	<meta charset="utf-8" />
	<title>Konva Drop DOM element Demo</title>
	<style style_dd>
		body {
			margin: 0;
			padding: 0;
			overflow: hidden;
			background-color: "linen";
//			background-color: #f0f0f0;
			}

	#container_konva3 { background-color: rgba(0, 0, 0, 0.1); }

	p { margin: 4px; }

	#drag-items img { height: 100px; }
		</style>
	</head>

<body bgcolor=linen>
<p>Drag&drop yoda into the grey area.</p>
	<div id="drag-items">
<!--
		<img src="imgs/yoda.jpg" draggable="true" />
		<img src="imgs/darth-vader.jpg" draggable="true" />
	-->
		<img src="/go/pages/tn/tn_38.png" id=img_board draggable="true" />
		<img src="/go/pages/tn/tn_55.png" id=img_bowlb draggable="true" />
		<img src="/go/pages/tn/tn_56.png" id=img_lidb draggable="true" />
		<img src="/imgs/btn/kob.png" id=img_b draggable="true" />
		<img src="/imgs/btn/kow.png" id=img_w draggable="true" />
		</div>

	<div id="container_konva3"></div>
	<script id=script_konva3>
		var width = window.innerWidth;
		var height = window.innerHeight;

		var stage = new Konva.Stage({
		container: 'container_konva3',
		width: width,
		height: height,
		});
	var layer = new Konva.Layer();
	stage.add(layer);

// what is url of dragging element?
	var itemURL = '';
	document
        .getElementById('drag-items')
        .addEventListener('dragstart', function (e) {
		itemURL = e.target.src;
		});

	var con = stage.container();
	var con = stage.container();
	con.addEventListener('dragover', function (e) {
		e.preventDefault(); // !important
		});

// now we need to find pointer position
// we can't use stage.getPointerPosition() here, because that event
// is not registered by Konva.Stage
// we can register it manually:
			con.addEventListener('drop', function (e) {
				e.preventDefault();
				stage.setPointersPositions(e);
	
				Konva.Image.fromURL(itemURL, function (image) {
				layer.add(image);
				image.position(stage.getPointerPosition());
				image.draggable(true);
				});
			});
		</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