OLD | NEW |
---|---|
1 var MAX_SWAP_IMG_SIZE = 200; | 1 // What portion of the image width will be taken up by the magnifier. |
2 var MAGNIFIER_WIDTH = 100; | 2 var MAGNIFIER_WIDTH_FACTOR = 0.66; |
epoger
2014/02/05 20:51:14
Moved the old constants into ImageController; they
| |
3 var MAGNIFIER_HEIGHT = 100; | |
4 var MAGNIFIER_HALF_WIDTH = MAGNIFIER_WIDTH * 0.5; | |
5 var MAGNIFIER_HALF_HEIGHT = MAGNIFIER_HEIGHT * 0.5; | |
6 var MAGNIFIER_SCALE_FACTOR = 2.0; | |
7 | 3 |
8 angular.module('diff_viewer', []).directive('imgCompare', function() { | 4 angular.module('diff_viewer', []).directive('imgCompare', function() { |
9 // Custom directive for comparing (3-way) images | 5 // Custom directive for comparing (3-way) images |
10 return { | 6 return { |
11 restrict: 'E', // The directive can be used as an element name | 7 restrict: 'E', // The directive can be used as an element name |
12 replace: true, // The directive replaces itself with the template | 8 replace: true, // The directive replaces itself with the template |
13 template: '<canvas/>', | 9 template: '<canvas/>', |
14 scope: true, | 10 scope: true, |
15 link: function(scope, elm, attrs, ctrl) { | 11 link: function(scope, elm, attrs, ctrl) { |
16 var image = new Image(); | 12 var image = new Image(); |
17 var canvas = elm[0]; | 13 var canvas = elm[0]; |
18 var ctx = canvas.getContext('2d'); | 14 var ctx = canvas.getContext('2d'); |
19 var magnifyContent = false; | 15 var magnifyContent = false; |
20 | 16 |
21 // When the type attribute changes, load the image and then render | 17 // When the type attribute changes, set magnifyContent appropriately. |
22 attrs.$observe('type', function(value) { | 18 attrs.$observe('type', function(value) { |
23 switch(value) { | 19 switch(attrs.type) { |
24 case "differingPixelsInWhite": | 20 case "differingPixelsInWhite": |
25 magnifyContent = true; | 21 magnifyContent = true; |
26 break; | 22 break; |
27 case "differencePerPixel": | 23 case "differencePerPixel": |
28 break; | 24 break; |
29 case "baseline": | 25 case "baseline": |
30 magnifyContent = true; | 26 magnifyContent = true; |
31 break; | 27 break; |
32 case "test": | 28 case "test": |
33 magnifyContent = true; | 29 magnifyContent = true; |
34 break; | 30 break; |
35 default: | 31 default: |
36 console.log("Unknown type attribute on <img-compare>: " + va lue); | 32 console.log("Unknown type attribute on <img-compare>: " + va lue); |
37 return; | 33 return; |
38 } | 34 } |
35 }); | |
39 | 36 |
37 // Reset ImageController's scale and render the image; | |
38 // we need to do this whenever attrs.src or attrs.width changes. | |
39 scope.setScaleAndRender = function() { | |
40 // compute the scaled image width/height for image and canvas | |
41 scope.setImgScale(image.width, attrs.width); | |
epoger
2014/02/05 20:51:14
We don't require that images are scaled down by a
| |
42 | |
43 // Set canvas to correct size | |
44 canvas.width = image.width / scope.imgScaleDivisor; | |
45 canvas.height = image.height / scope.imgScaleDivisor; | |
46 | |
47 scope.renderImage(); | |
48 }; | |
49 attrs.$observe('src', function(value) { | |
epoger
2014/02/05 20:51:14
New behavor:
- Only load the images when src= chan
| |
40 image.src = attrs.src; | 50 image.src = attrs.src; |
41 image.onload = function() { | 51 image.onload = scope.setScaleAndRender; |
42 // compute the scaled image width/height for image and canvas | |
43 var divisor = 1; | |
44 // Make it so the maximum size of an image is MAX_SWAP_IMG_SIZ E, | |
45 // and the images are scaled down in halves. | |
46 while ((image.width / divisor) > MAX_SWAP_IMG_SIZE) { | |
47 divisor *= 2; | |
48 } | |
49 | |
50 scope.setImgScaleFactor(1 / divisor); | |
51 | |
52 // Set canvas to correct size | |
53 canvas.width = image.width * scope.imgScaleFactor; | |
54 canvas.height = image.height * scope.imgScaleFactor; | |
55 | |
56 scope.renderImage(); | |
57 } | |
58 }); | 52 }); |
53 attrs.$observe('width', scope.setScaleAndRender); | |
59 | 54 |
60 // When the magnify attribute changes, render the magnified rect at | 55 // When the magnify attribute changes, render the magnified rect at |
61 // the default zoom level. | 56 // the default zoom level. |
62 scope.$watch('magnifyCenter', function(magCenter) { | 57 scope.$watch('magnifyCenter', function(magCenter) { |
63 if (!magnifyContent) { | 58 if (!magnifyContent) { |
64 return; | 59 return; |
65 } | 60 } |
66 | 61 |
67 scope.renderImage(); | 62 scope.renderImage(); |
68 | 63 |
69 if (!magCenter) { | 64 if (!magCenter) { |
70 return; | 65 return; |
71 } | 66 } |
72 | 67 |
73 var magX = magCenter.x - MAGNIFIER_HALF_WIDTH; | 68 var magX = magCenter.x - scope.magnifierHalfWidth; |
74 var magY = magCenter.y - MAGNIFIER_HALF_HEIGHT; | 69 var magY = magCenter.y - scope.magnifierHalfHeight; |
75 | 70 |
76 var magMaxX = canvas.width - MAGNIFIER_WIDTH; | 71 var magMaxX = canvas.width - scope.magnifierWidth; |
77 var magMaxY = canvas.height - MAGNIFIER_HEIGHT; | 72 var magMaxY = canvas.height - scope.magnifierHeight; |
78 | 73 |
79 var magRect = { x: Math.max(0, Math.min(magX, magMaxX)), | 74 var magRect = { x: Math.max(0, Math.min(magX, magMaxX)), |
80 y: Math.max(0, Math.min(magY, magMaxY)), | 75 y: Math.max(0, Math.min(magY, magMaxY)), |
81 width: MAGNIFIER_WIDTH, | 76 width: scope.magnifierWidth, |
82 height: MAGNIFIER_HEIGHT | 77 height: scope.magnifierHeight |
83 }; | 78 }; |
84 | 79 |
85 var imgRect = { x: (magCenter.x / scope.imgScaleFactor) - MAGNIFIE R_HALF_WIDTH, | 80 var imgRect = { x: (magCenter.x * scope.imgScaleDivisor) - scope.m agnifierHalfWidth, |
86 y: (magCenter.y / scope.imgScaleFactor) - MAGNIFI ER_HALF_HEIGHT, | 81 y: (magCenter.y * scope.imgScaleDivisor) - scope.m agnifierHalfHeight, |
87 width: MAGNIFIER_WIDTH, | 82 width: scope.magnifierWidth, |
88 height: MAGNIFIER_HEIGHT | 83 height: scope.magnifierHeight |
89 }; | 84 }; |
90 | 85 |
91 // draw the magnified image | 86 // draw the magnified image |
92 ctx.clearRect(magRect.x, magRect.y, magRect.width, magRect.height) ; | 87 ctx.clearRect(magRect.x, magRect.y, magRect.width, magRect.height) ; |
93 ctx.drawImage(image, imgRect.x, imgRect.y, imgRect.width, imgRect. height, | 88 ctx.drawImage(image, imgRect.x, imgRect.y, imgRect.width, imgRect. height, |
94 magRect.x, magRect.y, magRect.width, magRect.height) ; | 89 magRect.x, magRect.y, magRect.width, magRect.height) ; |
95 | 90 |
96 // draw the outline rect | 91 // draw the outline rect |
97 ctx.beginPath(); | 92 ctx.beginPath(); |
98 ctx.rect(magRect.x, magRect.y, magRect.width, magRect.height); | 93 ctx.rect(magRect.x, magRect.y, magRect.width, magRect.height); |
99 ctx.lineWidth = 2; | 94 ctx.lineWidth = 2; |
100 ctx.strokeStyle = 'red'; | 95 ctx.strokeStyle = 'red'; |
101 ctx.stroke(); | 96 ctx.stroke(); |
102 | 97 |
103 }); | 98 }); |
104 | 99 |
105 // render the image to the canvas. This is often done every frame prio r | 100 // render the image to the canvas. This is often done every frame prio r |
106 // to any special effects (i.e. magnification). | 101 // to any special effects (i.e. magnification). |
107 scope.renderImage = function() { | 102 scope.renderImage = function() { |
108 ctx.clearRect(0, 0, canvas.width, canvas.height); | 103 ctx.clearRect(0, 0, canvas.width, canvas.height); |
109 ctx.drawImage(image, 0, 0, canvas.width, canvas.height); | 104 ctx.drawImage(image, 0, 0, canvas.width, canvas.height); |
110 }; | 105 }; |
111 | 106 |
112 // compute a rect (x,y,width,height) that represents the bounding box for | 107 // compute a rect (x,y,width,height) that represents the bounding box for |
113 // the magnification effect | 108 // the magnification effect |
114 scope.computeMagnifierOutline = function(event) { | 109 scope.computeMagnifierOutline = function(event) { |
115 var scaledWidth = MAGNIFIER_WIDTH * scope.imgScaleFactor; | 110 var scaledWidth = scope.magnifierWidth / scope.imgScaleDivisor; |
116 var scaledHeight = MAGNIFIER_HEIGHT * scope.imgScaleFactor; | 111 var scaledHeight = scope.magnifierHeight / scope.imgScaleDivisor; |
117 return { | 112 return { |
118 x: event.offsetX - (scaledWidth * 0.5), | 113 x: event.offsetX - (scaledWidth * 0.5), |
119 y: event.offsetY - (scaledHeight * 0.5), | 114 y: event.offsetY - (scaledHeight * 0.5), |
120 width: scaledWidth, | 115 width: scaledWidth, |
121 height: scaledHeight | 116 height: scaledHeight |
122 }; | 117 }; |
123 }; | 118 }; |
124 | 119 |
125 // event handler for mouse events that triggers the magnification | 120 // event handler for mouse events that triggers the magnification |
126 // effect across the 4 images being compared. | 121 // effect across the 4 images being compared. |
(...skipping 26 matching lines...) Expand all Loading... | |
153 scope.renderImage(); | 148 scope.renderImage(); |
154 // update scope on baseline / test that will cause them to render | 149 // update scope on baseline / test that will cause them to render |
155 scope.setMagnifierState(false); | 150 scope.setMagnifierState(false); |
156 scope.setMagnifyCenter(undefined); | 151 scope.setMagnifyCenter(undefined); |
157 }; | 152 }; |
158 } | 153 } |
159 }; | 154 }; |
160 }); | 155 }); |
161 | 156 |
162 function ImageController($scope, $http, $location, $timeout, $parse) { | 157 function ImageController($scope, $http, $location, $timeout, $parse) { |
163 $scope.imgScaleFactor = 1.0; | 158 $scope.imgScaleDivisor = 1.0; |
164 $scope.magnifierOn = false; | 159 $scope.magnifierOn = false; |
165 $scope.magnifyCenter = undefined; | 160 $scope.magnifyCenter = undefined; |
166 | 161 |
167 $scope.setImgScaleFactor = function(scaleFactor) { | 162 $scope.setImgScale = function(srcImageWidth, displayWidth) { |
168 $scope.imgScaleFactor = scaleFactor; | 163 $scope.imgScaleDivisor = srcImageWidth / displayWidth; |
164 $scope.magnifierWidth = displayWidth * MAGNIFIER_WIDTH_FACTOR; | |
165 $scope.magnifierHeight = $scope.magnifierWidth; | |
166 $scope.magnifierHalfWidth = $scope.magnifierWidth / 2; | |
167 $scope.magnifierHalfHeight = $scope.magnifierHeight / 2; | |
169 } | 168 } |
170 | 169 |
171 $scope.setMagnifierState = function(magnifierOn) { | 170 $scope.setMagnifierState = function(magnifierOn) { |
172 $scope.magnifierOn = magnifierOn; | 171 $scope.magnifierOn = magnifierOn; |
173 } | 172 } |
174 | 173 |
175 $scope.setMagnifyCenter = function(magnifyCenter) { | 174 $scope.setMagnifyCenter = function(magnifyCenter) { |
176 $scope.magnifyCenter = magnifyCenter; | 175 $scope.magnifyCenter = magnifyCenter; |
177 } | 176 } |
178 } | 177 } |
179 | |
OLD | NEW |