robshep · August 29, 2015 14:21
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <!-- saved from url=(0065)http://konvajs.github.io/downloads/code/sandbox/Star_Spinner.html -->
 <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
  <title>Konva WheelSpin Demo</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      background-color: #F0F0F0;
    }
  </style>
 </head>
 <body>



  <div id="container" style="width: 100%;  height:100%; position:fixed">
  </div>  
    
  <script src="https://cdn.rawgit.com/konvajs/konva/0.9.0/konva.min.js"></script>

  <script>

    var container = document.getElementById("container")

    var width = container.offsetWidth;
    var height = container.offsetHeight;

    Konva.angleDeg = false;



    function animate(animatedLayer, wheelGroup, frame) {
        // 20% slow down per second
        var angularFriction = 0.000000000001;
        var angularVelocityChange = wheelGroup.angularVelocity * frame.timeDiff * (1 - angularFriction) / 1000;
        wheelGroup.angularVelocity -= angularVelocityChange;

        if(wheelGroup.controlled) {
            wheelGroup.angularVelocity = (wheelGroup.getRotation() - wheelGroup.lastRotation) * 1000 / frame.timeDiff;
            wheelGroup.lastRotation = wheelGroup.getRotation();
        }
        else {
            wheelGroup.rotate(frame.timeDiff * wheelGroup.angularVelocity / 1000);
            wheelGroup.lastRotation = wheelGroup.getRotation();
            if(wheelGroup.angularVelocity <= 0.05){
              anim.stop();
              return false;
            }
        }

        


    }

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

    var animatedLayer = new Konva.Layer();


    var diaRatio = 1;
    var radius = (width/2 * diaRatio)

    var segmentHeight =  Math.sqrt( Math.pow(radius,2) - ( Math.pow(width,2) / 4 ) )

    

    var wheelBox = new Konva.Group({
        x: radius,//(width/2),
        y: radius,//(height+segmentHeight),
        offset:{
          x:radius,
          y:radius
        }
    });

    var disc = new Konva.Circle({
        x: radius,
        y: radius,
        radius: radius,
        stroke: '#FFFFFF',
        fill: '#FFFFFF',
        strokeWidth: 1,
        lineJoin: 'round',
        shadowOffset: 5,
        shadowBlur: 10,
        shadowColor: 'black',
        shadowOpacity: 0.5,
        opacity: 0.8
    });

    wheelBox.add(disc);

    var nItems = 45;
    var hyp = radius; 

    for(var i=0;i<nItems;i++){

        var angle = ((2*Math.PI)/nItems)*i;

        var x = Math.sin(angle) * hyp;
        var y = Math.cos(angle) * hyp;

        var item = new Konva.Circle({
            x: radius + x,
            y: radius + y,
            radius: 10,
            stroke: '#005500',
            fill: '#' + (10*i).toString(16) + '' + (15*i).toString(16) + '' + (12*i).toString(16),
            strokeWidth: 2,
            lineJoin: 'round',
            shadowOffset: 5,
            shadowBlur: 10,
            shadowColor: 'black',
            shadowOpacity: 0.5,
            opacity: 0.8
        });

        wheelBox.add(item);
    }

    // custom properties
    wheelBox.lastRotation = 0;
    wheelBox.angularVelocity = 0.3;
    wheelBox.controlled = false;



    wheelBox.on('mousedown touchstart', function(evt) {
        this.angularVelocity = 0;
        this.controlled = true;
        lastRot = 0;
        anim.start();
    });

    animatedLayer.add(wheelBox);

    var center = new Konva.Circle({
        x: width / 2,
        y: height,
        radius: 3,
        fill: '#555'
    });

    animatedLayer.add(center);

    // add listeners to container
    wheelBox.on('mouseup touchend', function() {
        wheelBox.controlled = false;
        lastrot = 0;
    });


    var lastRot = 0;

    wheelBox.on('mousemove touchmove', function(evt) {


        if(wheelBox.controlled) {
            var mousePos = {x:evt.evt.x, y:evt.evt.y};
            var x = wheelBox.getX() - mousePos.x;
            var y = wheelBox.getY() - mousePos.y;

            var angleFromOrigin = 0;//( (180/Math.PI) * Math.atan2(yDisp, xDisp) ) + ( yDisp < 0 ? 360 : 0 )
            
            var rot = (0.5 * Math.PI + Math.atan(y / x) ) + ( x < 0 ? Math.PI : 0 ) 

            if( lastRot == 0 ){
                lastRot = rot;
            }
            else {
              var delta = rot - lastRot;
              lastRot = rot;
              wheelBox.rotate(delta)
            }
        }
    });

    stage.add(animatedLayer);


    var anim = new Konva.Animation(function(frame) {
        animate(animatedLayer, wheelBox, frame);
    }, animatedLayer);

    // wait one second and then spin the wheel
    setTimeout(function() {
        anim.start();
    });



  </script>


 </body></html>
	<!DOCTYPE html>
	<!-- saved from url=(0065)http://konvajs.github.io/downloads/code/sandbox/Star_Spinner.html -->
	<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<title>Konva WheelSpin Demo</title>
	<style>
	body {
	margin: 0;
	overflow: hidden;
	background-color: #F0F0F0;
	}
	</style>
	</head>
	<body>



	<div id="container" style="width: 100%; height:100%; position:fixed">
	</div>

	<script src="https://cdn.rawgit.com/konvajs/konva/0.9.0/konva.min.js"></script>

	<script>

	var container = document.getElementById("container")

	var width = container.offsetWidth;
	var height = container.offsetHeight;

	Konva.angleDeg = false;



	function animate(animatedLayer, wheelGroup, frame) {
	// 20% slow down per second
	var angularFriction = 0.000000000001;
	var angularVelocityChange = wheelGroup.angularVelocity * frame.timeDiff * (1 - angularFriction) / 1000;
	wheelGroup.angularVelocity -= angularVelocityChange;

	if(wheelGroup.controlled) {
	wheelGroup.angularVelocity = (wheelGroup.getRotation() - wheelGroup.lastRotation) * 1000 / frame.timeDiff;
	wheelGroup.lastRotation = wheelGroup.getRotation();
	}
	else {
	wheelGroup.rotate(frame.timeDiff * wheelGroup.angularVelocity / 1000);
	wheelGroup.lastRotation = wheelGroup.getRotation();
	if(wheelGroup.angularVelocity <= 0.05){
	anim.stop();
	return false;
	}
	}




	}

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

	var animatedLayer = new Konva.Layer();


	var diaRatio = 1;
	var radius = (width/2 * diaRatio)

	var segmentHeight = Math.sqrt( Math.pow(radius,2) - ( Math.pow(width,2) / 4 ) )



	var wheelBox = new Konva.Group({
	x: radius,//(width/2),
	y: radius,//(height+segmentHeight),
	offset:{
	x:radius,
	y:radius
	}
	});

	var disc = new Konva.Circle({
	x: radius,
	y: radius,
	radius: radius,
	stroke: '#FFFFFF',
	fill: '#FFFFFF',
	strokeWidth: 1,
	lineJoin: 'round',
	shadowOffset: 5,
	shadowBlur: 10,
	shadowColor: 'black',
	shadowOpacity: 0.5,
	opacity: 0.8
	});

	wheelBox.add(disc);

	var nItems = 45;
	var hyp = radius;

	for(var i=0;i<nItems;i++){

	var angle = ((2Math.PI)/nItems)i;

	var x = Math.sin(angle) * hyp;
	var y = Math.cos(angle) * hyp;

	var item = new Konva.Circle({
	x: radius + x,
	y: radius + y,
	radius: 10,
	stroke: '#005500',
	fill: '#' + (10i).toString(16) + '' + (15i).toString(16) + '' + (12*i).toString(16),
	strokeWidth: 2,
	lineJoin: 'round',
	shadowOffset: 5,
	shadowBlur: 10,
	shadowColor: 'black',
	shadowOpacity: 0.5,
	opacity: 0.8
	});

	wheelBox.add(item);
	}

	// custom properties
	wheelBox.lastRotation = 0;
	wheelBox.angularVelocity = 0.3;
	wheelBox.controlled = false;



	wheelBox.on('mousedown touchstart', function(evt) {
	this.angularVelocity = 0;
	this.controlled = true;
	lastRot = 0;
	anim.start();
	});

	animatedLayer.add(wheelBox);

	var center = new Konva.Circle({
	x: width / 2,
	y: height,
	radius: 3,
	fill: '#555'
	});

	animatedLayer.add(center);

	// add listeners to container
	wheelBox.on('mouseup touchend', function() {
	wheelBox.controlled = false;
	lastrot = 0;
	});


	var lastRot = 0;

	wheelBox.on('mousemove touchmove', function(evt) {


	if(wheelBox.controlled) {
	var mousePos = {x:evt.evt.x, y:evt.evt.y};
	var x = wheelBox.getX() - mousePos.x;
	var y = wheelBox.getY() - mousePos.y;

	var angleFromOrigin = 0;//( (180/Math.PI) * Math.atan2(yDisp, xDisp) ) + ( yDisp < 0 ? 360 : 0 )

	var rot = (0.5 * Math.PI + Math.atan(y / x) ) + ( x < 0 ? Math.PI : 0 )

	if( lastRot == 0 ){
	lastRot = rot;
	}
	else {
	var delta = rot - lastRot;
	lastRot = rot;
	wheelBox.rotate(delta)
	}
	}
	});

	stage.add(animatedLayer);


	var anim = new Konva.Animation(function(frame) {
	animate(animatedLayer, wheelBox, frame);
	}, animatedLayer);

	// wait one second and then spin the wheel
	setTimeout(function() {
	anim.start();
	});



	</script>


	</body></html>