CAFilter: Difference between revisions

From iPhone Development Wiki
(fully document the available filters.)
mNo edit summary
 
(3 intermediate revisions by 2 users not shown)
Line 2: Line 2:


== Applying filters to layers ==
== Applying filters to layers ==
Although the SDK says that the <tt>filters</tt> property is unused, you can actually apply filter effects with it, for example, to apply a Gaussian blur filter for a window:
Although the SDK says that the <tt>filters</tt> property is unused, you can actually apply filter effects with it, for example, to apply a Gaussian blur filter for a window:
<source lang="objc">
<source lang="objc">
Line 10: Line 11:


== Builtin static filters ==
== Builtin static filters ==
The following is a demo of all 8 built-in static filters available on 4.2.1. Note that colorAdd, colorSubtract, colorMonochrome and lanczosResize are not available in iOS 3.x.
 
The following is a demo of all 8 built-in static filters available on 4.3
 
[[Image:CAFilterDemo2.jpg]]
[[Image:CAFilterDemo2.jpg]]


=== multiplyColor ===
=== multiplyColor ===
Multiplies color components to the layer. It accepts 1 input parameter:
Multiplies color components to the layer. It accepts 1 input parameter:
* <tt>inputColor</tt>: Array of 4 floats indicating the RGBA components to multiply.
* <tt>inputColor</tt>: Array of 4 floats indicating the RGBA components to multiply.


=== multiplyGradient ===
=== multiplyGradient ===
Multiplies a linear gradient to the layer. It accepts 4 input parameters:
Multiplies a linear gradient to the layer. It accepts 4 input parameters:
* <tt>inputColor0</tt>: Array of 4 floats indicating the RGBA components of the first point of the gradient.
* <tt>inputColor0</tt>: Array of 4 floats indicating the RGBA components of the first point of the gradient.
Line 25: Line 30:


=== colorAdd ===
=== colorAdd ===
Add color components to the layer. It accepts 1 input parameter:
Add color components to the layer. It accepts 1 input parameter:
* <tt>inputColor</tt>: Array of 4 floats indicating the RGBA components to add.
* <tt>inputColor</tt>: Array of 4 floats indicating the RGBA components to add.


=== colorSubtract ===
=== colorSubtract ===
Subtract color components from the layer. It accepts 1 input parameter:
Subtract color components from the layer. It accepts 1 input parameter:
* <tt>inputColor</tt>: Array of 4 floats indicating the RGBA components to subtract.
* <tt>inputColor</tt>: Array of 4 floats indicating the RGBA components to subtract.


=== colorMonochrome ===
=== colorMonochrome ===
Apply monochrome effect to the layer. It accepts 3 input parameters:
Apply monochrome effect to the layer. It accepts 3 input parameters:
* <tt>inputColor</tt>: Array of 4 floats indicating the RGBA components of the color to apply.
* <tt>inputColor</tt>: Array of 4 floats indicating the RGBA components of the color to apply.
Line 39: Line 47:


=== gaussianBlur ===
=== gaussianBlur ===
Apply a Gaussian blur effect to the layer. It accepts 2 input parameters:
Apply a Gaussian blur effect to the layer. It accepts 2 input parameters:
* <tt>inputRadius</tt>: Strength of blurring, in pixels.
* <tt>inputRadius</tt>: Strength of blurring, in pixels.
Line 44: Line 53:


