SVGGaussianBlurEffect.js 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. import createNS from '../../../utils/helpers/svg_elements';
  2. function SVGGaussianBlurEffect(filter, filterManager, elem, id) {
  3. // Outset the filter region by 100% on all sides to accommodate blur expansion.
  4. filter.setAttribute('x', '-100%');
  5. filter.setAttribute('y', '-100%');
  6. filter.setAttribute('width', '300%');
  7. filter.setAttribute('height', '300%');
  8. this.filterManager = filterManager;
  9. var feGaussianBlur = createNS('feGaussianBlur');
  10. feGaussianBlur.setAttribute('result', id);
  11. filter.appendChild(feGaussianBlur);
  12. this.feGaussianBlur = feGaussianBlur;
  13. }
  14. SVGGaussianBlurEffect.prototype.renderFrame = function (forceRender) {
  15. if (forceRender || this.filterManager._mdf) {
  16. // Empirical value, matching AE's blur appearance.
  17. var kBlurrinessToSigma = 0.3;
  18. var sigma = this.filterManager.effectElements[0].p.v * kBlurrinessToSigma;
  19. // Dimensions mapping:
  20. //
  21. // 1 -> horizontal & vertical
  22. // 2 -> horizontal only
  23. // 3 -> vertical only
  24. //
  25. var dimensions = this.filterManager.effectElements[1].p.v;
  26. var sigmaX = (dimensions == 3) ? 0 : sigma; // eslint-disable-line eqeqeq
  27. var sigmaY = (dimensions == 2) ? 0 : sigma; // eslint-disable-line eqeqeq
  28. this.feGaussianBlur.setAttribute('stdDeviation', sigmaX + ' ' + sigmaY);
  29. // Repeat edges mapping:
  30. //
  31. // 0 -> off -> duplicate
  32. // 1 -> on -> wrap
  33. var edgeMode = (this.filterManager.effectElements[2].p.v == 1) ? 'wrap' : 'duplicate'; // eslint-disable-line eqeqeq
  34. this.feGaussianBlur.setAttribute('edgeMode', edgeMode);
  35. }
  36. };
  37. export default SVGGaussianBlurEffect;