Deprecated: trim(): Passing null to parameter #1 ($string) of type string is deprecated in /var/www/html/extensions/Variables/includes/ExtVariables.php on line 198
CAFilter: Difference between revisions - iPhone Development Wiki

CAFilter: Difference between revisions

From iPhone Development Wiki
m (→‎Builtin static filters: Added 5 more known filters. Detail to be filled.)
(fully document the available filters.)
Line 10: Line 10:


== Builtin static filters ==
== Builtin static filters ==
[[Image:CAFilterDemo.png|right|thumb|Layers with filters applied, in order: (1) no filter; (2) gaussianBlur; (3) multiplyColor; (4) pageCurl]]
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.
[[Image:CAFilterDemo2.jpg]]


=== multiplyColor ===
=== multiplyColor ===
This will multiply an <tt>inputColor</tt> to the layer.
Multiplies color components to the layer. It accepts 1 input parameter:
* <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:
* <tt>inputColor0</tt>: Array of 4 floats indicating the RGBA components of the first point of the gradient.
* <tt>inputColor1</tt>: Array of 4 floats indicating the RGBA components of the first second of the gradient.
* <tt>inputPoint0</tt>: CGPoint (in the range (0,0) to (1,1)) for the location of the first point of the gradient.
* <tt>inputPoint1</tt>: CGPoint (in the range (0,0) to (1,1)) for the location of the second point of the gradient.


=== colorAdd ===
=== colorAdd ===
Add color components to the layer. It accepts 1 input parameter:
* <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:
* <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:
* <tt>inputColor</tt>: Array of 4 floats indicating the RGBA components of the color to apply.
* <tt>inputBias</tt>: 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.
* <tt>inputAmount</tt>: CGFloat between 0 and 1 for the strength of this effect. 1 is maximum, 0 is no-op.


=== gaussianBlur ===
=== gaussianBlur ===
The <tt>gaussianBlur</tt> filter can apply a Gaussian blur effect to the layer. It accepts a float parameter, <tt>inputRadius</tt>, which specifies the strength of blurring.
Apply a Gaussian blur effect to the layer. It accepts 2 input parameters:
* <tt>inputRadius</tt>: Strength of blurring, in pixels.
* <tt>inputHardEdges</tt>: Boolean indicating whether the edge of the layer should be softened too. Default is NO.


=== lanczosResize ===
=== lanczosResize ===
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.


=== pageCurl ===
=== pageCurl ===
The <tt>pageCurl</tt> filter gives the layer a page curl effect. It accepts 3 float parameters:
Gives the layer a page curl effect. It accepts 12 float parameters. 3 of them are expected to be modified:
* <tt>inputTime</tt> (from 0 to 1).
* <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>inputAngle</tt> (in radian, must not be a multiple of π/2).
* <tt>inputAngle</tt>: The angle in radian where the layer is curled up towards there. 0 is the +x direction, π/2 is the +y direction.
* <tt>inputRadius</tt> (in pixel, the radius of the curled part).
* <tt>inputRadius</tt>: The radius in pixel of the page's curvature.
While changing the other 9 from the default often produce very bad effect:
* <tt>inputStartAngle</tt>: The initial inclination of the curled page.
* <tt>inputEndAngle</tt>: The final inclination of the curled page.
* <tt>inputBackEnabled</tt>: Whether the back of the layer (curled up part) is shown.
* <tt>inputBackColor0</tt>: Color of the back of the layer.
* <tt>inputBackColor1</tt>: Color of the just curled up part, i.e. the edge between the back and the front of the layer.
* <tt>inputFrontEnabled</tt>: Whether the front of the layer (uncurled part) is shown.
* <tt>inputFrontColor</tt>: Equivalent to applying multiplyColor to the image.
* <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.


== Transition filters ==
== Transition filters ==

Revision as of 10:20, 22 January 2011

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.2.1. Note that colorAdd, colorSubtract, colorMonochrome and lanczosResize are not available in iOS 3.x. 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.

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.

References