[cairo-commit] [cairo-www] 8 commits - src/local.css src/operators src/operators.mdwn src/samples
Carl Worth
cworth at freedesktop.org
Mon Oct 29 08:51:52 PDT 2007
src/local.css | 10 -
src/operators.mdwn | 418 ++++++++++++++++++++++++++++++++++++++++++++
src/operators/add.png |binary
src/operators/atop.png |binary
src/operators/clear.png |binary
src/operators/dest.png |binary
src/operators/dest_atop.png |binary
src/operators/dest_in.png |binary
src/operators/dest_out.png |binary
src/operators/dest_over.png |binary
src/operators/in.png |binary
src/operators/ops.c | 88 +++++++++
src/operators/out.png |binary
src/operators/over.png |binary
src/operators/saturate.png |binary
src/operators/source.png |binary
src/operators/xor.png |binary
src/samples/fill_style.mdwn | 19 ++
src/samples/fill_style.png |binary
19 files changed, 534 insertions(+), 1 deletion(-)
New commits:
commit 44779674ab5259476b0d43f316579a6fa8029cdb
Merge: df63e03... 7eca155...
Author: Carl Worth <cworth at cworth.org>
Date: Mon Oct 29 08:55:43 2007 -0700
Merge branch 'master' of annarchy.freedesktop.org:/srv/cairo.freedesktop.org/wiki
commit df63e0309d04023c1919b3922acf1df1d024607c
Author: Nis Martensen <nis.martensen at web.de>
Date: Sat Oct 13 10:58:17 2007 +0200
Describe ADD and SATURATE operators, add links
Also move the link to the Porter/Duff paper to the links section.
diff --git a/src/operators.mdwn b/src/operators.mdwn
index 7e9f100..37da3af 100644
--- a/src/operators.mdwn
+++ b/src/operators.mdwn
@@ -2,8 +2,7 @@
Normally, you will be using cairo to draw objects on top of each other.
But cairo can do differently, if you need it! In fact, you can use all
-the Porter/Duff compositing operators described here:
-<http://keithp.com/~keithp/porterduff/p253-porter.pdf>.
+the Porter/Duff compositing operators.
Fourteen different operators are currently available in cairo. This page
is a try to describe them. It may contain errors and is possibly
@@ -381,8 +380,8 @@ unbounded source interpretations.
<td>Resulting color (xR)</td>
</tr>
<tr>
- <td>?</td>
- <td>?</td>
+ <td>min(1, aA+aB)</td>
+ <td>(xaA + xaB)/aR</td>
</tr>
</table>
@@ -398,8 +397,22 @@ unbounded source interpretations.
<td>Resulting color (xR)</td>
</tr>
<tr>
- <td>?</td>
- <td>?</td>
+ <td>min(1, aA+aB)</td>
+ <td>(min(aA, 1-aB)·xA + xaB)/aR</td>
</tr>
</table>
+
+<h1 id="links">Links</h1>
+
+ * The original paper by Thomas Porter and Tom Duff:
+ <http://keithp.com/~keithp/porterduff/p253-porter.pdf>,
+
+ * The description of the X Rendering Extension by Keith Packard
+ is where the information about the `ADD` and `SATURATE` operators
+ comes from:
+ <http://keithp.com/~keithp/render/protocol.html>
+
+ * A description of compositing in SVG 1.2 by Craig Northway:
+ <http://www.svgopen.org/2005/papers/abstractsvgopen/>
+
commit 94167d56a9e6077600859a87424f72fb2e92e5d4
Author: Nis Martensen <nis.martensen at web.de>
Date: Fri Oct 12 23:56:02 2007 +0200
Make tables look nicer in the wiki
diff --git a/src/local.css b/src/local.css
index 8a22c88..9242c47 100644
--- a/src/local.css
+++ b/src/local.css
@@ -32,7 +32,7 @@ h2,h3,h4,h5,h6 {
font-size: 125%;
}
-p, ol, ul, hr {
+p, ol, ul, hr, table {
margin-left: 4%;
margin-right: 4%;
}
@@ -194,3 +194,11 @@ div.clear {
a {
text-decoration: none;
}
+table {
+ border: solid #aaa 1px;
+ border-spacing: 1px;
+}
+td, th {
+ border: solid #aaa 1px;
+ padding: 5px;
+}
commit a78eaa21b4f4ca6397501cb9157d2a04bccfe2db
Author: Nis Martensen <nis.martensen at web.de>
Date: Fri Oct 12 23:54:31 2007 +0200
Describe source and destination, more detailed description of operators
- Add a description about what source and destination are in the
compositing context,
- Differentiate between bounded and unbounded operations,
- Describe calculation of alpha and color components,
- Use html-style headers for the operators to add id attributes.
diff --git a/src/operators.mdwn b/src/operators.mdwn
index 4212ffd..7e9f100 100644
--- a/src/operators.mdwn
+++ b/src/operators.mdwn
@@ -9,60 +9,168 @@ Fourteen different operators are currently available in cairo. This page
is a try to describe them. It may contain errors and is possibly
incomplete. Please help to improve it!
-
-# Operators
+# Example images
It is probably best to describe the effect of compositing operators by
-showing example images, so that's what is done below. To create the
-images, a red rectangle is first drawn to the (empty) destination with
-the default operator:
+showing example images, so that's what is done below. The images show
+the result of drawing an object (a blue rectangle) onto a surface which
+already contains another image—a red rectangle.
+
+The operator names try to describe what the operators mean. Two words
+need to be mentioned: the *source* and the *destination* (or *dest*). In
+this context, these provide the two objects which contribute to the
+graphical output of the drawing operation. The destination is the name
+of the surface before the drawing operation, the source is the name of
+what is added while drawing.
+
+## The Destination
+
+To create the example images, the red rectangle is first drawn to the
+(empty) destination surface with the default operator:
cairo_rectangle (cr, 0, 0, 120, 90);
cairo_set_source_rgba (cr, 0.7, 0, 0, 0.8);
cairo_fill (cr);
-The current operator is then changed using
+The surface is now a transparent plane with a partially transparent
+rectangle in it. This represents the destination to which the next
+drawing operation will be performed. Both the red and the fully
+transparent part of the surface are now natural parts of the
+destination.
+
+## Setting the compositing operator
+
+The current operator is now set using
[`cairo_set_operator()`](http://cairographics.org/manual/cairo-cairo-t.html#cairo-set-operator).
+
+## The Source
+
+The [[tutorial]] describes how drawing works in cairo:
+
+> "Cairo internally draws with one fundamental drawing operation: the
+> source and mask are freely placed somewhere over the destination. Then
+> the layers are all pressed together and the paint from the source is
+> transferred to the destination wherever the mask allows it."
+
+However, there is no mention of a mask in the names of the compositing
+operators. They refer to a source and a destination only. This allows
+for two different interpretions with regard to what should be regarded
+as the source for the compositing operation:
+
+ 1. Since the mask determines where the paint from the source is
+ transferred, it also determines the area in which the compositing
+ operation is performed. This interpretation can be called
+ **bounded**.
+
+ 2. The area where the compositing operation is performed is not bounded
+ by the mask. Instead, any parts where the source layer is not
+ transferred are considered to be fully transparent. We call this
+ interpretation of the source **unbounded**.
+
+For some of the operators, both interpretations lead to the same result,
+for others they do not. In cairo, the actual interpretation depends on
+the operator.
+
The blue rectangle is drawn with the new operator in effect:
cairo_rectangle (cr, 40, 30, 120, 90);
cairo_set_source_rgba (cr, 0, 0, 0.9, 0.4);
cairo_fill (cr);
-The results can be seen below. Note that both rectangles are drawn with
-transparency. When studying the images, you may be able to guess how
-they would look for opaque objects, too. For reference, the <a
-href="ops.c">code</a> to create the images is also available.
+The results can be seen in the images below. Note that both rectangles
+are drawn with transparency. When studying the images, you may be able
+to guess how they would look for opaque objects, too. For reference, the
+<a href="ops.c">code</a> to create the images is also available.
-## `CAIRO_OPERATOR_CLEAR`
+
+# Operators
+
+For the mathematical description, it is convenient to use the following
+conventions:
+
+ 1. The index A (assigned to color components and transparency factor)
+ refers to the source, while the index B refers to the destination.
+ The index R refers to the result of the compositing operation.
+
+ 2. Each pixel in both the source and the destination is fully described
+ by a tuple (r, g, b, a). We will use "x" as a shorthand for any
+ color component, since they are always treated the same. "a"
+ describes the alpha value (opacity) and is treated differently.
+
+ 3. The product of xA and aA is described by xaA. xaB and xaR have
+ analogous meaning.
+
+The color computations equations contain a division by aR, which cannot
+be done where aR is zero. But in this case the color doesn't matter
+anyway (full transparency) and can also be set to zero. (Internally, the
+colors may be handled differently, so this might or might not be
+necessary.)
+
+
+<h2 id="clear">CAIRO_OPERATOR_CLEAR</h2>
<div class="tutright">[[img "clear.png" link="no"]]</div>
Where the second object is drawn, the first is completely removed.
-Anywhere else it is left intact.
+Anywhere else it is left intact. The second object itself is not drawn.
+
+The effect of the `CLEAR` operator depends on the interpretation of the
+source. In cairo, this operator is **bounded**.
-The `CLEAR` operator will clear the surface for you anywhere you draw
-something. Only the the shape of your newly drawn objects will be taken
-into account, the level of transparency does not matter.
+<table>
+<tr>
+ <td>Resulting alpha (aR)</td>
+ <td>Resulting color (xR)</td>
+</tr>
+<tr>
+ <td>0</td>
+ <td>0</td>
+</tr>
+</table>
-## `CAIRO_OPERATOR_SOURCE`
+
+<h2 id="source">CAIRO_OPERATOR_SOURCE</h2>
<div class="tutright">[[img "source.png" link="no"]]</div>
The second object is drawn as if nothing else were below. Only outside
of the blue rectangle the red one is left intact.
-Any traces of previous objects will be removed whereever you draw
-something, even if the new objects are not opaque.
+The effect of the `SOURCE` operator depends on the interpretation of the
+source. In cairo, this operator is **bounded**.
+
+<table>
+<tr>
+ <td>Resulting alpha (aR)</td>
+ <td>Resulting color (xR)</td>
+</tr>
+<tr>
+ <td>aA</td>
+ <td>xA</td>
+</tr>
+</table>
-## `CAIRO_OPERATOR_OVER`
+
+<h2 id="over">CAIRO_OPERATOR_OVER</h2>
<div class="tutright">[[img "over.png" link="no"]]</div>
The image shows what you would expect if you held two semi-transparent
-slides on top of each other.
+slides on top of each other. This operator is cairo's default operator.
+
+The output of the `OVER` operator is the same for both bounded and
+unbounded source.
+
+<table>
+<tr>
+ <td>Resulting alpha (aR)</td>
+ <td>Resulting color (xR)</td>
+</tr>
+<tr>
+ <td>aA + aB·(1-aA)</td>
+ <td>(xaA + xaB·(1-aA))/aR</td>
+</tr>
+</table>
-This operator does not remove the lower object. This operator is cairo's
-default operator.
-## `CAIRO_OPERATOR_IN`
+<h2 id="in">CAIRO_OPERATOR_IN</h2>
<div class="tutright">[[img "in.png" link="no"]]</div>
The first object is removed completely, the second is only drawn where
@@ -72,14 +180,44 @@ Note that the transparency of the first object is taken into account.
That is, the small blue rectangle is slightly lighter than it would have
been, had the first object been opaque.
-## `CAIRO_OPERATOR_OUT`
+The effect of the `IN` operator depends on the interpretation of the
+source. In cairo, this operator is **unbounded**.
+
+<table>
+<tr>
+ <td>Resulting alpha (aR)</td>
+ <td>Resulting color (xR)</td>
+</tr>
+<tr>
+ <td>aA·aB</td>
+ <td>xA</td>
+</tr>
+</table>
+
+
+<h2 id="out">CAIRO_OPERATOR_OUT</h2>
<div class="tutright">[[img "out.png" link="no"]]</div>
The blue rectangle is drawn only where the red one wasn't. Since the red
one was partially transparent, you can see a blue shadow in the
overlapping area. Otherwise, the red object is completely removed.
-## `CAIRO_OPERATOR_ATOP`
+The effect of the `OUT` operator depends on the interpretation of the
+source. In cairo, this operator is **unbounded**.
+
+<table>
+<tr>
+ <td>Resulting alpha (aR)</td>
+ <td>Resulting color (xR)</td>
+</tr>
+<tr>
+ <td>aA·(1-aB)</td>
+ <td>xA</td>
+</tr>
+</table>
+
+
+<h2 id="atop">CAIRO_OPERATOR_ATOP</h2>
<div class="tutright">[[img "atop.png" link="no"]]</div>
This leaves the first object mostly intact, but mixes both objects in
@@ -90,18 +228,63 @@ If you look closely, you will notice that the resulting color in the
overlapping area is different from what the `OVER` operator produces.
Any two operators produce different output in the overlapping area!
-## `CAIRO_OPERATOR_DEST`
+The output of the `ATOP` operator is the same for both bounded and
+unbounded source.
+
+<table>
+<tr>
+ <td>Resulting alpha (aR)</td>
+ <td>Resulting color (xR)</td>
+</tr>
+<tr>
+ <td>aB</td>
+ <td>xaA + xB·(1-aA)</td>
+</tr>
+</table>
+
+
+<h2 id="dest">CAIRO_OPERATOR_DEST</h2>
<div class="tutright">[[img "dest.png" link="no"]]</div>
Leaves the first object untouched, the second is discarded completely.
-## `CAIRO_OPERATOR_DEST_OVER`
+The output of the `DEST` operator is the same for both bounded and
+unbounded source.
+
+<table>
+<tr>
+ <td>Resulting alpha (aR)</td>
+ <td>Resulting color (xR)</td>
+</tr>
+<tr>
+ <td>aB</td>
+ <td>xB</td>
+</tr>
+</table>
+
+
+<h2 id="dest_over">CAIRO_OPERATOR_DEST_OVER</h2>
<div class="tutright">[[img "dest_over.png" link="no"]]</div>
The result is similar to the `OVER` operator. Except that the "order" of
the objects is reversed, so the second is drawn below the first.
-## `CAIRO_OPERATOR_DEST_IN`
+The output of the `DEST_OVER` operator is the same for both bounded and
+unbounded source.
+
+<table>
+<tr>
+ <td>Resulting alpha (aR)</td>
+ <td>Resulting color (xR)</td>
+</tr>
+<tr>
+ <td>(1-aB)·aA + aB</td>
+ <td>(xaA·(1-aB) + xaB)/aR</td>
+</tr>
+</table>
+
+
+<h2 id="dest_in">CAIRO_OPERATOR_DEST_IN</h2>
<div class="tutright">[[img "dest_in.png" link="no"]]</div>
The blue rectangle is used to determine which part of the red one is
@@ -110,30 +293,113 @@ left intact. Anything outside the overlapping area is removed.
This works like the `IN` operator, but again with the second object
"below" the first.
-## `CAIRO_OPERATOR_DEST_OUT`
+Similar to the two interpretations of the source, it is possible to
+imagine the same distinction with regard to the destination. In cairo,
+the `DEST_IN` operator is **unbounded**.
+
+<table>
+<tr>
+ <td>Resulting alpha (aR)</td>
+ <td>Resulting color (xR)</td>
+</tr>
+<tr>
+ <td>aA·aB</td>
+ <td>xB</td>
+</tr>
+</table>
+
+
+<h2 id="dest_out">CAIRO_OPERATOR_DEST_OUT</h2>
<div class="tutright">[[img "dest_out.png" link="no"]]</div>
The second object is used to reduce the visibility of the first in the
overlapping area. Its transparency/opacity is taken into account. The
second object is not drawn itself.
-## `CAIRO_OPERATOR_DEST_ATOP`
+The output of the `DEST_OUT` operator is the same for both bounded and
+unbounded interpretations.
+
+<table>
+<tr>
+ <td>Resulting alpha (aR)</td>
+ <td>Resulting color (xR) (xR)</td>
+</tr>
+<tr>
+ <td>(1-aA)·aB</td>
+ <td>xB</td>
+</tr>
+</table>
+
+
+<h2 id="dest_atop">CAIRO_OPERATOR_DEST_ATOP</h2>
<div class="tutright">[[img "dest_atop.png" link="no"]]</div>
Same as the `ATOP` operator, but again as if the order of the drawing
operations had been reversed.
-## `CAIRO_OPERATOR_XOR`
+In cairo, the `DEST_ATOP` operator is **unbounded**.
+
+<table>
+<tr>
+ <td>Resulting alpha (aR)</td>
+ <td>Resulting color (xR)</td>
+</tr>
+<tr>
+ <td>aA</td>
+ <td>xA·(1-aB) + xaB</td>
+</tr>
+</table>
+
+
+<h2 id="xor">CAIRO_OPERATOR_XOR</h2>
<div class="tutright">[[img "xor.png" link="no"]]</div>
-## `CAIRO_OPERATOR_ADD`
+The output of the `XOR` operator is the same for both bounded and
+unbounded source interpretations.
+
+<table>
+<tr>
+ <td>Resulting alpha (aR)</td>
+ <td>Resulting color (xR)</td>
+</tr>
+<tr>
+ <td>aA + aB - 2·aA·aB</td>
+ <td>(xaA·(1-aB) + xaB·(1-aA))/aR</td>
+</tr>
+</table>
+
+
+<h2 id="add">CAIRO_OPERATOR_ADD</h2>
<div class="tutright">[[img "add.png" link="no"]]</div>
-## `CAIRO_OPERATOR_SATURATE`
+The output of the `ADD` operator is the same for both bounded and
+unbounded source interpretations.
+
+<table>
+<tr>
+ <td>Resulting alpha (aR)</td>
+ <td>Resulting color (xR)</td>
+</tr>
+<tr>
+ <td>?</td>
+ <td>?</td>
+</tr>
+</table>
+
+<h2 id="saturate">CAIRO_OPERATOR_SATURATE</h2>
<div class="tutright">[[img "saturate.png" link="no"]]</div>
-The opacity factor of the first object is 0.8, and 0.4 for the second
-object. To determine the transparency of the overlapping area, both
-numbers are added and clipped to `[0,1]` range. Therefore the
-overlapping area has lost any transparency and is thus completely
-opaque.
+The output of the `SATURATE` operator is the same for both bounded and
+unbounded source interpretations.
+
+<table>
+<tr>
+ <td>Resulting alpha (aR)</td>
+ <td>Resulting color (xR)</td>
+</tr>
+<tr>
+ <td>?</td>
+ <td>?</td>
+</tr>
+</table>
+
commit 8a86b678e14b74e9611f5e5b6268b1e42112802a
Author: Nis Martensen <nis.martensen at web.de>
Date: Sun Oct 7 16:15:27 2007 +0200
Add page to describe cairo's compositing operators
Links to the code and images from the previous two commits.
diff --git a/src/operators.mdwn b/src/operators.mdwn
new file mode 100644
index 0000000..4212ffd
--- /dev/null
+++ b/src/operators.mdwn
@@ -0,0 +1,139 @@
+[[meta title="Cairo's compositing operators"]]
+
+Normally, you will be using cairo to draw objects on top of each other.
+But cairo can do differently, if you need it! In fact, you can use all
+the Porter/Duff compositing operators described here:
+<http://keithp.com/~keithp/porterduff/p253-porter.pdf>.
+
+Fourteen different operators are currently available in cairo. This page
+is a try to describe them. It may contain errors and is possibly
+incomplete. Please help to improve it!
+
+
+# Operators
+
+It is probably best to describe the effect of compositing operators by
+showing example images, so that's what is done below. To create the
+images, a red rectangle is first drawn to the (empty) destination with
+the default operator:
+
+ cairo_rectangle (cr, 0, 0, 120, 90);
+ cairo_set_source_rgba (cr, 0.7, 0, 0, 0.8);
+ cairo_fill (cr);
+
+The current operator is then changed using
+[`cairo_set_operator()`](http://cairographics.org/manual/cairo-cairo-t.html#cairo-set-operator).
+The blue rectangle is drawn with the new operator in effect:
+
+ cairo_rectangle (cr, 40, 30, 120, 90);
+ cairo_set_source_rgba (cr, 0, 0, 0.9, 0.4);
+ cairo_fill (cr);
+
+The results can be seen below. Note that both rectangles are drawn with
+transparency. When studying the images, you may be able to guess how
+they would look for opaque objects, too. For reference, the <a
+href="ops.c">code</a> to create the images is also available.
+
+## `CAIRO_OPERATOR_CLEAR`
+<div class="tutright">[[img "clear.png" link="no"]]</div>
+
+Where the second object is drawn, the first is completely removed.
+Anywhere else it is left intact.
+
+The `CLEAR` operator will clear the surface for you anywhere you draw
+something. Only the the shape of your newly drawn objects will be taken
+into account, the level of transparency does not matter.
+
+## `CAIRO_OPERATOR_SOURCE`
+<div class="tutright">[[img "source.png" link="no"]]</div>
+
+The second object is drawn as if nothing else were below. Only outside
+of the blue rectangle the red one is left intact.
+
+Any traces of previous objects will be removed whereever you draw
+something, even if the new objects are not opaque.
+
+## `CAIRO_OPERATOR_OVER`
+<div class="tutright">[[img "over.png" link="no"]]</div>
+
+The image shows what you would expect if you held two semi-transparent
+slides on top of each other.
+
+This operator does not remove the lower object. This operator is cairo's
+default operator.
+
+## `CAIRO_OPERATOR_IN`
+<div class="tutright">[[img "in.png" link="no"]]</div>
+
+The first object is removed completely, the second is only drawn where
+the first was.
+
+Note that the transparency of the first object is taken into account.
+That is, the small blue rectangle is slightly lighter than it would have
+been, had the first object been opaque.
+
+## `CAIRO_OPERATOR_OUT`
+<div class="tutright">[[img "out.png" link="no"]]</div>
+
+The blue rectangle is drawn only where the red one wasn't. Since the red
+one was partially transparent, you can see a blue shadow in the
+overlapping area. Otherwise, the red object is completely removed.
+
+## `CAIRO_OPERATOR_ATOP`
+<div class="tutright">[[img "atop.png" link="no"]]</div>
+
+This leaves the first object mostly intact, but mixes both objects in
+the overlapping area. The second object object is not drawn except
+there.
+
+If you look closely, you will notice that the resulting color in the
+overlapping area is different from what the `OVER` operator produces.
+Any two operators produce different output in the overlapping area!
+
+## `CAIRO_OPERATOR_DEST`
+<div class="tutright">[[img "dest.png" link="no"]]</div>
+
+Leaves the first object untouched, the second is discarded completely.
+
+## `CAIRO_OPERATOR_DEST_OVER`
+<div class="tutright">[[img "dest_over.png" link="no"]]</div>
+
+The result is similar to the `OVER` operator. Except that the "order" of
+the objects is reversed, so the second is drawn below the first.
+
+## `CAIRO_OPERATOR_DEST_IN`
+<div class="tutright">[[img "dest_in.png" link="no"]]</div>
+
+The blue rectangle is used to determine which part of the red one is
+left intact. Anything outside the overlapping area is removed.
+
+This works like the `IN` operator, but again with the second object
+"below" the first.
+
+## `CAIRO_OPERATOR_DEST_OUT`
+<div class="tutright">[[img "dest_out.png" link="no"]]</div>
+
+The second object is used to reduce the visibility of the first in the
+overlapping area. Its transparency/opacity is taken into account. The
+second object is not drawn itself.
+
+## `CAIRO_OPERATOR_DEST_ATOP`
+<div class="tutright">[[img "dest_atop.png" link="no"]]</div>
+
+Same as the `ATOP` operator, but again as if the order of the drawing
+operations had been reversed.
+
+## `CAIRO_OPERATOR_XOR`
+<div class="tutright">[[img "xor.png" link="no"]]</div>
+
+## `CAIRO_OPERATOR_ADD`
+<div class="tutright">[[img "add.png" link="no"]]</div>
+
+## `CAIRO_OPERATOR_SATURATE`
+<div class="tutright">[[img "saturate.png" link="no"]]</div>
+
+The opacity factor of the first object is 0.8, and 0.4 for the second
+object. To determine the transparency of the overlapping area, both
+numbers are added and clipped to `[0,1]` range. Therefore the
+overlapping area has lost any transparency and is thus completely
+opaque.
commit 39b70f0785461d85217b2546f3b12817cee24c5a
Author: Nis Martensen <nis.martensen at web.de>
Date: Sun Oct 7 16:12:41 2007 +0200
Add png example images, demonstrating effects of operators
These files are produced by ops.c from the previous commit.
diff --git a/src/operators/add.png b/src/operators/add.png
new file mode 100644
index 0000000..228ef37
Binary files /dev/null and b/src/operators/add.png differ
diff --git a/src/operators/atop.png b/src/operators/atop.png
new file mode 100644
index 0000000..99911a4
Binary files /dev/null and b/src/operators/atop.png differ
diff --git a/src/operators/clear.png b/src/operators/clear.png
new file mode 100644
index 0000000..7e2026e
Binary files /dev/null and b/src/operators/clear.png differ
diff --git a/src/operators/dest.png b/src/operators/dest.png
new file mode 100644
index 0000000..ca22287
Binary files /dev/null and b/src/operators/dest.png differ
diff --git a/src/operators/dest_atop.png b/src/operators/dest_atop.png
new file mode 100644
index 0000000..c2b0568
Binary files /dev/null and b/src/operators/dest_atop.png differ
diff --git a/src/operators/dest_in.png b/src/operators/dest_in.png
new file mode 100644
index 0000000..9012dd2
Binary files /dev/null and b/src/operators/dest_in.png differ
diff --git a/src/operators/dest_out.png b/src/operators/dest_out.png
new file mode 100644
index 0000000..aaabf8e
Binary files /dev/null and b/src/operators/dest_out.png differ
diff --git a/src/operators/dest_over.png b/src/operators/dest_over.png
new file mode 100644
index 0000000..a0de730
Binary files /dev/null and b/src/operators/dest_over.png differ
diff --git a/src/operators/in.png b/src/operators/in.png
new file mode 100644
index 0000000..baa8784
Binary files /dev/null and b/src/operators/in.png differ
diff --git a/src/operators/out.png b/src/operators/out.png
new file mode 100644
index 0000000..876e188
Binary files /dev/null and b/src/operators/out.png differ
diff --git a/src/operators/over.png b/src/operators/over.png
new file mode 100644
index 0000000..aeb8bd7
Binary files /dev/null and b/src/operators/over.png differ
diff --git a/src/operators/saturate.png b/src/operators/saturate.png
new file mode 100644
index 0000000..67de7de
Binary files /dev/null and b/src/operators/saturate.png differ
diff --git a/src/operators/source.png b/src/operators/source.png
new file mode 100644
index 0000000..3f07be0
Binary files /dev/null and b/src/operators/source.png differ
diff --git a/src/operators/xor.png b/src/operators/xor.png
new file mode 100644
index 0000000..9edd1be
Binary files /dev/null and b/src/operators/xor.png differ
commit cb57fb97c164a47e809a4b2511cb37638d45e450
Author: Nis Martensen <nis.martensen at web.de>
Date: Sun Oct 7 16:10:18 2007 +0200
Add program to show compositing operators in effect
This program draws two overlapping rectangles. It does this for each
compositing operator and produces PNG and SVG output for each case.
diff --git a/src/operators/ops.c b/src/operators/ops.c
new file mode 100644
index 0000000..9253166
--- /dev/null
+++ b/src/operators/ops.c
@@ -0,0 +1,88 @@
+#include <string.h>
+#include <cairo.h>
+#include <cairo-svg.h>
+
+void example (char *name);
+
+int main (int argc, char *argv[])
+{
+ example ("clear");
+
+ example ("source");
+ example ("over");
+ example ("in");
+ example ("out");
+ example ("atop");
+
+ example ("dest");
+ example ("dest_over");
+ example ("dest_in");
+ example ("dest_out");
+ example ("dest_atop");
+
+ example ("xor");
+ example ("add");
+ example ("saturate");
+
+ return 0;
+}
+
+void example (char *name)
+{
+ cairo_surface_t *surface;
+ cairo_t *cr;
+
+ char svg_filename[50];
+ char png_filename[50];
+ strcpy (svg_filename, name);
+ strcpy (png_filename, name);
+ strcat (svg_filename, ".svg");
+ strcat (png_filename, ".png");
+
+ surface = cairo_svg_surface_create (svg_filename, 160, 120);
+ cr = cairo_create (surface);
+
+ cairo_rectangle (cr, 0, 0, 120, 90);
+ cairo_set_source_rgba (cr, 0.7, 0, 0, 0.8);
+ cairo_fill (cr);
+
+ if (strcmp(name, "clear") == 0)
+ cairo_set_operator (cr, CAIRO_OPERATOR_CLEAR);
+
+ else if (strcmp(name, "source") == 0)
+ cairo_set_operator (cr, CAIRO_OPERATOR_SOURCE);
+ else if (strcmp(name, "over") == 0)
+ cairo_set_operator (cr, CAIRO_OPERATOR_OVER);
+ else if (strcmp(name, "in") == 0)
+ cairo_set_operator (cr, CAIRO_OPERATOR_IN);
+ else if (strcmp(name, "out") == 0)
+ cairo_set_operator (cr, CAIRO_OPERATOR_OUT);
+ else if (strcmp(name, "atop") == 0)
+ cairo_set_operator (cr, CAIRO_OPERATOR_ATOP);
+
+ else if (strcmp(name, "dest") == 0)
+ cairo_set_operator (cr, CAIRO_OPERATOR_DEST);
+ else if (strcmp(name, "dest_over") == 0)
+ cairo_set_operator (cr, CAIRO_OPERATOR_DEST_OVER);
+ else if (strcmp(name, "dest_in") == 0)
+ cairo_set_operator (cr, CAIRO_OPERATOR_DEST_IN);
+ else if (strcmp(name, "dest_out") == 0)
+ cairo_set_operator (cr, CAIRO_OPERATOR_DEST_OUT);
+ else if (strcmp(name, "dest_atop") == 0)
+ cairo_set_operator (cr, CAIRO_OPERATOR_DEST_ATOP);
+
+ else if (strcmp(name, "xor") == 0)
+ cairo_set_operator (cr, CAIRO_OPERATOR_XOR);
+ else if (strcmp(name, "add") == 0)
+ cairo_set_operator (cr, CAIRO_OPERATOR_ADD);
+ else if (strcmp(name, "saturate") == 0)
+ cairo_set_operator (cr, CAIRO_OPERATOR_SATURATE);
+
+ cairo_rectangle (cr, 40, 30, 120, 90);
+ cairo_set_source_rgba (cr, 0, 0, 0.9, 0.4);
+ cairo_fill (cr);
+
+ cairo_destroy (cr);
+ cairo_surface_write_to_png (surface, png_filename);
+ cairo_surface_destroy (surface);
+}
commit 633c16bee54970bcfacaba3efabd6d1afed1e25e
Author: Nis Martensen <nis.martensen at web.de>
Date: Sat Oct 6 01:41:43 2007 +0200
New sample
Hi Carl,
The attached patch adds a fill_style snippet to
cairographics.org/samples/ . The snippet shows the effects of both fill
rules with subpaths in different directions.
Regards,
Nis
>From 2cb151056b73ee48afd8b6168028975e9dd823e3 Mon Sep 17 00:00:00 2001
From: Nis Martensen <nis.martensen at web.de>
Date: Sat, 6 Oct 2007 01:24:46 +0200
Subject: [PATCH] Add a fill_style sample
diff --git a/src/samples/fill_style.mdwn b/src/samples/fill_style.mdwn
new file mode 100644
index 0000000..7ca01ae
--- /dev/null
+++ b/src/samples/fill_style.mdwn
@@ -0,0 +1,19 @@
+<div class="tutright">[[img "fill_style.png" link="no"]]</div>
+ cairo_set_line_width (cr, 6);
+
+ cairo_rectangle (cr, 12, 12, 232, 70);
+ cairo_new_sub_path (cr); cairo_arc (cr, 64, 64, 40, 0, 2*M_PI);
+ cairo_new_sub_path (cr); cairo_arc_negative (cr, 192, 64, 40, 0, -2*M_PI);
+
+ cairo_set_fill_rule (cr, CAIRO_FILL_RULE_EVEN_ODD);
+ cairo_set_source_rgb (cr, 0, 0.7, 0); cairo_fill_preserve (cr);
+ cairo_set_source_rgb (cr, 0, 0, 0); cairo_stroke (cr);
+
+ cairo_translate (cr, 0, 128);
+ cairo_rectangle (cr, 12, 12, 232, 70);
+ cairo_new_sub_path (cr); cairo_arc (cr, 64, 64, 40, 0, 2*M_PI);
+ cairo_new_sub_path (cr); cairo_arc_negative (cr, 192, 64, 40, 0, -2*M_PI);
+
+ cairo_set_fill_rule (cr, CAIRO_FILL_RULE_WINDING);
+ cairo_set_source_rgb (cr, 0, 0, 0.9); cairo_fill_preserve (cr);
+ cairo_set_source_rgb (cr, 0, 0, 0); cairo_stroke (cr);
diff --git a/src/samples/fill_style.png b/src/samples/fill_style.png
new file mode 100644
index 0000000..d4bedd5
Binary files /dev/null and b/src/samples/fill_style.png differ
More information about the cairo-commit
mailing list