javascript
/
tentone.escher.js
Mirror von https://github.com/tentone/escher.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
							<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>diagram.js</title>
</head>
<body>
	<script type="text/javascript" src="../build/diagram.js"></script>

	<script type="text/javascript">

		// Setup the display canvas
		var canvas = document.createElement("canvas");
		canvas.style.position = "absolute";
		canvas.style.width = "100%";
		canvas.style.height = "100%";
		canvas.style.top = "0px";
		canvas.style.left = "0px";
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;

		canvas.oncontextmenu = function(event)
		{
			event.preventDefault();
			return false;
		};
		document.body.appendChild(canvas);

		window.onresize = function()
		{
			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight;
		};

		// Create the diagram
		var group = new Diagram.Object2D();

		var image = new Diagram.Image("grid.png");
		image.position.set(-300, -400);
		image.scale.set(1, 1);
		image.layer = 5;
		group.add(image);

		var background = new Diagram.Image("hexagon.jpg");
		background.position.set(-300, -400);
		background.scale.set(1, 1);
		background.layer = -2;
		group.add(background);

		var boxA = new Diagram.Box(true);
		group.add(boxA);

		var text = new Diagram.Text();
		text.text = "diagram.js";
		boxA.add(text);

		var boxB = new Diagram.Box();
		boxB.position.set(100, 100);
		group.add(boxB);
		
		var circle = new Diagram.Circle();
		circle.radius = 40;
		circle.position.set(300, 0);
		group.add(circle);

		var line = new Diagram.Line();
		line.from = boxA.position;
		line.to = boxB.position;
		line.layer = -1;
		group.add(line);

		var line = new Diagram.Line();
		line.from = boxA.position;
		line.to = circle.position;
		line.layer = -1;
		group.add(line);

		var line = new Diagram.Line();
		line.from = boxB.position;
		line.to = circle.position;
		line.layer = -1;
		group.add(line);

		var viewport = new Diagram.Viewport();

		var renderer = new Diagram.Renderer(canvas);

		// Update and render the diagram
		function loop()
		{	
			group.rotation += 0.001;
			image.rotation += 0.01;

			renderer.update(group, viewport);
			renderer.render(group, viewport);

			requestAnimationFrame(loop);
		}

		loop();
	</script>
</body>
</html>