Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Obrót zdjęcia za pomocą myszki <canvas>
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
emil_seba
29.08.2011, 10:39:55
Witam, mógł by ktoś naprowadzić mnie jak obracać zdjęcie za pomocą myszki w <canvas>(chwytamy za róg i obracamy). Rozchodzi mi się idee. Jak obliczyć kąt obrotu dla funkcji rotate(), trzeba też jakoś obejść to że funkcja rotate() obraca wedle lewego górnego rogu zdjęcia (elementu). Z góry dziękuje za odpowiedzi.
Crozin
29.08.2011, 10:57:11
Potrzebujesz:
1. Współrzędne punktu, w którym wciśnięto przycisk myszy.
2. Współrzędne punktu, nad którym aktualnie znajduje się mysz.

Mając te dane:
3. Ustalasz wzór funkcji liniowej, osadzonej w układzie współrzędnych, którego centrum znajduje się w punkcie [1].
4. Z podstawówki / gimnazjum powinieneś pamiętać, że współczynnik a funkcji liniowej można traktować jako tangens kąta nachylenia prostej do osi OX.
5. Na koniec, jeżeli otrzymaną wartość masz w stopniach, musisz zamienić ją na radiany (bo pewnie takiego argumentu spodziewa się metoda rotate()).
emil_seba
8.09.2011, 19:01:24
dzięki za odpowiedź smile.gif Mam jeszcze jedno pytanie. Na Canvasie rysuje sobie zdjęcie, w rogach zdjęcia rysuje kwadraty, za które można obracać i rozciągać zdjęcie.
[PHP] pobierz, plaintext 
  1. funkcja rysująca to co znajduje się na canvasie
  2.  
  3.  
  4.  
  5. function initStage(){
  6.  
  7. 	    counter = 0;
  8. 	    for (var img in images) {
  9.             rectangles[counter++].image = images[img];
  10.         }
  11. 	    kin = new Kinetic_2d("obraz");
  12.         var context = kin.getContext();
  13.  
  14.         context.globalCompositeOperation = "destination-over";
  15.  
  16.         kin.setDrawStage(function(){
  17. 		kin.clear();
  18.             var mousePos = kin.getMousePos();
  19.  
  20.             for (var n = 0; n < rectangles.length; n++) {
  21.                 var thisRect = rectangles[n];
  22.                 if (thisRect.dragging) {
  23.  
  24.                     thisRect.x = mousePos.x - offsetX;
  25.                     thisRect.y = mousePos.y - offsetY;
  26.                 }
  27.  
  28.               if (thisRect.resizeCorner != "NONE") {
  29.                     resizeRect(thisRect);
  30.                 }
  31.  
  32. 				if(thisRect.actRot)
  33. 					{
  34.  
  35. 						thisRect.obrot = true;
  36. 						thisRect.angle = 15*Math.PI/180;
  37. 					}
  38.                 // draw resize boxes
  39. 				/*   to nie działa tak jak należy
  40. 					context.save();
  41. 					context.translate(getRotX(thisRect.x,thisRect.y,thisRect.x+thisRect.width/2,thisRect.y+thisRect.height/2,thisRect.angle),getRotY(thisRect.x,thisRect.y,thisRect.x+thisRect.width/2,thisRect.y+thisRect.height/2,thisRect.angle));
  42. 					context.rotate(thisRect.angle);
  43. 					drawResizeBox(0,0, thisRect, TOP_LEFT);
  44. 					//context.translate(-getRotX(thisRect.x,thisRect.y,thisRect.x+thisRect.width/2,thisRect.y+thisRect.height/2,thisRect.angle),-getRotY(thisRect.x,thisRect.y,thisRect.x+thisRect.width/2,thisRect.y+thisRect.height/2,thisRect.angle));
  45. 					//drawResizeBox(getRotX(thisRect.x,thisRect.y,thisRect.x+thisRect.width/2,thisRect.y+thisRect.height/2,thisRect.angle),getRotY(thisRect.x,thisRect.y,thisRect.x+thisRect.width/2,thisRect.y+thisRect.height/2,thisRect.angle), thisRect, TOP_LEFT);
  46. 					context.restore();
  47.  
  48. 					context.save();
  49. 					context.translate(getRotX(thisRect.x + (thisRect.width * thisRect.scaleX)-10,thisRect.y,thisRect.x+thisRect.width/2,thisRect.y+thisRect.height/2,thisRect.angle),getRotY(thisRect.x + (thisRect.width * thisRect.scaleX)-10,thisRect.y,thisRect.x+thisRect.width/2,thisRect.y+thisRect.height/2,thisRect.angle));
  50. 					context.rotate(thisRect.angle);
  51. 					drawResizeBox(0,0, thisRect, TOP_RIGHT);
  52. 					context.restore();
  53.  
  54. 					context.save();
  55. 					context.translate(getRotX(thisRect.x + (thisRect.width * thisRect.scaleX) - 10, thisRect.y + (thisRect.height * thisRect.scaleY) - 10,thisRect.x+thisRect.width/2,thisRect.y+thisRect.height/2,thisRect.angle),getRotY(thisRect.x + (thisRect.width * thisRect.scaleX) - 10,thisRect.y + (thisRect.height * thisRect.scaleY) - 10,thisRect.x+thisRect.width/2,thisRect.y+thisRect.height/2,thisRect.angle));
  56. 					context.rotate(thisRect.angle);
  57. 					drawResizeBox(0,0,thisRect, BOTTOM_RIGHT);
  58. 					context.restore();
  59.  
  60. 					context.save();
  61. 					context.translate(getRotX(thisRect.x,thisRect.y + (thisRect.height * thisRect.scaleY) - 10,thisRect.x+thisRect.width/2,thisRect.y+thisRect.height/2,thisRect.angle), getRotY(thisRect.x,thisRect.y + (thisRect.height * thisRect.scaleY) - 10,thisRect.x+thisRect.width/2,thisRect.y+thisRect.height/2,thisRect.angle));
  62. 					context.rotate(thisRect.angle);
  63. 					drawResizeBox(0,0,thisRect,BOTTOM_LEFT);
  64. 					context.restore();
  65. 					*/
  66. 					// To działa, ale potrzebuje wersji która jest wyżej
  67. 					drawResizeBox(thisRect.x, thisRect.y, thisRect, TOP_LEFT);
  68. 				    drawResizeBox(thisRect.x + (thisRect.width * thisRect.scaleX) - 10, thisRect.y, thisRect, TOP_RIGHT);
  69. 					drawResizeBox(thisRect.x + (thisRect.width * thisRect.scaleX) - 10, thisRect.y + (thisRect.height * thisRect.scaleY) - 10, thisRect, BOTTOM_RIGHT);
  70. 					drawResizeBox(thisRect.x, thisRect.y + (thisRect.height * thisRect.scaleY) - 10, thisRect, BOTTOM_LEFT);
  71.  
  72. 			    if (thisRect.scaleX != 0 && thisRect.scaleY != 0) {
  73.                     kin.beginRegion();
  74.                     context.save();
  75.  
  76. 				context.translate(thisRect.x,thisRect.y);
  77.  
  78. 				if(thisRect.obrot)
  79. 				{
  80. 				    context.translate(thisRect.width/2,thisRect.height/2);					
  81. 					context.rotate(thisRect.angle);
  82. 					context.translate(-thisRect.width/2, -thisRect.height/2);	
  83. 				}
  84.  
  85. 					context.scale(thisRect.scaleX,thisRect.scaleY);
  86. 					context.drawImage(thisRect.image, 0, 0, thisRect.width, thisRect.height);
  87.  
  88.                     context.beginPath();
  89.                     context.rect(0, 0, thisRect.width, thisRect.height);
  90. 					context.lineWidth=5;
  91. 					context.strokeStyle = "black";
  92. 					context.stroke();
  93. 					context.stroke();
  94.                     context.closePath();
  95.  
  96.                     kin.addRegionEventListener("onmousedown", function(){
  97.                         thisRect.dragging = true;
  98.                         var mousePos = kin.getMousePos();
  99. 				        offsetX = mousePos.x - thisRect.x;
  100.                         offsetY = mousePos.y - thisRect.y;
  101.  
  102.                         // place this rect at the beginning of the rectangles
  103.                         // array so that is is rendered on top
  104.                         rectangles.splice(n, 1);
  105.                         rectangles.splice(0, 0, thisRect);
  106.                     });
  107.                     kin.addRegionEventListener("onmouseup", function(){
  108.                         thisRect.dragging = false;
  109. 				    });
  110.                     kin.addRegionEventListener("onmouseover", function(){
  111.                         document.body.style.cursor = "pointer";
  112.                     });
  113.                     kin.addRegionEventListener("onmouseout", function(){
  114.                         document.body.style.cursor = "default";
  115.                     });
  116.                     context.restore();
  117.                     kin.closeRegion();
  118.                 }
  119.             }
  120.  
  121. 	}
  122.  
  123.  
  124.  
  125.  
  126.  
  127. // funkcja rysująca na zdjęciu kwadraciki
  128.  
  129.  
  130.    function drawResizeBox(x, y, rect, resizeCorner){
  131.  
  132.         var context = kin.getContext();
  133.         kin.beginRegion();
  134.         context.beginPath();
  135.         context.fillStyle = "red";
  136.         context.rect(x, y, 10, 10);
  137.         context.fill();
  138.         context.closePath();
  139.         kin.addRegionEventListener("onmousedown", function(){
  140.             var mousePos = kin.getMousePos();
  141.             rect.resizeCorner = resizeCorner;
  142.             resizeStartX = mousePos.x;
  143.             resizeStartY = mousePos.y;
  144. 	    rect.actRot = true;
  145. 	    resizeOffsetX = rect.x - mousePos.x;
  146.             resizeOffsetY = rect.y - mousePos.y;
  147.             resizeStartScaleX = rect.scaleX;
  148.             resizeStartScaleY = rect.scaleY;
  149.         });
  150.  
  151.  
  152.         kin.addRegionEventListener("onmouseup", function(){
  153. 	    rect.resizeCorner = NONE;
  154. 			rect.actRot = false;
  155.  
  156.         });
  157.  
  158.         kin.closeRegion();
  159.  
  160.     }
  161.  
[PHP] pobierz, plaintext



Gdy wywołam funkcje drawResizeBox() np w taki sposób
[PHP] pobierz, plaintext 
  1.                                        context.save();
  2. 				      context.translate(getRotX(thisRect.x + (thisRect.width * thisRect.scaleX)-10,thisRect.y,thisRect.x+thisRect.width/2,thisRect.y+thisRect.height/2,thisRect.angle),getRotY(thisRect.x + (thisRect.width * thisRect.scaleX)-10,thisRect.y,thisRect.x+thisRect.width/2,thisRect.y+thisRect.height/2,thisRect.angle));
  3. 					context.rotate(thisRect.angle);
  4. 					drawResizeBox(0,0, thisRect, TOP_RIGHT);
  5. 					context.restore();
  6.  
[PHP] pobierz, plaintext

To wszystko się rysuje, ale nie reaguje na zdarzenia, i nie wiem dlaczego, a potrzebuje wywołać to w ten sposób aby móc obracać zdjęciem, a "kwadraciki" by się odrysowały odwrócone w odpowiednich miejscach. Natomiast gdy wywołam funkcję drawResizeBox() w taki sposób:
[PHP] pobierz, plaintext 
  1. drawResizeBox(getRotX(thisRect.x,thisRect.y,thisRect.x+thisRect.width/2,thisRect.y+thisRect.height/2,thisRect.angle),getRotY(thisRect.x,thisRect.y,thisRect.x+thisRect.width/2,thisRect.y+thisRect.height/2,thisRect.angle), thisRect, TOP_LEFT);				
[PHP] pobierz, plaintext

Zdarzenie mousedown się wykona,działa skalowanie, zaś mouseup, nie zajdzie (tak jakby zdjęcie przykleiło się do kursora smile.gif ) i nic nie idzie zrobić jedynie wyjechać poza obszar canvasu.

Wywołanie drawResizeBox(thisRect.x, thisRect.y, thisRect, TOP_LEFT); działa dobrze, lecz potrzebuje wywołać to w sposób jak wyżej. Macie Państwo jakieś rady?


!*!
9.09.2011, 09:24:17
Jedną na początek.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.