diff options
| author | Jakob Odersky <jodersky@gmail.com> | 2014-05-11 01:50:09 +0200 |
|---|---|---|
| committer | Jakob Odersky <jodersky@gmail.com> | 2014-05-11 01:50:09 +0200 |
| commit | 9c6e8430f2eae3413ec7d858b5920d70ba14db32 (patch) | |
| tree | cb27b0d05b44e4260eaaa3bf308a1e83d6473b5e /app/index.html | |
| parent | a0c7682412ad701a7300e6ec29ba90d90999657e (diff) | |
| download | playGraph-9c6e8430f2eae3413ec7d858b5920d70ba14db32.tar.gz playGraph-9c6e8430f2eae3413ec7d858b5920d70ba14db32.tar.bz2 playGraph-9c6e8430f2eae3413ec7d858b5920d70ba14db32.zip | |
wip - paperjs directive
Diffstat (limited to 'app/index.html')
| -rw-r--r-- | app/index.html | 53 |
1 files changed, 49 insertions, 4 deletions
diff --git a/app/index.html b/app/index.html index bfbc92e..b2d919d 100644 --- a/app/index.html +++ b/app/index.html @@ -7,25 +7,70 @@ <script type="text/javascript" src="lib/paper-full.js"></script> <script src="lib/angular.js"></script> <script src="js/app.js" ></script> - <script src="js/controllers.js" ></script> <script src="js/services.js" ></script> + <script src="js/directives.js" ></script> + <script src="js/controllers.js" ></script> + </head> <body ng-app="playGraph" ng-controller="pointCtrl"> + <div data-pg-epicness data-points="points"> </div> + <ul> + <li data-ng-repeat="point in points">( {{point.x}} , {{point.y}} )</li> + </ul> + + <button ng-click="foo()">Add button</button> + <!-- <svg id="world" width="500" height="500"> <circle data-ng-repeat="point in points" cx="{{point.x}}" cy="{{point.y}}" r="10" stroke="gray" stroke-width="2" fill="{{getColor(point)}}"></circle> <line data-ng-repeat="tuple in line | sliding2" x1="{{tuple[0].x}}" y1="{{tuple[0].y}}" x2="{{tuple[1].x}}" y2="{{tuple[1].y}}" style="stroke:rgb(255,0,0);stroke-width:2" /> </svg>--> - - <canvas id="canvas" resize ng-mousedown="mouseDown($event)" ng-mousemove="mouseDrag($event)" ng-mouseup="mouseUp()"></canvas> +<!-- + <a href="#" onclick="tool1.activate();">Lines</a> + <a href="#" onclick="tool2.activate();">Clouds</a> + <canvas id="myCanvas" resize></canvas> <ul> <li data-ng-repeat="song in playlist"> {{song}} </li> </ul> + <script> + + // Keep global references to both tools, so the HTML + // links below can access them. + var tool1, tool2; + paper.setup('myCanvas'); + + // Create two drawing tools. + // tool1 will draw straight lines, + // tool2 will draw clouds. + + // Both share the mouseDown event: + var path; + function onMouseDown(event) { + path = new paper.Path(); + path.strokeColor = 'black'; + path.add(event.point); + } + + tool1 = new paper.Tool(); + tool1.onMouseDown = onMouseDown; + + tool1.onMouseDrag = function(event) { + path.add(event.point); + } + + tool2 = new paper.Tool(); + tool2.minDistance = 20; + tool2.onMouseDown = onMouseDown; - <p>Nothing here {{}}</p> + tool2.onMouseDrag = function(event) { + // Use the arcTo command to draw cloudy lines + path.arcTo(event.point); + } + </script> + --> </body> </html> |