=== lanczosResize ===
=== lanczosResize ===
Resize the layer using the [http://en.wikipedia.org/wiki/Lanczos_algorithm Lanczos algorithm]. It accepts 1 input parameter:
Resize the layer using the [http://en.wikipedia.org/wiki/Lanczos_algorithm Lanczos algorithm]. It accepts 1 input parameter:
* <tt>inputScale</tt>: CGFloat for the resize scale.
* <tt>inputScale</tt>: CGFloat for the resize scale.


=== pageCurl ===
=== pageCurl ===
Gives the layer a page curl effect. It accepts 12 float parameters. 3 of them are expected to be modified:
Gives the layer a page curl effect. It accepts 12 float parameters. 3 of them are expected to be modified:
* <tt>inputTime</tt>: CGFloat between 0 and 1, referring to the time this snapshot is taken when the a page curl animation is played.
* <tt>inputTime</tt>: CGFloat between 0 and 1, referring to the time this snapshot is taken when the a page curl animation is played.
Line 62: Line 73:
* <tt>inputShadowColor</tt>: The shadow color that glows around the curled part.  
* <tt>inputShadowColor</tt>: The shadow color that glows around the curled part.  
* <tt>inputShadowBounds</tt>: CGRect in pixel relative to the origin of the layer where the shadow will glow around this rectangle.
* <tt>inputShadowBounds</tt>: CGRect in pixel relative to the origin of the layer where the shadow will glow around this rectangle.
== Availability ==
The following shows the availability of different CAFilters starting from 2.0
{| class="wikitable"
|-
! CAFilter !! Availability
|-
| multiplyColor || 2.0–
|-
| multiplyGradient || 2.0–
|-
| colorAdd || 4.0–
|-
| colorSubtract || 4.0–
|-
| colorMonochrome || 4.0–
|-
| gaussianBlur || <tt>inputRadius</tt>: 3.0–<br /><tt>inputHardEdges</tt>: 4.2–
|-
| lanczosResize || 4.0–
|-
| pageCurl || First 3 arguments: 2.0–;<br />Last 9 arguments: 3.2–<br /><tt>inputShadowRadius, inputShadowErosion</tt>: 3.2 only
|-
| fog || 2.0–3.2
|-
| lighting || 2.0–3.2
|-
| clear<br />copy<br />sourceOver<br />sourceIn<br />sourceOut<br />sourceAtop<br />destOver<br />destIn<br />destOut<br />destAtop<br />xor<br />plusL<br />multiply
| 2.0–3.2
|-
|}


== Transition filters ==
== Transition filters ==
{{main|CATransition}}
{{main|CATransition}}
Transition filters also uses CAFilter as the interface, as CATransition also has a <tt>filter</tt> property. But the transition filters cannot be treated as static filters and applied to layers directly.
Transition filters also uses CAFilter as the interface, as CATransition also has a <tt>filter</tt> property. But the transition filters cannot be treated as static filters and applied to layers directly.


== References ==
== External links ==
 
{{IPFHeader|QuartzCore}}
{{IPFHeader|QuartzCore}}

Latest revision as of 03:46, 26 October 2014

CAFilter is an Objective-C wrapper for creating static or transition image filters.

Applying filters to layers

Although the SDK says that the filters property is unused, you can actually apply filter effects with it, for example, to apply a Gaussian blur filter for a window:

CAFilter* filter = [CAFilter filterWithName:@"gaussianBlur"];
[filter setValue:[NSNumber numberWithFloat:5] forKey:@"inputRadius"];
window.layer.filters = [NSArray arrayWithObject:filter];

Builtin static filters

The following is a demo of all 8 built-in static filters available on 4.3

CAFilterDemo2.jpg

multiplyColor

Multiplies color components to the layer. It accepts 1 input parameter:

  • inputColor: Array of 4 floats indicating the RGBA components to multiply.

multiplyGradient

Multiplies a linear gradient to the layer. It accepts 4 input parameters:

  • inputColor0: Array of 4 floats indicating the RGBA components of the first point of the gradient.
  • inputColor1: Array of 4 floats indicating the RGBA components of the first second of the gradient.
  • inputPoint0: CGPoint (in the range (0,0) to (1,1)) for the location of the first point of the gradient.
  • inputPoint1: CGPoint (in the range (0,0) to (1,1)) for the location of the second point of the gradient.

colorAdd

Add color components to the layer. It accepts 1 input parameter:

  • inputColor: Array of 4 floats indicating the RGBA components to add.

colorSubtract

Subtract color components from the layer. It accepts 1 input parameter:

  • inputColor: Array of 4 floats indicating the RGBA components to subtract.

colorMonochrome

Apply monochrome effect to the layer. It accepts 3 input parameters:

  • inputColor: Array of 4 floats indicating the RGBA components of the color to apply.
  • inputBias: CGFloat between -1 and 1 for how close should the layer bias to the input color. If this value is -1, the whole layer is blackened. If this value is 0, this effect is equivalent to colorMultiply. If this value is 1, the whole layer is filled with the input color.
  • inputAmount: CGFloat between 0 and 1 for the strength of this effect. 1 is maximum, 0 is no-op.

gaussianBlur

Apply a Gaussian blur effect to the layer. It accepts 2 input parameters:

  • inputRadius: Strength of blurring, in pixels.
  • inputHardEdges: Boolean indicating whether the edge of the layer should be softened too. Default is NO.

lanczosResize

Resize the layer using the Lanczos algorithm. It accepts 1 input parameter:

  • inputScale: CGFloat for the resize scale.

pageCurl

Gives the layer a page curl effect. It accepts 12 float parameters. 3 of them are expected to be modified:

  • inputTime: CGFloat between 0 and 1, referring to the time this snapshot is taken when the a page curl animation is played.
  • inputAngle: The angle in radian where the layer is curled up towards there. 0 is the +x direction, π/2 is the +y direction.
  • inputRadius: The radius in pixel of the page's curvature.

While changing the other 9 from the default often produce very bad effect:

  • inputStartAngle: The initial inclination of the curled page.
  • inputEndAngle: The final inclination of the curled page.
  • inputBackEnabled: Whether the back of the layer (curled up part) is shown.
  • inputBackColor0: Color of the back of the layer.
  • inputBackColor1: Color of the just curled up part, i.e. the edge between the back and the front of the layer.
  • inputFrontEnabled: Whether the front of the layer (uncurled part) is shown.
  • inputFrontColor: Equivalent to applying multiplyColor to the image.
  • inputShadowColor: The shadow color that glows around the curled part.
  • inputShadowBounds: CGRect in pixel relative to the origin of the layer where the shadow will glow around this rectangle.

Availability

The following shows the availability of different CAFilters starting from 2.0

CAFilter Availability
multiplyColor 2.0–
multiplyGradient 2.0–
colorAdd 4.0–
colorSubtract 4.0–
colorMonochrome 4.0–
gaussianBlur inputRadius: 3.0–
inputHardEdges: 4.2–
lanczosResize 4.0–
pageCurl First 3 arguments: 2.0–;
Last 9 arguments: 3.2–
inputShadowRadius, inputShadowErosion: 3.2 only
fog 2.0–3.2
lighting 2.0–3.2
clear
copy
sourceOver
sourceIn
sourceOut
sourceAtop
destOver
destIn
destOut
destAtop
xor
plusL
multiply
2.0–3.2

Transition filters

Transition filters also uses CAFilter as the interface, as CATransition also has a filter property. But the transition filters cannot be treated as static filters and applied to layers directly.

External links