JSFiddle - React, Tailwind, and code Playground

by divyesh25487

HTML

<!doctype html>
<html> 
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" > 
    <meta name="apple-mobile-web-app-capable" content="yes" >
</head>
<body>
    <div id="container"><!-- --></div>
</body>
	<script type="text/javascript" language="javascript" src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.0.min.js"></script>
</html>

CSS

*{
			margin: 0;
			padding: 0;
		}
		
		body{
			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
			font-size: 14px;
		}
		
		#container{
		    position: absolute;
			left: 20px;
			top: 20px;
			border: 1px solid black;
			cursor: default;
			
		}

JavaScript

var isZoom=1;
var stage=new Kinetic.Stage({
				container:'container',
				width:700,
				height:700,
				id:'kineticstage',
				name:'kineticstage'
				});
				
	var layer=new Kinetic.Layer({});
	
	var group = new Kinetic.Group({
		width:700,
		height:700,
		draggable: true
	});
	layer.add(group);	

	
	// set the images
	var pages = ["http://197.242.159.63/reader/demo/img/face.jpg"];

	var loadedPage = 0;
	function loadPage(pageno){
		var imageObj = new Image();
		imageObj.onload = function() {
			var kimage = new Kinetic.Image({
				x: 0,
				y: 0,
				image: imageObj,
				width:700,
				height:700
			});
			
			// add to layer
			group.add(kimage);
		    stage.add(layer);
		};

		// load the page image
		imageObj.src = pages[pageno - 1];
	}
	
	// page 1
	loadPage(1);


    var tween = new Kinetic.Tween({
        node: group,
        duration: 1.0,
        rotation:0,
        scaleX: 1.5,
        scaleY: 1.5,
        easing:Kinetic.Easings.EaseInOut
    });

    group.on('dblclick dbltap',function(e){
        if(isZoom == 1){
            tween.play();
        }
        else{
            tween.reverse();
            group.setX(0);
            group.setY(0);
        }
        layer.batchDraw();
        isZoom = (isZoom>0) ? -1 : 1;
    });