-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdrawPoly.html
224 lines (212 loc) · 9.16 KB
/
drawPoly.html
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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script type="text/javascript">
//The following section contains the java script functions for the polygon drawing tool
//Scrip based on code from....
var perimeter = new Array();
var complete = false;
var canvas;
var ctx;
function line_intersects(p0, p1, p2, p3) {
var s1_x, s1_y, s2_x, s2_y;
s1_x = p1['x'] - p0['x'];
s1_y = p1['y'] - p0['y'];
s2_x = p3['x'] - p2['x'];
s2_y = p3['y'] - p2['y'];
var s, t;
s = (-s1_y * (p0['x'] - p2['x']) + s1_x * (p0['y'] - p2['y'])) / (-s2_x * s1_y + s1_x * s2_y);
t = ( s2_x * (p0['y'] - p2['y']) - s2_y * (p0['x'] - p2['x'])) / (-s2_x * s1_y + s1_x * s2_y);
if (s >= 0 && s <= 1 && t >= 0 && t <= 1)
{
// Collision detected
return true;
}
return false; // No collision
}
function point(x, y){
ctx.fillStyle="white";
ctx.strokeStyle = "white";
ctx.fillRect(x-2,y-2,4,4);
ctx.moveTo(x,y);
}
function undo(){
ctx = undefined;
perimeter.pop();
complete = false;
$("#submitButton").attr("disabled", "disabled");
start(true);
}
function clear_canvas(){
ctx = undefined;
perimeter = new Array();
complete = false;
$("#submitButton").attr("disabled", "disabled");
document.getElementById('coordinates').value = '';
start();
}
function draw(end){
ctx.lineWidth = 1;
ctx.strokeStyle = "white";
ctx.lineCap = "square";
ctx.beginPath();
for(var i=0; i<perimeter.length; i++){
if(i==0){
ctx.moveTo(perimeter[i]['x'],perimeter[i]['y']);
end || point(perimeter[i]['x'],perimeter[i]['y']);
} else {
ctx.lineTo(perimeter[i]['x'],perimeter[i]['y']);
end || point(perimeter[i]['x'],perimeter[i]['y']);
}
}
if(end){
ctx.lineTo(perimeter[0]['x'],perimeter[0]['y']);
ctx.closePath();
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
ctx.fill();
ctx.strokeStyle = 'blue';
complete = true;
// enable submit button and draw polygon
$("#submitButton").removeAttr("disabled");
}
ctx.stroke();
// print coordinates
if(perimeter.length == 0){
document.getElementById('coordinates').value = '';
} else {
document.getElementById('coordinates').value = JSON.stringify(perimeter);
}
}
function check_intersect(x,y){
if(perimeter.length < 4){
return false;
}
var p0 = new Array();
var p1 = new Array();
var p2 = new Array();
var p3 = new Array();
p2['x'] = perimeter[perimeter.length-1]['x'];
p2['y'] = perimeter[perimeter.length-1]['y'];
p3['x'] = x;
p3['y'] = y;
for(var i=0; i<perimeter.length-1; i++){
p0['x'] = perimeter[i]['x'];
p0['y'] = perimeter[i]['y'];
p1['x'] = perimeter[i+1]['x'];
p1['y'] = perimeter[i+1]['y'];
if(p1['x'] == p2['x'] && p1['y'] == p2['y']){ continue; }
if(p0['x'] == p3['x'] && p0['y'] == p3['y']){ continue; }
if(line_intersects(p0,p1,p2,p3)==true){
return true;
}
}
return false;
}
function point_it(event) {
var rect, x, y;
if(event.ctrlKey){
//for faster undo use ctrl+click
undo();
return false;
} else if(complete){
alert('Polygon already created');
return false;
}
else if(event.which === 3 || event.button === 2){
//atempt to close polygon
if(perimeter.length==2){
alert('You need at least three points for a polygon');
return false;
}
x = perimeter[0]['x'];
y = perimeter[0]['y'];
if(check_intersect(x,y)){
alert('The line you are drawing intersect another line');
return false;
}
draw(true);
alert('Polygon closed');
event.preventDefault();
return false;
}else {
rect = canvas.getBoundingClientRect();
x = event.clientX - rect.left;
y = event.clientY - rect.top;
if (perimeter.length>0 && x == perimeter[perimeter.length-1]['x'] && y == perimeter[perimeter.length-1]['y']){
// same point - double click
return false;
}
if(check_intersect(x,y)){
alert('The line you are drawing intersect another line');
return false;
}
perimeter.push({'x':x,'y':y});
draw(false);
return false;
}
}
function start(with_draw) {
canvas = document.getElementById("jPolygon");
var img = new Image();
img.src = canvas.getAttribute('data-imgsrc');
img.onload = function(){
canvas.width = img.width;
canvas.height = img.height;
ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
if(with_draw == true){
draw(false);
}
}
}
</script><!-- Beguining of the html document-->
<div style="display:inline-block;vertical-align:top;">
<h1>Draw a contour separating fish body from fins</h1>
<ul>
<li>Please draw a contour using the <b>mouse left button</b> to click and connect points that <b>separate the fins from the body</b>.</li>
<li>To finish the contour polygon use the <b>mouse right button</b>. This command will connect the first to the last point.</li>
<li>Remove the last point by clicking <b>Ctrl + mouse click</b> or click on the <b>Undo button.</b></li>
<li>Clear all points by clicking on the <b>Reset button</b></li>
<li>In order to get accepted there are <b>4 fins that need to be separated from the body</b>:</li>
</ul>
<blockquote><b><i>Dorsal fin / Pelvic fin / Anal fin / Caudal fin</i></b></blockquote>
<ul>
<li>A good contour must be drawn <b>close to the fish body</b>, and use as many points as needed (on average 20 points is good).</li>
<li>In our last trial, we rejected many jobs that didn't follow the instructions.</br>
Please <b>take a look at the example figures</b> showing fish fins and an acceptable final polygon:
<a href="https://s3-us-west-2.amazonaws.com/fishpolygon1/fishExample1.jpg" target="_blank">Example 1 </a>
<a href="https://s3-us-west-2.amazonaws.com/fishpolygon1/fishExample2.jpg" target="_blank">Example 2 </a>
<a href="https://s3-us-west-2.amazonaws.com/fishpolygon1/fishExample3.jpg" target="_blank">Example 3</a> </br>
Also take a look at those <b>rejectable</b> answers:
<a href="https://s3-us-west-2.amazonaws.com/fishpolygon1/nottodoEx1.jpg" target="_blanck">Example 4</a>
<a href="https://s3-us-west-2.amazonaws.com/fishpolygon1/notToDoExample3.jpg" target="_blanck">Example 5</a>
</li>
</ul>
<p id="buttons"><input id="undo_button" type="button" value="Undo" /> <input id="reset_button" type="Reset" value="Reset" /></p>
<p><!-- Coordinates input from user --><!-- <strong>Coordinates:</strong> <textarea disabled="disabled" id="coordinates" name="coordinates" style="width:300px; height:200px;"></textarea> --><input id="coordinates" name="coordinates" type="hidden" /></p>
</div>
<div id="imgframe" style="float:left"><!--change the data-imgsrc="${img_url}" -->
<p><canvas data-imgsrc="https://s3-us-west-2.amazonaws.com/fishpolygon1/fish1.jpg" id="jPolygon" oncontextmenu="return false;" onmousedown="point_it(event)" style="cursor:crosshair"> Your browser does not support the HTML5 canvas tag. </canvas></p>
</div>
<div style="float:left; margin-left:20px;">
<p><label for="comment"><em>Comment:</em></label><textarea id="comment_area" name="comment"></textarea></p>
<p>Press <b>Left Click</b> to draw a point, <strong>CTRL+Click</strong> to undo or <strong>Right Click</strong> to close the polygon.</p>
</div>
<script type="text/javascript">
$(document).ready(function(){
//create variables
var perimeter = new Array();
var complete = false;
var canvas = document.getElementById("jPolygon");
var ctx;
var img = new Image();
img.src = canvas.getAttribute('data-imgsrc');
clear_canvas();
//initialize butons
$("#reset_button").click(function(e) {
clear_canvas();
});
$("#undo_button").click(function(e) {
undo();
});
$("#submitButton").attr("disabled", "disabled");
$("#submitButton").detach().appendTo("#buttons");
});
</script>