utils.js 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
  1. /**
  2. * 判断手指触摸位置
  3. */
  4. export function determineDirection(clipX, clipY, clipWidth, clipHeight, currentX, currentY) {
  5. /*
  6. * (右下>>1 右上>>2 左上>>3 左下>>4)
  7. */
  8. let corner;
  9. /**
  10. * 思路:(利用直角坐标系)
  11. * 1.找出裁剪框中心点
  12. * 2.如点击坐标在上方点与左方点区域内,则点击为左上角
  13. * 3.如点击坐标在下方点与右方点区域内,则点击为右下角
  14. * 4.其他角同理
  15. */
  16. const mainPoint = [clipX + clipWidth / 2, clipY + clipHeight / 2]; // 中心点
  17. const currentPoint = [currentX, currentY]; // 触摸点
  18. if (currentPoint[0] <= mainPoint[0] && currentPoint[1] <= mainPoint[1]) {
  19. corner = 3; // 左上
  20. } else if (currentPoint[0] >= mainPoint[0] && currentPoint[1] <= mainPoint[1]) {
  21. corner = 2; // 右上
  22. } else if (currentPoint[0] <= mainPoint[0] && currentPoint[1] >= mainPoint[1]) {
  23. corner = 4; // 左下
  24. } else if (currentPoint[0] >= mainPoint[0] && currentPoint[1] >= mainPoint[1]) {
  25. corner = 1; // 右下
  26. }
  27. return corner;
  28. }
  29. /**
  30. * 图片边缘检测检测时,计算图片偏移量
  31. */
  32. export function calcImageOffset(data, scale) {
  33. let left = data.imageLeft;
  34. let top = data.imageTop;
  35. scale = scale || data.scale;
  36. let imageWidth = data.imageWidth;
  37. let imageHeight = data.imageHeight;
  38. if ((data.angle / 90) % 2) {
  39. imageWidth = data.imageHeight;
  40. imageHeight = data.imageWidth;
  41. }
  42. const {
  43. clipX,
  44. clipWidth,
  45. clipY,
  46. clipHeight
  47. } = data;
  48. // 当前图片宽度/高度
  49. const currentImageSize = (size) => (size * scale) / 2;
  50. const currentImageWidth = currentImageSize(imageWidth);
  51. const currentImageHeight = currentImageSize(imageHeight);
  52. left = clipX + currentImageWidth >= left ? left : clipX + currentImageWidth;
  53. left = clipX + clipWidth - currentImageWidth <= left ? left : clipX + clipWidth - currentImageWidth;
  54. top = clipY + currentImageHeight >= top ? top : clipY + currentImageHeight;
  55. top = clipY + clipHeight - currentImageHeight <= top ? top : clipY + clipHeight - currentImageHeight;
  56. return {
  57. left,
  58. top,
  59. scale
  60. };
  61. }
  62. /**
  63. * 图片边缘检测时,计算图片缩放比例
  64. */
  65. export function calcImageScale(data, scale) {
  66. scale = scale || data.scale;
  67. let {
  68. imageWidth,
  69. imageHeight,
  70. clipWidth,
  71. clipHeight,
  72. angle
  73. } = data
  74. if ((angle / 90) % 2) {
  75. imageWidth = imageHeight;
  76. imageHeight = imageWidth;
  77. }
  78. if (imageWidth * scale < clipWidth) {
  79. scale = clipWidth / imageWidth;
  80. }
  81. if (imageHeight * scale < clipHeight) {
  82. scale = Math.max(scale, clipHeight / imageHeight);
  83. }
  84. return scale;
  85. }
  86. /**
  87. * 计算图片尺寸
  88. */
  89. export function calcImageSize(width, height, data) {
  90. let imageWidth = width,
  91. imageHeight = height;
  92. let {
  93. clipWidth,
  94. clipHeight,
  95. sysinfo,
  96. width: originWidth,
  97. height: originHeight
  98. } = data
  99. if (imageWidth && imageHeight) {
  100. if (imageWidth / imageHeight > (clipWidth || originWidth) / (clipWidth || originHeight)) {
  101. imageHeight = clipHeight || originHeight;
  102. imageWidth = (width / height) * imageHeight;
  103. } else {
  104. imageWidth = clipWidth || originWidth;
  105. imageHeight = (height / width) * imageWidth;
  106. }
  107. } else {
  108. let sys = sysinfo || uni.getSystemInfoSync();
  109. imageWidth = sys.windowWidth;
  110. imageHeight = 0;
  111. }
  112. return {
  113. imageWidth,
  114. imageHeight
  115. };
  116. }
  117. /**
  118. * 勾股定理求斜边
  119. */
  120. export function calcPythagoreanTheorem(width, height) {
  121. return Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
  122. }
  123. /**
  124. * 拖动裁剪框时计算
  125. */
  126. export function clipTouchMoveOfCalculate(data, event) {
  127. const clientX = event.touches[0].clientX;
  128. const clientY = event.touches[0].clientY;
  129. let {
  130. clipWidth,
  131. clipHeight,
  132. clipY: oldClipY,
  133. clipX: oldClipX,
  134. clipStart,
  135. isLockRatio,
  136. maxWidth,
  137. minWidth,
  138. maxHeight,
  139. minHeight
  140. } = data;
  141. maxWidth = maxWidth / 2;
  142. minWidth = minWidth / 2;
  143. minHeight = minHeight / 2;
  144. maxHeight = maxHeight / 2;
  145. let width = clipWidth,
  146. height = clipHeight,
  147. clipY = oldClipY,
  148. clipX = oldClipX,
  149. // 获取裁剪框实际宽度/高度
  150. // 如果大于最大值则使用最大值
  151. // 如果小于最小值则使用最小值
  152. sizecorrect = () => {
  153. width = width <= maxWidth ? (width >= minWidth ? width : minWidth) : maxWidth;
  154. height = height <= maxHeight ? (height >= minHeight ? height : minHeight) : maxHeight;
  155. },
  156. sizeinspect = () => {
  157. sizecorrect();
  158. if ((width > maxWidth || width < minWidth || height > maxHeight || height < minHeight) && isLockRatio) {
  159. return false;
  160. } else {
  161. return true;
  162. }
  163. };
  164. //if (clipStart.corner) {
  165. height = clipStart.height + (clipStart.corner > 1 && clipStart.corner < 4 ? 1 : -1) * (clipStart.y - clientY);
  166. //}
  167. switch (clipStart.corner) {
  168. case 1:
  169. width = clipStart.width - clipStart.x + clientX;
  170. if (isLockRatio) {
  171. height = width / (clipWidth / clipHeight);
  172. }
  173. if (!sizeinspect()) return;
  174. break;
  175. case 2:
  176. width = clipStart.width - clipStart.x + clientX;
  177. if (isLockRatio) {
  178. height = width / (clipWidth / clipHeight);
  179. }
  180. if (!sizeinspect()) {
  181. return;
  182. } else {
  183. clipY = clipStart.clipY - (height - clipStart.height);
  184. }
  185. break;
  186. case 3:
  187. width = clipStart.width + clipStart.x - clientX;
  188. if (isLockRatio) {
  189. height = width / (clipWidth / clipHeight);
  190. }
  191. if (!sizeinspect()) {
  192. return;
  193. } else {
  194. clipY = clipStart.clipY - (height - clipStart.height);
  195. clipX = clipStart.clipX - (width - clipStart.width);
  196. }
  197. break;
  198. case 4:
  199. width = clipStart.width + clipStart.x - clientX;
  200. if (isLockRatio) {
  201. height = width / (clipWidth / clipHeight);
  202. }
  203. if (!sizeinspect()) {
  204. return;
  205. } else {
  206. clipX = clipStart.clipX - (width - clipStart.width);
  207. }
  208. break;
  209. default:
  210. break;
  211. }
  212. return {
  213. width,
  214. height,
  215. clipX,
  216. clipY
  217. };
  218. }
  219. /**
  220. * 单指拖动图片计算偏移
  221. */
  222. export function imageTouchMoveOfCalcOffset(data, clientXForLeft, clientYForLeft) {
  223. let left = clientXForLeft - data.touchRelative[0].x,
  224. top = clientYForLeft - data.touchRelative[0].y;
  225. return {
  226. left,
  227. top
  228. };
  229. }