changed the implementation of pin drawing. Now using jcanvas to draw the pins on image.

Nikita Kulshreshtha
1 parent 8c101bb4
Showing 2 changed files with 48 additions and 50 deletions
400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
@@ -3699,41 +3699,54 @@ function ($rootScope, Modules, $log, $location, $timeout, DataService, Authentic
     };
  
  
-    $rootScope.DrawStaticPin = function (canvasId, PinId, offsetX1, offsetY1, x, y) {
+    $rootScope.DrawStaticPinsOnImage = function (canvasId, PinId, offsetX1, offsetY1, x, y) {
+      
+        var radial = $('#' + canvasId).createGradient({
+            x1: 50, y1: 50,
+            x2: 50, y2: 50,
+            r1: 10, r2: 30,
+            c1: 'rgba(100, 50, 0,0)',
+            c2: 'rgb(216, 216, 216)'
+        });
+        $('#' + canvasId).drawLine({
+           
+            layer: true,
+            name: "Pin_" + PinId,
+            groups: ["Pin_" + PinId],
+            strokeStyle: 'black',
+            strokeWidth: 2,
+            x1: offsetX1, y1: offsetY1,
+             x2: x, y2: y,
+
+        }).drawArc({
+            name: "ArcPin_" + PinId,
+            layer: true,
+            groups: ["Pin_" + PinId],
+            strokeStyle: 'grey',
+            strokeWidth: 2,
+            fillStyle: radial,
+            x: x, y: y,
+            radius: 5,
+
+            click: function (clickedPin) {
+
+                var radialAfterClick = $('#aaDetailViewCanvas').createGradient({
+                    x1: 50, y1: 50,
+                    x2: 50, y2: 50,
+                    r1: 10, r2: 30,
+                    c1: 'rgba(100, 50, 0,0)',
+                    c2: 'rgb(126, 187, 83)'
+                });
  
+                clickedPin.fillStyle = radialAfterClick;
  
-        var radial = $('#aaDetailViewCanvas').createGradient({
-                x1: 50, y1: 50,
-                x2: 50, y2: 50,
-                r1: 10, r2: 30,
-                c1: 'rgba(100, 50, 0,0)',
-                c2: 'grey'
-            });
-            $(canvasId).drawLine({
-                draggable: true,
-                layer: true,
-                name: "Pin_" + PinId,
-                groups: ["Pin_" + PinId],
-                dragGroups: ["Pin_" + PinId],
-                strokeStyle: 'black',
-                strokeWidth: 2,
-                x1: offsetX1, y1: offsetY1,
-               x2: x, y2: y,
-                
-            }).drawArc({
-                draggable: true,
-                name: "ArcPin_" + PinId,
-                //  name: "Pin_" + $rootScope.resetPin,
-                layer: true,
-                groups: ["Pin_" + PinId],
-                dragGroups: ["Pin_" + PinId],
-                strokeStyle: 'grey',
-                strokeWidth: 2,
-                fillStyle: radial,
-                x: offsetX1, y: offsetY1,
-                radius: 5,
+                var pinID = (clickedPin.name).substring(7, (clickedPin.name).length);
+               // alert('pinId: ' + pinID);
+                //showAnnotation();
  
-            }).drawLayers();
+            }
+
+        }).drawLayers();
  
     }
  
@@ -150,7 +150,6 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 canvas.style.left = '0px';
                 canvas.style.top = '0px';
                 canvas.style.position = "absolute";
-                canvas.addEventListener('click', aaDetailViewCanvasClickListener);
  
                 $("#imageDiv").append(canvas);
                 $scope.context = canvas.getContext("2d")
@@ -236,27 +235,13 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
                 $scope.aaPinData = result.data.Root.Item;
                 angular.forEach($scope.aaPinData, function (value, key) {
  
-                    //$scope.context.beginPath();
-                    //$scope.context.moveTo(value._PinX, value._PinY);
-                    //$scope.context.lineTo(value._HeadX, value._HeadY);
-                    //$scope.context.stroke();
-
-                    //var headX = (parseInt(value._HeadX)) - 20;
-                    //var headY = (parseInt(value._HeadY)) - 15;
-
-                    //var img = new Image();
-                    //img.src = "~/../../../content/images/noraml-pin.png";
-                    //img.onload = function () {
-                    //    $scope.context.drawImage(img, headX, headY);
-                    //}
-                    $rootScope.DrawStaticPin('aaDetailViewCanvas', value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY)
+                    $rootScope.DrawStaticPinsOnImage('aaDetailViewCanvas', value._PinId, value._PinX, value._PinY, value._HeadX, value._HeadY, $rootScope.pinID)
                 })
  
-                console.log(JSON.stringify(result, null, 4));
             },
              function (error) {
-                 // handle errors here
-                 console.log(' error: ' + error.statusText);
+              
+                 console.log(' error in showAllPins: ' + error.statusText);
              }
             )
     }