diff options
| author | Jakob Odersky <jodersky@gmail.com> | 2014-05-10 22:10:04 +0200 |
|---|---|---|
| committer | Jakob Odersky <jodersky@gmail.com> | 2014-05-10 22:10:04 +0200 |
| commit | a0c7682412ad701a7300e6ec29ba90d90999657e (patch) | |
| tree | bdca82ef8810b2cd1dbae50faee1bc1ddd641673 | |
| parent | aa232c0366ff5d46769a4425c72690fdceb77fdf (diff) | |
| download | playGraph-a0c7682412ad701a7300e6ec29ba90d90999657e.tar.gz playGraph-a0c7682412ad701a7300e6ec29ba90d90999657e.tar.bz2 playGraph-a0c7682412ad701a7300e6ec29ba90d90999657e.zip | |
stash
| -rw-r--r-- | app/index.html | 7 | ||||
| -rw-r--r-- | app/js/controllers.js | 105 |
2 files changed, 109 insertions, 3 deletions
diff --git a/app/index.html b/app/index.html index 6bf7fc0..bfbc92e 100644 --- a/app/index.html +++ b/app/index.html @@ -4,18 +4,21 @@ <meta charset="utf-8"> <title>My HTML File</title> <link rel="stylesheet" href="css/app.css"> + <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/filters.js" ></script> </head> <body ng-app="playGraph" ng-controller="pointCtrl"> +<!-- <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> + </svg>--> + + <canvas id="canvas" resize ng-mousedown="mouseDown($event)" ng-mousemove="mouseDrag($event)" ng-mouseup="mouseUp()"></canvas> <ul> <li data-ng-repeat="song in playlist"> {{song}} diff --git a/app/js/controllers.js b/app/js/controllers.js index e79dfa9..80303ab 100644 --- a/app/js/controllers.js +++ b/app/js/controllers.js @@ -3,6 +3,8 @@ /* Controllers */ var p = new Point(1,2); + + app.controller('pointCtrl', function($scope, $http, pathService){ var constList = [ {x: 10, y:20}, @@ -16,7 +18,7 @@ app.controller('pointCtrl', function($scope, $http, pathService){ var playlist = pathService.computePlaylist(dummyPoints,constList, 60); - $scope.line=constList; +// $scope.line=constList; $scope.points=dummyPoints; $scope.playlist=playlist; @@ -27,6 +29,107 @@ app.controller('pointCtrl', function($scope, $http, pathService){ return "red" } } + + + // Get a reference to the canvas object + var canvas = document.getElementById('canvas'); + // Create an empty project and a view for the canvas: + paper.setup(canvas); + // Create a Paper.js Path to draw a line into it: + var path = new paper.Path(); + + + // Give the stroke a color + path.strokeColor = 'black'; + var start = new paper.Point(100, 100); + var textItem = new paper.PointText({ + content: 'Click and drag to draw a line.', + point: new Point(20, 30), + fillColor: 'black', + }); + + // Move to start and draw a line from there + path.moveTo(start); + // Note that the plus operator on Point objects does not work + // in JavaScript. Instead, we need to call the add() function: + path.lineTo(start.add([ 200, -50 ])); + // Draw the view now: + paper.view.draw(); + + + $scope.mouseDown = function(event){ + console.log(event); + if (path) { + path.selected = false; + } + + // Create a new path and set its stroke color to black: + path = new paper.Path({ + segments: [new paper.Point(event.x, event.y)], + strokeColor: 'black', + // Select the path, so we can see its segment points: + fullySelected: true + }); + }; + + $scope.mouseDrag = function(event){ + path.add(new paper.Point(event.x, event.y)); + + // Update the content of the text item to show how many + // segments it has: + textItem.content = 'Segment count: ' + path.segments.length; + }; + +$scope.mouseUp = function(){ + var segmentCount = path.segments.length; + + var points = Array(); + + // When the mouse is released, simplify it: + path.simplify(10); + + for(i=0; i<path._segments.length; i++) + { + points.push({'x' : path._segments[i]._point.x, 'y' : path._segments[i]._point.y}); + } + + console.log(points); + + var pointsAsString = points.map(function(o){return o.x+","+o.y}); + + // Select the path, so we can see its segments: + path.fullySelected = true; + + textItem.content = pointsAsString.join(' ; '); + }; + +/* + + + var path; + + + + + + + $scope.mouseDown = function(event){ + if (path) { + path.selected = false; + } + + // Create a new path and set its stroke color to black: + path = new paper.Path({ + segments: [event.point], + strokeColor: 'black', + // Select the path, so we can see its segment points: + fullySelected: true + }); + }; + paper.install(window); + var canvas = document.getElementById('myCanvas'); + paper.setup('canvas'); + */ |