Skip to content

Commit 7c43fdd

Browse files
committed
docs tweak
1 parent edfd69b commit 7c43fdd

2 files changed

Lines changed: 62 additions & 32 deletions

File tree

CHANGELOG.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@ See https://github.com/JuliaGraphics/Cairo.jl/pull/357.
77

88
### Added
99

10-
- `circlering()`, creates ring of circles inside a circle
11-
- `polysuper()`, creates superellipse-based polygons
1210
- `setfillrule()`, access Cairo's fill rule parameter
1311
- `getfillrule()` ...
12+
- `circlering()`, creates ring of circles inside a circle
13+
- `polysuper()`, creates superellipse-based polygons
1414
- `tidysvg(fromfile, tofile)`, munge those SVG glyphs
15-
- dependency on DataStructures.jl added
1615
- `placeeps()`, place EPS files
16+
- dependency on DataStructures.jl added
1717

1818
### Changed
1919

docs/src/howto/images.md

Lines changed: 59 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,18 @@ DocTestSetup = quote
77

88
## Loading and placing images on drawings
99

10-
Luxor lets you place existing images on the drawing. First, load the image:
10+
Luxor lets you place existing images on the drawing. You can place PNG, SVG, and EPS images. (JPEGs aren't supported.)
1111

12-
- for PNG images, use `readpng(filename)`
13-
- for SVG images, use `readsvg(filename)` or `readsvg(string)`
14-
- for EPS images, use `placeeps(filename)`
12+
For PNG and SVG, first load the image and create a reference to it. For example:
1513

16-
(JPEGs aren't supported.)
14+
- for PNG images, use `img = readpng(filename)`
15+
- for SVG images, use `img = readsvg(filename)` or `img = readsvg(string)`
1716

18-
Then use [`placeimage`](@ref) to place the image by its top
19-
left corner at point `pt`, or use the `centered=true`
20-
keyword to place the image's center point there. Access the
21-
image's dimensions with `.width` and `.height`.
17+
You can access this image's dimensions with `img.width` and `img.height`.
18+
19+
Use [`placeimage(img)`](@ref) to place the image by its top
20+
left corner at point `pt`. Use the `centered=true`
21+
keyword to place the image's center point there.
2222

2323
```@example
2424
using Luxor # hide
@@ -39,17 +39,23 @@ nothing # hide
3939
```
4040
!["Images"](../assets/figures/images.png)
4141

42-
PNG images can be placed with varying opacity or transparency.
42+
PNG images can be placed with varying opacity or transparency. For example, the image is placed with 0.5 opacity with:
43+
44+
```julia
45+
placeimage(img, Point(100, 100), 0.5)
46+
```
47+
48+
SVG images do their own thing in terms of opacity.
4349

4450
[`readsvg`](@ref) also lets you supply raw (or pure) SVG code in a string.
4551

46-
You can also use `placeimage()` to place an array of RGB or RGBA pixels on a drawing.
52+
You can use `placeimage()` to place an array of RGB or RGBA pixels on a drawing.
4753

4854
```@example
4955
using Luxor, Colors # hide
5056
N = 500
5157
i = reshape([RGBA(rand(4)...) for p in 1:N^2], N, N)
52-
# is is Matrix{RGBA{Float64}}
58+
# i is Matrix{RGBA{Float64}}
5359
# (alias for Array{RGBA{Float64}, 2})
5460
@draw begin
5561
origin()
@@ -59,7 +65,7 @@ i = reshape([RGBA(rand(4)...) for p in 1:N^2], N, N)
5965
end 500 500
6066
```
6167

62-
Or load an image as an array and place it on a drawing.
68+
Or you can load an image as an array and place it on a drawing.
6369

6470
```julia
6571
using Luxor, Colors, FileIO
@@ -75,10 +81,10 @@ end 250 250
7581

7682
## SVG images
7783

78-
To create an SVG image, using the `Drawing(... :svg)` or specify an SVG filename.
79-
To obtain the SVG source of a completed drawing, use [`svgstring`](@ref).
84+
To output a drawing as an SVG image, using the `Drawing(... :svg)` or specify an SVG filename.
85+
To obtain the SVG source of a _completed_ SVG drawing, use [`svgstring`](@ref).
8086

81-
For example, draw the Julia logo:
87+
For example, if you draw the Julia logo like this:
8288

8389
```julia
8490
Drawing(500, 500, :svg)
@@ -88,7 +94,7 @@ finish()
8894
s = svgstring()
8995
```
9096

91-
The SVG source code is now stored in `s`. You can examine or process it further:
97+
You'll get the SVG source code stored, as a string, in `s`. You can examine or process it further. For example, the five colors used for the logo were:
9298

9399
```julia
94100
eachmatch(r"rgb\\(.*?\\)", s) |> collect
@@ -104,19 +110,20 @@ To display the image in a Jupyter or Pluto notebook, use the `HTML` function, or
104110

105111
## EPS images
106112

107-
EPS (Encapsulated PostScript) files created by Luxor (or any Cairo-based package) can be re-imported and placed on the current drawing with the [`placeeps`](@ref) function. The EPS commands are converted to the equivalent Luxor commands and evaluated immediately in the context of the current drawing and context.
113+
EPS (Encapsulated PostScript) files created by Luxor (or any Cairo-based package) can be re-imported and placed on the current drawing with the [`placeeps`](@ref) function. This function converts the EPS commands to the equivalent Luxor commands and evaluates them immediately in the context of the current drawing.
108114

109115
!!! warning
110116

111117
This function is designed to extract just the coordinates of paths from an EPS
112-
file. An EPS file can contain much more information about an image than just the
113-
coordinates: there's image and pixel data, font data, linear color gradients,
114-
and so on. These are not translated into Luxor functions. This function
115-
interprets some of the EPS commands in a Cairo-generated EPS "Prolog"; EPS files created
116-
by other applications will likely not contain this Cairo-generated Prolog, and
117-
so won't be interpreted at all (or will go wrong in interesting ways).
118+
file. An EPS file can contain much more information about an image than
119+
coordinates: there migth be image and pixel data, font data, linear color
120+
gradients, and so on. These are _not_ translated into equivalent Luxor
121+
functions. This function interprets the EPS commands in a Cairo-generated EPS
122+
"Prolog"; EPS files created by other applications will likely not contain this
123+
Cairo-generated Prolog, and so won't be interpreted at all (or will go wrong in
124+
interesting ways).
118125

119-
In the next example, an SVG file is placed and exported to an EPS file, then the EPS file is imported and placed on a new drawing with Luxor functions instead of EPS commands. It's placed at an angle for no good reason. When saved as SVG, the graphics will be in SVG format again. Some losses are to be expected!
126+
In this example, an SVG file `linnux.svg` is placed and exported to an EPS file `linux.eps`, then this EPS file is imported and placed on a new SVG drawing using Luxor functions instead of EPS commands, respecting the current scale and orientation. Finally, when the SVG document is finished, the graphics will be in SVG format again.
120127

121128
```@example
122129
using Luxor
@@ -130,10 +137,11 @@ epsfile = dirname(@__FILE__) * "../assets/figures/linux.eps"
130137
end 500 500 epsfile
131138
132139
@drawsvg begin
133-
translate(boxtopleft())
140+
translate(midpoint(boxtopleft(), O))
134141
scale(0.5)
135142
rotate(π/12)
136143
placeeps(epsfile)
144+
rulers()
137145
end
138146
```
139147

@@ -160,13 +168,35 @@ fillpath()
160168
...
161169
```
162170

163-
Once you have the Luxor commands, you can edit them into new creations:
171+
Once you have a sequence of Luxor commands, you can edit them into new creations:
164172

165-
!["Linux penguin animation"](../assets/figures/linux.gif)
173+
!["drawing a penguin animation"](../assets/figures/linux.gif)
166174

167175
## Placing an image matrix
168176

169-
You can also use [`placeimage`](@ref) to put image matrices on a drawing.
177+
You can use [`placeimage`](@ref) to put pixel images on a drawing.
178+
179+
This example uses noise to define the RGB values in a matrix of ARGB32 color values:
180+
181+
```@example
182+
using Luxor # hide
183+
184+
D = 600
185+
mat = [Luxor.ARGB32(
186+
noise(0.01r, 0.01c),
187+
noise(0.1r, 0.02c),
188+
noise(0.1r, 0.01c)) for r in 1:D, c in 1:D]
189+
190+
@drawsvg begin
191+
placeimage(mat, centered=true)
192+
fontsize(80)
193+
sethue("white")
194+
setopacity(0.5)
195+
text("woah", halign=:center)
196+
end D D÷2
197+
```
198+
199+
The next example saves vector graphics into an image matrix, then places that matrix at random on another drawing.
170200

171201
```julia
172202
using Luxor

0 commit comments

Comments
 (0)