graphic.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. import { createElement, XLINKNS } from '../svg/core.js';
  2. import { getMatrixStr, TEXT_ALIGN_TO_ANCHOR, adjustTextY } from '../svg/helper.js';
  3. import { getLineHeight } from '../contain/text.js';
  4. import SVGPathRebuilder from '../svg/SVGPathRebuilder.js';
  5. import mapStyleToAttrs from '../svg/mapStyleToAttrs.js';
  6. import { DEFAULT_FONT } from '../core/platform.js';
  7. function setTransform(svgEl, m) {
  8. if (m) {
  9. attr(svgEl, 'transform', getMatrixStr(m));
  10. }
  11. }
  12. function attr(el, key, val) {
  13. if (!val || val.type !== 'linear' && val.type !== 'radial') {
  14. el.setAttribute(key, val);
  15. }
  16. }
  17. function attrXLink(el, key, val) {
  18. el.setAttributeNS(XLINKNS, key, val);
  19. }
  20. function attrXML(el, key, val) {
  21. el.setAttributeNS('http://www.w3.org/XML/1998/namespace', key, val);
  22. }
  23. function bindStyle(svgEl, style, el) {
  24. mapStyleToAttrs(function (key, val) { return attr(svgEl, key, val); }, style, el, true);
  25. }
  26. var svgPath = {
  27. brush: function (el) {
  28. var style = el.style;
  29. var svgEl = el.__svgEl;
  30. if (!svgEl) {
  31. svgEl = createElement('path');
  32. el.__svgEl = svgEl;
  33. }
  34. if (!el.path) {
  35. el.createPathProxy();
  36. }
  37. var path = el.path;
  38. if (el.shapeChanged()) {
  39. path.beginPath();
  40. el.buildPath(path, el.shape);
  41. el.pathUpdated();
  42. }
  43. var pathVersion = path.getVersion();
  44. var elExt = el;
  45. var svgPathBuilder = elExt.__svgPathBuilder;
  46. if (elExt.__svgPathVersion !== pathVersion || !svgPathBuilder || el.style.strokePercent < 1) {
  47. if (!svgPathBuilder) {
  48. svgPathBuilder = elExt.__svgPathBuilder = new SVGPathRebuilder();
  49. }
  50. svgPathBuilder.reset();
  51. path.rebuildPath(svgPathBuilder, el.style.strokePercent);
  52. svgPathBuilder.generateStr();
  53. elExt.__svgPathVersion = pathVersion;
  54. }
  55. attr(svgEl, 'd', svgPathBuilder.getStr());
  56. bindStyle(svgEl, style, el);
  57. setTransform(svgEl, el.transform);
  58. }
  59. };
  60. export { svgPath as path };
  61. var svgImage = {
  62. brush: function (el) {
  63. var style = el.style;
  64. var image = style.image;
  65. if (image instanceof HTMLImageElement) {
  66. image = image.src;
  67. }
  68. else if (image instanceof HTMLCanvasElement) {
  69. image = image.toDataURL();
  70. }
  71. if (!image) {
  72. return;
  73. }
  74. var x = style.x || 0;
  75. var y = style.y || 0;
  76. var dw = style.width;
  77. var dh = style.height;
  78. var svgEl = el.__svgEl;
  79. if (!svgEl) {
  80. svgEl = createElement('image');
  81. el.__svgEl = svgEl;
  82. }
  83. if (image !== el.__imageSrc) {
  84. attrXLink(svgEl, 'href', image);
  85. el.__imageSrc = image;
  86. }
  87. attr(svgEl, 'width', dw + '');
  88. attr(svgEl, 'height', dh + '');
  89. attr(svgEl, 'x', x + '');
  90. attr(svgEl, 'y', y + '');
  91. bindStyle(svgEl, style, el);
  92. setTransform(svgEl, el.transform);
  93. }
  94. };
  95. export { svgImage as image };
  96. var svgText = {
  97. brush: function (el) {
  98. var style = el.style;
  99. var text = style.text;
  100. text != null && (text += '');
  101. if (!text || isNaN(style.x) || isNaN(style.y)) {
  102. return;
  103. }
  104. var textSvgEl = el.__svgEl;
  105. if (!textSvgEl) {
  106. textSvgEl = createElement('text');
  107. attrXML(textSvgEl, 'xml:space', 'preserve');
  108. el.__svgEl = textSvgEl;
  109. }
  110. var font = style.font || DEFAULT_FONT;
  111. var textSvgElStyle = textSvgEl.style;
  112. textSvgElStyle.font = font;
  113. textSvgEl.textContent = text;
  114. bindStyle(textSvgEl, style, el);
  115. setTransform(textSvgEl, el.transform);
  116. var x = style.x || 0;
  117. var y = adjustTextY(style.y || 0, getLineHeight(font), style.textBaseline);
  118. var textAlign = TEXT_ALIGN_TO_ANCHOR[style.textAlign]
  119. || style.textAlign;
  120. attr(textSvgEl, 'dominant-baseline', 'central');
  121. attr(textSvgEl, 'text-anchor', textAlign);
  122. attr(textSvgEl, 'x', x + '');
  123. attr(textSvgEl, 'y', y + '');
  124. }
  125. };
  126. export { svgText as text };