5ce996598cc5b6fc0cb297f6ab23a807be7788dbdabea6ab6bb0f387ad2902d13fe0718ef0ecf14690e97ada79b5548248729e51517953b7e57cb8c2f9d9d6 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var shared = require('@vue/shared');
  4. const FontGap = 3;
  5. const TEXT_ALIGN_RATIO_MAP = {
  6. left: [0, 0.5],
  7. start: [0, 0.5],
  8. center: [0.5, 0],
  9. right: [1, -0.5],
  10. end: [1, -0.5]
  11. };
  12. function prepareCanvas(width, height, ratio = 1) {
  13. const canvas = document.createElement("canvas");
  14. const ctx = canvas.getContext("2d");
  15. const realWidth = width * ratio;
  16. const realHeight = height * ratio;
  17. canvas.setAttribute("width", `${realWidth}px`);
  18. canvas.setAttribute("height", `${realHeight}px`);
  19. ctx.save();
  20. return [ctx, canvas, realWidth, realHeight];
  21. }
  22. function useClips() {
  23. function getClips(content, rotate, ratio, width, height, font, gapX, gapY, space) {
  24. const [ctx, canvas, contentWidth, contentHeight] = prepareCanvas(width, height, ratio);
  25. if (content instanceof HTMLImageElement) {
  26. ctx.drawImage(content, 0, 0, contentWidth, contentHeight);
  27. } else {
  28. const {
  29. color,
  30. fontSize,
  31. fontStyle,
  32. fontWeight,
  33. fontFamily,
  34. textAlign,
  35. textBaseline
  36. } = font;
  37. const mergedFontSize = Number(fontSize) * ratio;
  38. ctx.font = `${fontStyle} normal ${fontWeight} ${mergedFontSize}px/${height}px ${fontFamily}`;
  39. ctx.fillStyle = color;
  40. ctx.textAlign = textAlign;
  41. ctx.textBaseline = textBaseline;
  42. const contents = shared.isArray(content) ? content : [content];
  43. contents == null ? void 0 : contents.forEach((item, index) => {
  44. const [alignRatio, spaceRatio] = TEXT_ALIGN_RATIO_MAP[textAlign];
  45. ctx.fillText(item != null ? item : "", contentWidth * alignRatio + space * spaceRatio, index * (mergedFontSize + FontGap * ratio));
  46. });
  47. }
  48. const angle = Math.PI / 180 * Number(rotate);
  49. const maxSize = Math.max(width, height);
  50. const [rCtx, rCanvas, realMaxSize] = prepareCanvas(maxSize, maxSize, ratio);
  51. rCtx.translate(realMaxSize / 2, realMaxSize / 2);
  52. rCtx.rotate(angle);
  53. if (contentWidth > 0 && contentHeight > 0) {
  54. rCtx.drawImage(canvas, -contentWidth / 2, -contentHeight / 2);
  55. }
  56. function getRotatePos(x, y) {
  57. const targetX = x * Math.cos(angle) - y * Math.sin(angle);
  58. const targetY = x * Math.sin(angle) + y * Math.cos(angle);
  59. return [targetX, targetY];
  60. }
  61. let left = 0;
  62. let right = 0;
  63. let top = 0;
  64. let bottom = 0;
  65. const halfWidth = contentWidth / 2;
  66. const halfHeight = contentHeight / 2;
  67. const points = [
  68. [0 - halfWidth, 0 - halfHeight],
  69. [0 + halfWidth, 0 - halfHeight],
  70. [0 + halfWidth, 0 + halfHeight],
  71. [0 - halfWidth, 0 + halfHeight]
  72. ];
  73. points.forEach(([x, y]) => {
  74. const [targetX, targetY] = getRotatePos(x, y);
  75. left = Math.min(left, targetX);
  76. right = Math.max(right, targetX);
  77. top = Math.min(top, targetY);
  78. bottom = Math.max(bottom, targetY);
  79. });
  80. const cutLeft = left + realMaxSize / 2;
  81. const cutTop = top + realMaxSize / 2;
  82. const cutWidth = right - left;
  83. const cutHeight = bottom - top;
  84. const realGapX = gapX * ratio;
  85. const realGapY = gapY * ratio;
  86. const filledWidth = (cutWidth + realGapX) * 2;
  87. const filledHeight = cutHeight + realGapY;
  88. const [fCtx, fCanvas] = prepareCanvas(filledWidth, filledHeight);
  89. function drawImg(targetX = 0, targetY = 0) {
  90. fCtx.drawImage(rCanvas, cutLeft, cutTop, cutWidth, cutHeight, targetX, targetY, cutWidth, cutHeight);
  91. }
  92. drawImg();
  93. drawImg(cutWidth + realGapX, -cutHeight / 2 - realGapY / 2);
  94. drawImg(cutWidth + realGapX, +cutHeight / 2 + realGapY / 2);
  95. return [fCanvas.toDataURL(), filledWidth / ratio, filledHeight / ratio];
  96. }
  97. return getClips;
  98. }
  99. exports.FontGap = FontGap;
  100. exports["default"] = useClips;
  101. //# sourceMappingURL=useClips.js.map