crop-area-circle.js 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. 'use strict';
  2. crop.factory('cropAreaCircle', ['cropArea', function(CropArea) {
  3. var CropAreaCircle = function() {
  4. CropArea.apply(this, arguments);
  5. this._boxResizeBaseSize = 20;
  6. this._boxResizeNormalRatio = 0.9;
  7. this._boxResizeHoverRatio = 1.2;
  8. this._iconMoveNormalRatio = 0.9;
  9. this._iconMoveHoverRatio = 1.2;
  10. this._boxResizeNormalSize = this._boxResizeBaseSize*this._boxResizeNormalRatio;
  11. this._boxResizeHoverSize = this._boxResizeBaseSize*this._boxResizeHoverRatio;
  12. this._posDragStartX=0;
  13. this._posDragStartY=0;
  14. this._posResizeStartX=0;
  15. this._posResizeStartY=0;
  16. this._posResizeStartSize=0;
  17. this._boxResizeIsHover = false;
  18. this._areaIsHover = false;
  19. this._boxResizeIsDragging = false;
  20. this._areaIsDragging = false;
  21. };
  22. CropAreaCircle.prototype = new CropArea();
  23. CropAreaCircle.prototype._calcCirclePerimeterCoords=function(angleDegrees) {
  24. var hSize=this._size/2;
  25. var angleRadians=angleDegrees * (Math.PI / 180),
  26. circlePerimeterX=this._x + hSize * Math.cos(angleRadians),
  27. circlePerimeterY=this._y + hSize * Math.sin(angleRadians);
  28. return [circlePerimeterX, circlePerimeterY];
  29. };
  30. CropAreaCircle.prototype._calcResizeIconCenterCoords=function() {
  31. return this._calcCirclePerimeterCoords(-45);
  32. };
  33. CropAreaCircle.prototype._isCoordWithinArea=function(coord) {
  34. return Math.sqrt((coord[0]-this._x)*(coord[0]-this._x) + (coord[1]-this._y)*(coord[1]-this._y)) < this._size/2;
  35. };
  36. CropAreaCircle.prototype._isCoordWithinBoxResize=function(coord) {
  37. var resizeIconCenterCoords=this._calcResizeIconCenterCoords();
  38. var hSize=this._boxResizeHoverSize/2;
  39. return(coord[0] > resizeIconCenterCoords[0] - hSize && coord[0] < resizeIconCenterCoords[0] + hSize &&
  40. coord[1] > resizeIconCenterCoords[1] - hSize && coord[1] < resizeIconCenterCoords[1] + hSize);
  41. };
  42. CropAreaCircle.prototype._drawArea=function(ctx,centerCoords,size){
  43. ctx.arc(centerCoords[0],centerCoords[1],size/2,0,2*Math.PI);
  44. };
  45. CropAreaCircle.prototype.draw=function() {
  46. CropArea.prototype.draw.apply(this, arguments);
  47. // draw move icon
  48. this._cropCanvas.drawIconMove([this._x,this._y], this._areaIsHover?this._iconMoveHoverRatio:this._iconMoveNormalRatio);
  49. // draw resize cubes
  50. this._cropCanvas.drawIconResizeBoxNESW(this._calcResizeIconCenterCoords(), this._boxResizeBaseSize, this._boxResizeIsHover?this._boxResizeHoverRatio:this._boxResizeNormalRatio);
  51. };
  52. CropAreaCircle.prototype.processMouseMove=function(mouseCurX, mouseCurY) {
  53. var cursor='default';
  54. var res=false;
  55. this._boxResizeIsHover = false;
  56. this._areaIsHover = false;
  57. if (this._areaIsDragging) {
  58. this._x = mouseCurX - this._posDragStartX;
  59. this._y = mouseCurY - this._posDragStartY;
  60. this._areaIsHover = true;
  61. cursor='move';
  62. res=true;
  63. this._events.trigger('area-move');
  64. } else if (this._boxResizeIsDragging) {
  65. cursor = 'nesw-resize';
  66. var iFR, iFX, iFY;
  67. iFX = mouseCurX - this._posResizeStartX;
  68. iFY = this._posResizeStartY - mouseCurY;
  69. if(iFX>iFY) {
  70. iFR = this._posResizeStartSize + iFY*2;
  71. } else {
  72. iFR = this._posResizeStartSize + iFX*2;
  73. }
  74. this._size = Math.max(this._minSize, iFR);
  75. this._boxResizeIsHover = true;
  76. res=true;
  77. this._events.trigger('area-resize');
  78. } else if (this._isCoordWithinBoxResize([mouseCurX,mouseCurY])) {
  79. cursor = 'nesw-resize';
  80. this._areaIsHover = false;
  81. this._boxResizeIsHover = true;
  82. res=true;
  83. } else if(this._isCoordWithinArea([mouseCurX,mouseCurY])) {
  84. cursor = 'move';
  85. this._areaIsHover = true;
  86. res=true;
  87. }
  88. this._dontDragOutside();
  89. angular.element(this._ctx.canvas).css({'cursor': cursor});
  90. return res;
  91. };
  92. CropAreaCircle.prototype.processMouseDown=function(mouseDownX, mouseDownY) {
  93. if (this._isCoordWithinBoxResize([mouseDownX,mouseDownY])) {
  94. this._areaIsDragging = false;
  95. this._areaIsHover = false;
  96. this._boxResizeIsDragging = true;
  97. this._boxResizeIsHover = true;
  98. this._posResizeStartX=mouseDownX;
  99. this._posResizeStartY=mouseDownY;
  100. this._posResizeStartSize = this._size;
  101. this._events.trigger('area-resize-start');
  102. } else if (this._isCoordWithinArea([mouseDownX,mouseDownY])) {
  103. this._areaIsDragging = true;
  104. this._areaIsHover = true;
  105. this._boxResizeIsDragging = false;
  106. this._boxResizeIsHover = false;
  107. this._posDragStartX = mouseDownX - this._x;
  108. this._posDragStartY = mouseDownY - this._y;
  109. this._events.trigger('area-move-start');
  110. }
  111. };
  112. CropAreaCircle.prototype.processMouseUp=function(/*mouseUpX, mouseUpY*/) {
  113. if(this._areaIsDragging) {
  114. this._areaIsDragging = false;
  115. this._events.trigger('area-move-end');
  116. }
  117. if(this._boxResizeIsDragging) {
  118. this._boxResizeIsDragging = false;
  119. this._events.trigger('area-resize-end');
  120. }
  121. this._areaIsHover = false;
  122. this._boxResizeIsHover = false;
  123. this._posDragStartX = 0;
  124. this._posDragStartY = 0;
  125. };
  126. return CropAreaCircle;
  127. }]);