108 " |
108 " |
109 drawing uses a paint color (which may be a dithered one) which is |
109 drawing uses a paint color (which may be a dithered one) which is |
110 used like a `pen'. |
110 used like a `pen'. |
111 A few drawing operations (opaqueForm and opaqueString drawing) |
111 A few drawing operations (opaqueForm and opaqueString drawing) |
112 use two colors, the paint and a backgroundPaint. For example, |
112 use two colors, the paint and a backgroundPaint. For example, |
113 normal string drawing (#displayString:...) only draws the fonts |
113 normal string drawing (#displayString:...) only draws the font's |
114 on-pixels in the current paint, leaving off-pixels unchanged. |
114 on-pixels in the current paint, leaving off-pixels unchanged. |
115 In contrast, #drawOpaqueString:.. also changes these to the bgPaint color. |
115 In contrast, #drawOpaqueString:.. also changes these to the bgPaint color. |
116 The bgPaint can be changed with #backgroundPaint: or #paint:on: (which modifies both). |
116 The bgPaint can be changed with #backgroundPaint: or #paint:on: (which modifies both). |
117 |
117 |
118 lets try it in a view: |
118 lets try it in a view: |
119 [exBegin] |
119 [exBegin] |
120 |v| |
120 |v| |
121 |
121 |
122 v := View new. |
122 v := View new. |
123 v openAndWait. |
123 v openAndWait. |
124 |
124 |
125 v paint:(Color red). |
125 v paint:(Color red). |
126 v displayString:'hello' x:10 y:50 |
126 v displayString:'hello' x:10 y:50 |
127 [exEnd] |
127 [exEnd] |
128 |
128 |
129 the same using opaque drawing: |
129 the same using opaque drawing: |
130 [exBegin] |
130 [exBegin] |
131 |v| |
131 |v| |
132 |
132 |
133 v := View new. |
133 v := View new. |
134 v openAndWait. |
134 v openAndWait. |
135 |
135 |
136 v paint:(Color red) on:(Color yellow). |
136 v paint:(Color red) on:(Color yellow). |
137 v displayOpaqueString:'hello' x:10 y:50 |
137 v displayOpaqueString:'hello' x:10 y:50 |
138 [exEnd] |
138 [exEnd] |
139 |
139 |
140 |
140 |
141 |
141 |
142 Lines are drawn using the paint color (if solid) or both paint and bgPaint |
142 Lines are drawn using the paint color (if solid) or both paint and bgPaint |
143 (dashed lines). The look of the line is controlled by joinStyle, capStyle, |
143 (dashed lines). The look of the line is controlled by joinStyle, capStyle, |
144 lineWidth and lineStyle. |
144 lineWidth and lineStyle. |
145 `lineStyle' can be one of #solid, #dashed, #doubleDashed |
145 `lineStyle' can be one of #solid, #dashed, #doubleDashed |
146 where: #solid - is for solid lines, drawn with the current paint color |
146 where: #solid - is for solid lines, drawn with the current paint color |
147 |
147 |
148 #dashed - for dashed lines, where only the on-dashes are drawn |
148 #dashed - for dashed lines, where only the on-dashes are drawn |
149 with the current paint color |
149 with the current paint color |
150 |
150 |
151 #doubleDashed - dashed lines, draws on-dashes with paint color, |
151 #doubleDashed - dashed lines, draws on-dashes with paint color, |
152 off-dashes with bgPaint |
152 off-dashes with bgPaint |
153 |
153 |
154 for example: |
154 for example: |
155 [exBegin] |
155 [exBegin] |
156 |v| |
156 |v| |
157 |
157 |
158 v := View new. |
158 v := View new. |
159 v openAndWait. |
159 v openAndWait. |
160 |
160 |
161 v paint:(Color red) on:(Color blue). |
161 v paint:(Color red) on:(Color blue). |
162 v displayLineFrom:(10@10) to:(90@90). |
162 v displayLineFrom:(10@10) to:(90@90). |
163 |
163 |
164 v lineStyle:#dashed. |
164 v lineStyle:#dashed. |
165 v displayLineFrom:(90@10) to:(10@90). |
165 v displayLineFrom:(90@10) to:(10@90). |
166 |
166 |
167 v lineStyle:#doubleDashed. |
167 v lineStyle:#doubleDashed. |
168 v displayRectangle:((5@5) corner:(95@95)). |
168 v displayRectangle:((5@5) corner:(95@95)). |
169 [exEnd] |
169 [exEnd] |
170 |
170 |
171 changing the line-width: |
171 changing the line-width: |
172 [exBegin] |
172 [exBegin] |
173 |v| |
173 |v| |
174 |
174 |
175 v := View new. |
175 v := View new. |
176 v openAndWait. |
176 v openAndWait. |
177 |
177 |
178 v paint:(Color red). |
178 v paint:(Color red). |
179 v displayLineFrom:(20@20) to:(80@80). |
179 v displayLineFrom:(20@20) to:(80@80). |
180 |
180 |
181 v lineWidth:5. |
181 v lineWidth:5. |
182 v displayLineFrom:(80@20) to:(20@80). |
182 v displayLineFrom:(80@20) to:(20@80). |
183 |
183 |
184 v lineWidth:8. |
184 v lineWidth:8. |
185 v displayRectangle:((5@5) corner:(95@95)). |
185 v displayRectangle:((5@5) corner:(95@95)). |
186 [exEnd] |
186 [exEnd] |
187 |
187 |
188 with wide lines, the corners (of polygons or rectangles) can be |
188 with wide lines, the corners (of polygons or rectangles) can be |
189 one of the joinStyles: #miter, #bevel, #round. The default is #miter. |
189 one of the joinStyles: #miter, #bevel, #round. The default is #miter. |
190 [exBegin] |
190 [exBegin] |
191 |v| |
191 |v| |
192 |
192 |
193 v := View new extent:200@200. |
193 v := View new extent:200@200. |
194 v openAndWait. |
194 v openAndWait. |
195 |
195 |
196 v lineWidth:15. |
196 v lineWidth:15. |
197 v paint:(Color red). |
197 v paint:(Color red). |
198 |
198 |
199 v displayRectangle:((65@65) corner:(135@135)). |
199 v displayRectangle:((65@65) corner:(135@135)). |
200 |
200 |
201 v joinStyle:#bevel. |
201 v joinStyle:#bevel. |
202 v displayRectangle:((45@45) corner:(155@155)). |
202 v displayRectangle:((45@45) corner:(155@155)). |
203 |
203 |
204 v joinStyle:#round. |
204 v joinStyle:#round. |
205 v displayRectangle:((25@25) corner:(175@175)). |
205 v displayRectangle:((25@25) corner:(175@175)). |
206 [exEnd] |
206 [exEnd] |
207 |
207 |
208 |
208 |
209 the endPoints look is controlled with capStyle; |
209 the endPoints look is controlled with capStyle; |
210 possible values are: #notLast, #butt, #round, #projecting. |
210 possible values are: #notLast, #butt, #round, #projecting. |
211 The default is #butt. |
211 The default is #butt. |
212 #notLast is mostly useful when exoring (inverting): it will not draw the |
212 #notLast is mostly useful when exoring (inverting): it will not draw the |
213 endPoint, to allow another line to join the previous line without inverting |
213 endPoint, to allow another line to join the previous line without inverting |
214 this point twice. (See the X manual for more info). |
214 this point twice. (See the X manual for more info). |
215 [exBegin] |
215 [exBegin] |
216 |v| |
216 |v| |
217 |
217 |
218 v := View new extent:200@200. |
218 v := View new extent:200@200. |
219 v openAndWait. |
219 v openAndWait. |
220 |
220 |
221 v lineWidth:15. |
221 v lineWidth:15. |
222 v paint:(Color red). |
222 v paint:(Color red). |
223 |
223 |
224 v displayLineFrom:(25@25) to:(175@25). |
224 v displayLineFrom:(25@25) to:(175@25). |
225 |
225 |
226 v capStyle:#round. |
226 v capStyle:#round. |
227 v displayLineFrom:(25@55) to:(175@55). |
227 v displayLineFrom:(25@55) to:(175@55). |
228 |
228 |
229 v capStyle:#projecting. |
229 v capStyle:#projecting. |
230 v displayLineFrom:(25@85) to:(175@85). |
230 v displayLineFrom:(25@85) to:(175@85). |
231 [exEnd] |
231 [exEnd] |
232 |
232 |
233 |
233 |
234 You can use a bitmap as a point color: |
234 You can use a bitmap as a point color: |
235 (this may be slow on some graphics devices, though) |
235 (this may be slow on some graphics devices, though) |
236 [exBegin] |
236 [exBegin] |
237 |v| |
237 |v| |
238 |
238 |
239 v := View new extent:200@200. |
239 v := View new extent:200@200. |
240 v openAndWait. |
240 v openAndWait. |
241 |
241 |
242 v lineWidth:15. |
242 v lineWidth:15. |
243 v paint:(Image fromFile:'granite_small.tiff'). |
243 v paint:(Image fromFile:'granite_small.tiff'). |
244 |
244 |
245 v displayLineFrom:(25@25) to:(175@25). |
245 v displayLineFrom:(25@25) to:(175@25). |
246 |
246 |
247 v capStyle:#round. |
247 v capStyle:#round. |
248 v displayLineFrom:(25@55) to:(175@55). |
248 v displayLineFrom:(25@55) to:(175@55). |
249 |
249 |
250 v capStyle:#projecting. |
250 v capStyle:#projecting. |
251 v displayLineFrom:(25@85) to:(175@85). |
251 v displayLineFrom:(25@85) to:(175@85). |
252 [exEnd] |
252 [exEnd] |
253 |
253 |
254 all views support a translation and scale, so you can draw in another |
254 all views support a translation and scale, so you can draw in another |
255 coordinate system: |
255 coordinate system: |
256 [exBegin] |
256 [exBegin] |
257 |v| |
257 |v| |
258 |
258 |
259 v := View new extent:200@200. |
259 v := View new extent:200@200. |
260 v openAndWait. |
260 v openAndWait. |
261 |
261 |
262 v displayForm:(Image fromFile:'SBrowser.xbm') x:10 y:10. |
262 v displayForm:(Image fromFile:'SBrowser.xbm') x:10 y:10. |
263 |
263 |
264 v scale:(2@2); translation:50. |
264 v scale:(2@2); translation:50. |
265 v displayForm:(Image fromFile:'SBrowser.xbm') x:10 y:10. |
265 v displayForm:(Image fromFile:'SBrowser.xbm') x:10 y:10. |
266 |
266 |
267 v scale:(0.5@0.5); translation:0. |
267 v scale:(0.5@0.5); translation:0. |
268 v displayForm:(Image fromFile:'SBrowser.xbm') x:10 y:10. |
268 v displayForm:(Image fromFile:'SBrowser.xbm') x:10 y:10. |
269 [exEnd] |
269 [exEnd] |
270 |
270 |
271 if scaling is on, it is often useful to be able to draw individual |
271 if scaling is on, it is often useful to be able to draw individual |
272 things unscaled - this still translates the position, but |
272 things unscaled - this still translates the position, but |
273 uses the unscaled font (for example, to draw strings in a graphic): |
273 uses the unscaled font (for example, to draw strings in a graphic): |
274 [exBegin] |
274 [exBegin] |
275 |v| |
275 |v| |
276 |
276 |
277 v := View new extent:200@200. |
277 v := View new extent:200@200. |
278 v openAndWait. |
278 v openAndWait. |
279 |
279 |
280 v displayForm:(Image fromFile:'SBrowser.xbm') x:10 y:10. |
280 v displayForm:(Image fromFile:'SBrowser.xbm') x:10 y:10. |
281 v displayString:'hello' x:50 y:40. |
281 v displayString:'hello' x:50 y:40. |
282 |
282 |
283 v scale:(2@4). |
283 v scale:(2@4). |
284 v displayForm:(Image fromFile:'SBrowser.xbm') x:10 y:10. |
284 v displayForm:(Image fromFile:'SBrowser.xbm') x:10 y:10. |
285 v displayUnscaledString:'hello' x:50 y:40. |
285 v displayUnscaledString:'hello' x:50 y:40. |
286 [exEnd] |
286 [exEnd] |
287 |
287 |
288 Filled objects are drawin using the #fillXXX methods; for example, |
288 Filled objects are drawin using the #fillXXX methods; for example, |
289 displayRectangleXXX draws the outline, while fillRectangleXXX draws a |
289 displayRectangleXXX draws the outline, while fillRectangleXXX draws a |
290 filled one: |
290 filled one: |
291 [exBegin] |
291 [exBegin] |
292 |v| |
292 |v| |
293 |
293 |
294 v := View new extent:200@200. |
294 v := View new extent:200@200. |
295 v openAndWait. |
295 v openAndWait. |
296 |
296 |
297 v displayArcIn:(20@20 corner:50@50) from:0 angle:180. |
297 v displayArcIn:(20@20 corner:50@50) from:0 angle:180. |
298 v paint:Color yellow. |
298 v paint:Color yellow. |
299 v fillArcIn:(120@120 corner:150@150) from:0 angle:180. |
299 v fillArcIn:(120@120 corner:150@150) from:0 angle:180. |
300 |
300 |
301 v paint:Color red. |
301 v paint:Color red. |
302 v displayCircle:150@50 radius:30. |
302 v displayCircle:150@50 radius:30. |
303 v paint:Color blue. |
303 v paint:Color blue. |
304 v fillCircle:50@150 radius:30. |
304 v fillCircle:50@150 radius:30. |
305 [exEnd] |
305 [exEnd] |
306 |
306 |
307 polygons: |
307 polygons: |
308 [exBegin] |
308 [exBegin] |
309 |v poly1 poly2| |
309 |v poly1 poly2| |
310 |
310 |
311 poly1 := OrderedCollection new. |
311 poly1 := OrderedCollection new. |
312 poly1 add:(10 @ 10). |
312 poly1 add:(10 @ 10). |
313 poly1 add:(100 @ 50). |
313 poly1 add:(100 @ 50). |
314 poly1 add:(50 @ 50). |
314 poly1 add:(50 @ 50). |
315 poly1 add:(20 @ 100). |
315 poly1 add:(20 @ 100). |
316 poly1 add:(10 @ 100). |
316 poly1 add:(10 @ 100). |
317 |
317 |
318 poly2 := poly1 copy. |
318 poly2 := poly1 copy. |
319 poly2 add:(poly2 first). |
319 poly2 add:(poly2 first). |
320 |
320 |
321 v := View new extent:200@200. |
321 v := View new extent:200@200. |
322 v openAndWait. |
322 v openAndWait. |
323 |
323 |
324 v scale:2. |
324 v scale:2. |
325 v paint:Color red. |
325 v paint:Color red. |
326 v fillPolygon:poly1. |
326 v fillPolygon:poly1. |
327 |
327 |
328 v scale:1. |
328 v scale:1. |
329 v paint:Color blue. |
329 v paint:Color blue. |
330 v displayPolygon:poly2. |
330 v displayPolygon:poly2. |
331 |
331 |
332 v scale:0.5. |
332 v scale:0.5. |
333 v paint:Color yellow. |
333 v paint:Color yellow. |
334 v fillPolygon:poly1. |
334 v fillPolygon:poly1. |
335 |
335 |
336 [exEnd] |
336 [exEnd] |
337 " |
337 " |
338 ! ! |
338 ! ! |
339 |
339 |
340 !GraphicsContext class methodsFor:'initialization'! |
340 !GraphicsContext class methodsFor:'initialization'! |
341 |
341 |