gojs/prototype_spinner.html at master · unsignedzero/gojs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
    <meta name="description" content="Go Board Test Page" />
    <meta name="robots" content="noodp" >
    <meta name="ROBOTS" content="NOINDEX">

    <link rel="shortcut icon" href="ZCS1.ico" />
    <title>GO board title prototype page</title>

    <link rel="stylesheet" type="text/css" href="CSS/reset.css" />

    <script type="application/javascript" src="LIB/kinetic-v4.7.1.min.js"></script>
  </head>
  <body>
    <div id="container"></div>
    <script>

      function drawCircle(localLayer, x, y, radius){

        x += radius;
        y += radius;

        var bendY = 240,
            arc_end = Math.sin(Math.PI/4),
            arc_mid = Math.tan(Math.PI/8);

        function drawYinYangShape(x, y, radius){

          function drawYinYangOutline(context, x, y,radius){
            //Reference
            //http://board.flashkit.com/board/showthread.php?369672-Draw-a-circle-with-quadratic-bezier-curves
            context.beginPath();
            context.moveTo(x+(radius<<1), y+radius);
            context.quadraticCurveTo(
              radius+x+radius,-arc_mid*radius+y+radius,
              arc_end*radius+x+radius,-arc_end*radius+y+radius);
            context.quadraticCurveTo(
              arc_mid*radius+x+radius,        -radius+y+radius,
                             x+radius,        -radius+y+radius);
            context.quadraticCurveTo(
             -arc_mid*radius+x+radius,        -radius+y+radius,
             -arc_end*radius+x+radius,-arc_end*radius+y+radius);
            context.quadraticCurveTo(
                     -radius+x+radius,-arc_mid*radius+y+radius,
                     -radius+x+radius,                y+radius);
            context.bezierCurveTo(
                             (radius>>1)+x,radius+y-bendY,
               ((radius   )+(radius>>1))+x,radius+y+bendY,
                             (radius<<1)+x,radius+y);
            context.closePath();
          };

          return new Kinetic.Shape({
            x: x,
            y: y,
            fill: 'black',

            drawFunc: function(context) {
              drawYinYangOutline(context, x, y, radius);
              context.fillStrokeShape(this);
            },

            offset: [x+radius,y+radius],
            drawHitFunc: function(context) {
              drawYinYangOutline(context, x, y, radius);
              context.fillStrokeShape(this);
            }
          });
        }

        var circle = drawYinYangShape(x,y,350);

        var outline = new Kinetic.Circle({
          x: x,
          y: y,
          radius: radius,
          stroke: 'black',
          strokeWidth: 2
        });

        var angularSpeed = Math.PI / 2,
            clickCount = 0;

        var anim = new Kinetic.Animation(function(frame){
            var angleDiff = clickCount*frame.timeDiff*angularSpeed /1000;
            circle.rotate(angleDiff);
          },localLayer);

        anim.start();

        //Ensures that a click on either object spins it
        circle.on('mousedown tap', function(){
          clickCount +=1;
        });

        outline.on('mousedown tap', function(){
          clickCount +=1;
        });

        outline.on('mouseover touchmove', function(){
          clickCount +=1;
        });

        localLayer.add(outline);
        localLayer.add(circle);

      }

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

      var MainLayer = new Kinetic.Layer();

      drawCircle(MainLayer, 20, 20, 350);

      stage.add(MainLayer);

    </script>
  </body>
</html>