SVGTintEffect.js 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. import createNS from '../../../utils/helpers/svg_elements';
  2. import SVGComposableEffect from './SVGComposableEffect';
  3. import {
  4. extendPrototype,
  5. } from '../../../utils/functionExtensions';
  6. var linearFilterValue = '0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0';
  7. function SVGTintFilter(filter, filterManager, elem, id, source) {
  8. this.filterManager = filterManager;
  9. var feColorMatrix = createNS('feColorMatrix');
  10. feColorMatrix.setAttribute('type', 'matrix');
  11. feColorMatrix.setAttribute('color-interpolation-filters', 'linearRGB');
  12. feColorMatrix.setAttribute('values', linearFilterValue + ' 1 0');
  13. this.linearFilter = feColorMatrix;
  14. feColorMatrix.setAttribute('result', id + '_tint_1');
  15. filter.appendChild(feColorMatrix);
  16. feColorMatrix = createNS('feColorMatrix');
  17. feColorMatrix.setAttribute('type', 'matrix');
  18. feColorMatrix.setAttribute('color-interpolation-filters', 'sRGB');
  19. feColorMatrix.setAttribute('values', '1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0');
  20. feColorMatrix.setAttribute('result', id + '_tint_2');
  21. filter.appendChild(feColorMatrix);
  22. this.matrixFilter = feColorMatrix;
  23. var feMerge = this.createMergeNode(
  24. id,
  25. [
  26. source,
  27. id + '_tint_1',
  28. id + '_tint_2',
  29. ]
  30. );
  31. filter.appendChild(feMerge);
  32. }
  33. extendPrototype([SVGComposableEffect], SVGTintFilter);
  34. SVGTintFilter.prototype.renderFrame = function (forceRender) {
  35. if (forceRender || this.filterManager._mdf) {
  36. var colorBlack = this.filterManager.effectElements[0].p.v;
  37. var colorWhite = this.filterManager.effectElements[1].p.v;
  38. var opacity = this.filterManager.effectElements[2].p.v / 100;
  39. this.linearFilter.setAttribute('values', linearFilterValue + ' ' + opacity + ' 0');
  40. this.matrixFilter.setAttribute('values', (colorWhite[0] - colorBlack[0]) + ' 0 0 0 ' + colorBlack[0] + ' ' + (colorWhite[1] - colorBlack[1]) + ' 0 0 0 ' + colorBlack[1] + ' ' + (colorWhite[2] - colorBlack[2]) + ' 0 0 0 ' + colorBlack[2] + ' 0 0 0 1 0');
  41. }
  42. };
  43. export default SVGTintFilter;