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

/home/kozerus/public_html/go

<!--
Konva Image Demo view raw
	-->

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

<body bgcolor=linen>
	<h1>konva_images</h1>
	<h2>container_konva_images</h2>
	<div id="container_konva_images"></div>
	<h3>container_konva_images</h3>
	<hr color=goldenrod>
	<div id="container"></div>
	<hr color=goldenrod>
	<hr color=goldenrod>
	<hr color=goldenrod>
	<hr color=goldenrod>
	<hr color=goldenrod>
	<hr color=goldenrod>
	<hr color=goldenrod>
	<hr color=goldenrod>
	<script id=script_konva_images>
		var width = window.innerWidth;
		var height = window.innerHeight;


//		var container = "container";
		var container = "container_konva_images";
		var stage = new Konva.Stage({
			container: container,
			width: width,
			height: height,
			});

	var layer = new Konva.Layer();
	stage.add(layer);


// main API:
	var imageObj = new Image();
	imageObj.onload = function () {
		var yoda = new Konva.Image({
			x: 50,
			y: 50,
			image: imageObj,
			width: 106,
			height: 118,
			});

// add the shape to the layer
		layer.add(yoda);
		};
	imageObj.src = '/fb/pages/tn/tn_1.png';

// alternative API:
	Konva.Image.fromURL('/fb/pages/1.jpg', function (darthNode) {
        darthNode.setAttrs({
		x: 200,
		y: 50,
		scaleX: 0.05,
		scaleY: 0.05,
		});
        layer.add(darthNode);
      });
    </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