You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

convertShapeToPath.js 4.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. 'use strict';
  2. exports.type = 'perItem';
  3. exports.active = true;
  4. exports.description = 'converts basic shapes to more compact path form';
  5. exports.params = {
  6. convertArcs: false
  7. };
  8. var none = { value: 0 },
  9. regNumber = /[-+]?(?:\d*\.\d+|\d+\.?)(?:[eE][-+]?\d+)?/g;
  10. /**
  11. * Converts basic shape to more compact path.
  12. * It also allows further optimizations like
  13. * combining paths with similar attributes.
  14. *
  15. * @see http://www.w3.org/TR/SVG/shapes.html
  16. *
  17. * @param {Object} item current iteration item
  18. * @param {Object} params plugin params
  19. * @return {Boolean} if false, item will be filtered out
  20. *
  21. * @author Lev Solntsev
  22. */
  23. exports.fn = function(item, params) {
  24. var convertArcs = params && params.convertArcs;
  25. if (
  26. item.isElem('rect') &&
  27. item.hasAttr('width') &&
  28. item.hasAttr('height') &&
  29. !item.hasAttr('rx') &&
  30. !item.hasAttr('ry')
  31. ) {
  32. var x = +(item.attr('x') || none).value,
  33. y = +(item.attr('y') || none).value,
  34. width = +item.attr('width').value,
  35. height = +item.attr('height').value;
  36. // Values like '100%' compute to NaN, thus running after
  37. // cleanupNumericValues when 'px' units has already been removed.
  38. // TODO: Calculate sizes from % and non-px units if possible.
  39. if (isNaN(x - y + width - height)) return;
  40. var pathData =
  41. 'M' + x + ' ' + y +
  42. 'H' + (x + width) +
  43. 'V' + (y + height) +
  44. 'H' + x +
  45. 'z';
  46. item.addAttr({
  47. name: 'd',
  48. value: pathData,
  49. prefix: '',
  50. local: 'd'
  51. });
  52. item.renameElem('path')
  53. .removeAttr(['x', 'y', 'width', 'height']);
  54. } else if (item.isElem('line')) {
  55. var x1 = +(item.attr('x1') || none).value,
  56. y1 = +(item.attr('y1') || none).value,
  57. x2 = +(item.attr('x2') || none).value,
  58. y2 = +(item.attr('y2') || none).value;
  59. if (isNaN(x1 - y1 + x2 - y2)) return;
  60. item.addAttr({
  61. name: 'd',
  62. value: 'M' + x1 + ' ' + y1 + 'L' + x2 + ' ' + y2,
  63. prefix: '',
  64. local: 'd'
  65. });
  66. item.renameElem('path')
  67. .removeAttr(['x1', 'y1', 'x2', 'y2']);
  68. } else if ((
  69. item.isElem('polyline') ||
  70. item.isElem('polygon')
  71. ) &&
  72. item.hasAttr('points')
  73. ) {
  74. var coords = (item.attr('points').value.match(regNumber) || []).map(Number);
  75. if (coords.length < 4) return false;
  76. item.addAttr({
  77. name: 'd',
  78. value: 'M' + coords.slice(0,2).join(' ') +
  79. 'L' + coords.slice(2).join(' ') +
  80. (item.isElem('polygon') ? 'z' : ''),
  81. prefix: '',
  82. local: 'd'
  83. });
  84. item.renameElem('path')
  85. .removeAttr('points');
  86. } else if (item.isElem('circle') && convertArcs) {
  87. var cx = +(item.attr('cx') || none).value;
  88. var cy = +(item.attr('cy') || none).value;
  89. var r = +(item.attr('r') || none).value;
  90. if (isNaN(cx - cy + r)) {
  91. return;
  92. }
  93. var cPathData =
  94. 'M' + cx + ' ' + (cy - r) +
  95. 'A' + r + ' ' + r + ' 0 1 0 ' + cx + ' ' + (cy + r) +
  96. 'A' + r + ' ' + r + ' 0 1 0 ' + cx + ' ' + (cy - r) +
  97. 'Z';
  98. item.addAttr({
  99. name: 'd',
  100. value: cPathData,
  101. prefix: '',
  102. local: 'd',
  103. });
  104. item.renameElem('path').removeAttr(['cx', 'cy', 'r']);
  105. } else if (item.isElem('ellipse') && convertArcs) {
  106. var ecx = +(item.attr('cx') || none).value;
  107. var ecy = +(item.attr('cy') || none).value;
  108. var rx = +(item.attr('rx') || none).value;
  109. var ry = +(item.attr('ry') || none).value;
  110. if (isNaN(ecx - ecy + rx - ry)) {
  111. return;
  112. }
  113. var ePathData =
  114. 'M' + ecx + ' ' + (ecy - ry) +
  115. 'A' + rx + ' ' + ry + ' 0 1 0 ' + ecx + ' ' + (ecy + ry) +
  116. 'A' + rx + ' ' + ry + ' 0 1 0 ' + ecx + ' ' + (ecy - ry) +
  117. 'Z';
  118. item.addAttr({
  119. name: 'd',
  120. value: ePathData,
  121. prefix: '',
  122. local: 'd',
  123. });
  124. item.renameElem('path').removeAttr(['cx', 'cy', 'rx', 'ry']);
  125. }
  126. };