Source: filters/blur/BlurFilter.js

filters/blur/BlurFilter.js

  1. import * as core from '../../core';
  2. import BlurXFilter from './BlurXFilter';
  3. import BlurYFilter from './BlurYFilter';
  4. /**
  5. * The BlurFilter applies a Gaussian blur to an object.
  6. * The strength of the blur can be set for x- and y-axis separately.
  7. *
  8. * @class
  9. * @extends PIXI.Filter
  10. * @memberof PIXI.filters
  11. */
  12. export default class BlurFilter extends core.Filter
  13. {
  14. /**
  15. * @param {number} strength - The strength of the blur filter.
  16. * @param {number} quality - The quality of the blur filter.
  17. * @param {number} resolution - The resolution of the blur filter.
  18. * @param {number} [kernelSize=5] - The kernelSize of the blur filter.Options: 5, 7, 9, 11, 13, 15.
  19. */
  20. constructor(strength, quality, resolution, kernelSize)
  21. {
  22. super();
  23. this.blurXFilter = new BlurXFilter(strength, quality, resolution, kernelSize);
  24. this.blurYFilter = new BlurYFilter(strength, quality, resolution, kernelSize);
  25. this.padding = 0;
  26. this.resolution = resolution || core.settings.RESOLUTION;
  27. this.quality = quality || 4;
  28. this.blur = strength || 8;
  29. }
  30. /**
  31. * Applies the filter.
  32. *
  33. * @param {PIXI.FilterManager} filterManager - The manager.
  34. * @param {PIXI.RenderTarget} input - The input target.
  35. * @param {PIXI.RenderTarget} output - The output target.
  36. */
  37. apply(filterManager, input, output)
  38. {
  39. const renderTarget = filterManager.getRenderTarget(true);
  40. this.blurXFilter.apply(filterManager, input, renderTarget, true);
  41. this.blurYFilter.apply(filterManager, renderTarget, output, false);
  42. filterManager.returnRenderTarget(renderTarget);
  43. }
  44. /**
  45. * Sets the strength of both the blurX and blurY properties simultaneously
  46. *
  47. * @member {number}
  48. * @default 2
  49. */
  50. get blur()
  51. {
  52. return this.blurXFilter.blur;
  53. }
  54. set blur(value) // eslint-disable-line require-jsdoc
  55. {
  56. this.blurXFilter.blur = this.blurYFilter.blur = value;
  57. this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2;
  58. }
  59. /**
  60. * Sets the number of passes for blur. More passes means higher quaility bluring.
  61. *
  62. * @member {number}
  63. * @default 1
  64. */
  65. get quality()
  66. {
  67. return this.blurXFilter.quality;
  68. }
  69. set quality(value) // eslint-disable-line require-jsdoc
  70. {
  71. this.blurXFilter.quality = this.blurYFilter.quality = value;
  72. }
  73. /**
  74. * Sets the strength of the blurX property
  75. *
  76. * @member {number}
  77. * @default 2
  78. */
  79. get blurX()
  80. {
  81. return this.blurXFilter.blur;
  82. }
  83. set blurX(value) // eslint-disable-line require-jsdoc
  84. {
  85. this.blurXFilter.blur = value;
  86. this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2;
  87. }
  88. /**
  89. * Sets the strength of the blurY property
  90. *
  91. * @member {number}
  92. * @default 2
  93. */
  94. get blurY()
  95. {
  96. return this.blurYFilter.blur;
  97. }
  98. set blurY(value) // eslint-disable-line require-jsdoc
  99. {
  100. this.blurYFilter.blur = value;
  101. this.padding = Math.max(Math.abs(this.blurXFilter.strength), Math.abs(this.blurYFilter.strength)) * 2;
  102. }
  103. /**
  104. * Sets the blendmode of the filter
  105. *
  106. * @member {number}
  107. * @default PIXI.BLEND_MODES.NORMAL
  108. */
  109. get blendMode()
  110. {
  111. return this.blurYFilter._blendMode;
  112. }
  113. set blendMode(value) // eslint-disable-line require-jsdoc
  114. {
  115. this.blurYFilter._blendMode = value;
  116. }
  117. }