TBD

draw-circle.js 7.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
  1. function paint_canvas(){
  2. var c = document.getElementById("back-canvas");
  3. var ctx = c.getContext("2d");
  4. var img = document.getElementById("oller");
  5. ctx.drawImage(img, 0, 0);
  6. var imgData = ctx.getImageData(0, 0, c.width, c.height);
  7. ctx.putImageData(imgData, 0, 0);
  8. }
  9. $(document).ready(function() {
  10. $("#pointer_div").on("mousemove", function(event) {
  11. var x = event.pageX - this.offsetLeft;
  12. var y = event.pageY - this.offsetTop;
  13. draw_circle(x,y);
  14. });
  15. });
  16. function draw_circle(x,y){
  17. var c = document.getElementById("back-canvas");
  18. var ctx = c.getContext("2d");
  19. var img = document.getElementById("oller");
  20. ctx.drawImage(img, 0, 0);
  21. var width = x;//x
  22. var height = y;//y center of circle
  23. var radius = 100;// radius of circle
  24. var x1,y1;
  25. var x_bitmap = [];
  26. var y_bitmap = [];
  27. for(x1 = 0; x1 < radius; x1 += 1){
  28. for(y1 = 0; y1 < radius; y1 += 1){
  29. if(((x1-(radius/2))**2 + (y1-(radius/2))**2) < (radius/2)**2){
  30. x_bitmap.push(x1);//every x coordinate for circle
  31. y_bitmap.push(y1);// every y coordinate for circle
  32. // I need to convert this bitmap into the circle...
  33. }
  34. }
  35. }
  36. var imgData = ctx.getImageData(x-(radius*4.25), y-(radius), radius, radius);
  37. var x2,y2,index;
  38. var a = [];
  39. for(x2 = 0; x2 < x_bitmap.length; x2 += 1){
  40. index = (4 * x_bitmap[x2]) + (y_bitmap[x2] * 4 * radius);
  41. imgData.data[3 + index] = 0;
  42. }
  43. ctx.putImageData(imgData, x-(radius*4.25), y-(radius));
  44. }
  45. function clear_radios(){
  46. var fradio = document.getElementsByName('front-radio');
  47. var bradio = document.getElementsByName('back-radio');
  48. var length = fradio.length;
  49. for(var index = 0; index < length; index ++){
  50. if(fradio[index].checked){
  51. fradio[index].checked = false;
  52. bradio[index].disabled = false;
  53. }
  54. else if(bradio[index].checked){
  55. bradio[index].checked = false;
  56. fradio[index].disabled = false;
  57. }
  58. }
  59. }
  60. function front(){
  61. var radios = document.getElementsByName('front-radio');
  62. var length = radios.length;
  63. for(var index = 0; index < length; index ++){
  64. if(radios[index].checked){
  65. switch(radios[index].value){
  66. case "visual":
  67. document.getElementById("oller").src = "images/paisaje-frances.png";
  68. var radio = document.getElementsByName('back-radio');
  69. var disabled;
  70. for(disabled = 0; disabled < length; disabled ++){
  71. if(disabled == index){
  72. radio[disabled].checked = false;
  73. radio[disabled].disabled = true;
  74. }
  75. else{
  76. if(radio[disabled].value == "ultraviolet" ||
  77. radio[disabled].value == "x-ray"){
  78. radio[disabled].disabled = true;
  79. }
  80. else{
  81. radio[disabled].disabled = false;
  82. }
  83. }
  84. }
  85. break;
  86. case "infrared":
  87. document.getElementById("oller").src = "images/paisaje-frances-infrared.png";
  88. var radio = document.getElementsByName('back-radio');
  89. var disabled;
  90. for(disabled = 0; disabled < length; disabled ++){
  91. if(disabled == index){
  92. radio[disabled].checked = false;
  93. radio[disabled].disabled = true;
  94. }
  95. else{
  96. if(radio[disabled].value == "ultraviolet" ||
  97. radio[disabled].value == "x-ray"){
  98. radio[disabled].disabled = true;
  99. }
  100. else{
  101. radio[disabled].disabled = false;
  102. }
  103. }
  104. }
  105. break;
  106. case "ultraviolet":
  107. document.getElementById("oller").src = "images/paisaje-frances.png";
  108. var radio = document.getElementsByName('back-radio');
  109. var disabled;
  110. for(disabled = 0; disabled < length; disabled ++){
  111. if(disabled == index){
  112. radio[disabled].disabled = true;
  113. }
  114. else{
  115. radio[disabled].disabled = false;
  116. }
  117. }
  118. break;
  119. case "x-ray":
  120. document.getElementById("oller").src = "images/paisaje-frances.png";
  121. var radio = document.getElementsByName('back-radio');
  122. var disabled;
  123. for(disabled = 0; disabled < length; disabled ++){
  124. if(disabled == index){
  125. radio[disabled].disabled = true;
  126. }
  127. else{
  128. radio[disabled].disabled = false;
  129. }
  130. }
  131. break;
  132. default:
  133. }
  134. break;
  135. }
  136. }
  137. }
  138. function back(){
  139. var radios = document.getElementsByName('back-radio');
  140. var length = radios.length;
  141. for(var index = 0; index < length; index ++){
  142. if(radios[index].checked){
  143. switch(radios[index].value) {
  144. case "visual":
  145. document.getElementById("back-canvas").style.backgroundImage = "url('images/paisaje-frances.png')";
  146. var radio = document.getElementsByName('front-radio');
  147. var disabled;
  148. for(disabled = 0; disabled < length; disabled ++){
  149. if(disabled == index){
  150. radio[disabled].checked = false;
  151. radio[disabled].disabled = true;
  152. }
  153. else{
  154. if(radio[disabled].value == "ultraviolet" ||
  155. radio[disabled].value == "x-ray"){
  156. radio[disabled].disabled = true;
  157. }
  158. else{
  159. radio[disabled].disabled = false;
  160. }
  161. }
  162. }
  163. break;
  164. case "infrared":
  165. document.getElementById("back-canvas").style.backgroundImage = "url('images/paisaje-frances-infrared.png')";
  166. var radio = document.getElementsByName('front-radio');
  167. var disabled;
  168. for(disabled = 0; disabled < length; disabled ++){
  169. if(disabled == index){
  170. radio[disabled].checked = false;
  171. radio[disabled].disabled = true;
  172. }
  173. else{
  174. if(radio[disabled].value == "ultraviolet" ||
  175. radio[disabled].value == "x-ray"){
  176. radio[disabled].disabled = true;
  177. }
  178. else{
  179. radio[disabled].disabled = false;
  180. }
  181. }
  182. }
  183. break;
  184. case "ultraviolet":
  185. document.getElementById("back-canvas").style.backgroundImage = "url('images/paisaje-frances.png')";
  186. var radio = document.getElementsByName('front-radio');
  187. var disabled;
  188. for(disabled = 0; disabled < length; disabled ++){
  189. if(disabled == index){
  190. radio[disabled].disabled = true;
  191. }
  192. else{
  193. radio[disabled].disabled = false;
  194. }
  195. }
  196. break;
  197. case "x-ray":
  198. document.getElementById("back-canvas").style.backgroundImage = "url('images/paisaje-frances.png')";
  199. var radio = document.getElementsByName('front-radio');
  200. var disabled;
  201. for(disabled = 0; disabled < length; disabled ++){
  202. if(disabled == index){
  203. radio[disabled].disabled = true;
  204. }
  205. else{
  206. radio[disabled].disabled = false;
  207. }
  208. }
  209. break;
  210. default:
  211. }
  212. break;
  213. }
  214. }
  215. }
  216. function openNav() {
  217. document.getElementById("sidebar").style.width = "200px";
  218. }
  219. function closeNav() {
  220. document.getElementById("sidebar").style.width = "0";
  221. }