SVGMatte3Effect.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. import {
  2. createElementID,
  3. } from '../../../utils/common';
  4. import createNS from '../../../utils/helpers/svg_elements';
  5. var _svgMatteSymbols = [];
  6. function SVGMatte3Effect(filterElem, filterManager, elem) {
  7. this.initialized = false;
  8. this.filterManager = filterManager;
  9. this.filterElem = filterElem;
  10. this.elem = elem;
  11. elem.matteElement = createNS('g');
  12. elem.matteElement.appendChild(elem.layerElement);
  13. elem.matteElement.appendChild(elem.transformedElement);
  14. elem.baseElement = elem.matteElement;
  15. }
  16. SVGMatte3Effect.prototype.findSymbol = function (mask) {
  17. var i = 0;
  18. var len = _svgMatteSymbols.length;
  19. while (i < len) {
  20. if (_svgMatteSymbols[i] === mask) {
  21. return _svgMatteSymbols[i];
  22. }
  23. i += 1;
  24. }
  25. return null;
  26. };
  27. SVGMatte3Effect.prototype.replaceInParent = function (mask, symbolId) {
  28. var parentNode = mask.layerElement.parentNode;
  29. if (!parentNode) {
  30. return;
  31. }
  32. var children = parentNode.children;
  33. var i = 0;
  34. var len = children.length;
  35. while (i < len) {
  36. if (children[i] === mask.layerElement) {
  37. break;
  38. }
  39. i += 1;
  40. }
  41. var nextChild;
  42. if (i <= len - 2) {
  43. nextChild = children[i + 1];
  44. }
  45. var useElem = createNS('use');
  46. useElem.setAttribute('href', '#' + symbolId);
  47. if (nextChild) {
  48. parentNode.insertBefore(useElem, nextChild);
  49. } else {
  50. parentNode.appendChild(useElem);
  51. }
  52. };
  53. SVGMatte3Effect.prototype.setElementAsMask = function (elem, mask) {
  54. if (!this.findSymbol(mask)) {
  55. var symbolId = createElementID();
  56. var masker = createNS('mask');
  57. masker.setAttribute('id', mask.layerId);
  58. masker.setAttribute('mask-type', 'alpha');
  59. _svgMatteSymbols.push(mask);
  60. var defs = elem.globalData.defs;
  61. defs.appendChild(masker);
  62. var symbol = createNS('symbol');
  63. symbol.setAttribute('id', symbolId);
  64. this.replaceInParent(mask, symbolId);
  65. symbol.appendChild(mask.layerElement);
  66. defs.appendChild(symbol);
  67. var useElem = createNS('use');
  68. useElem.setAttribute('href', '#' + symbolId);
  69. masker.appendChild(useElem);
  70. mask.data.hd = false;
  71. mask.show();
  72. }
  73. elem.setMatte(mask.layerId);
  74. };
  75. SVGMatte3Effect.prototype.initialize = function () {
  76. var ind = this.filterManager.effectElements[0].p.v;
  77. var elements = this.elem.comp.elements;
  78. var i = 0;
  79. var len = elements.length;
  80. while (i < len) {
  81. if (elements[i] && elements[i].data.ind === ind) {
  82. this.setElementAsMask(this.elem, elements[i]);
  83. }
  84. i += 1;
  85. }
  86. this.initialized = true;
  87. };
  88. SVGMatte3Effect.prototype.renderFrame = function () {
  89. if (!this.initialized) {
  90. this.initialize();
  91. }
  92. };
  93. export default SVGMatte3Effect;