1 """
2 * Copyright 2008 Google Inc.
3 *
4 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
5 * use this file except in compliance with the License. You may obtain a copy of
6 * the License at
7 *
8 * http:#www.apache.org/licenses/LICENSE-2.0
9 *
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
12 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or self.implied. See the
13 * License for the specific language governing permissions and limitations under
14 * the License.
15 """
16
17 from pyjamas import DOM
18
19 from pyjamas.ui.FocusWidget import FocusWidget
20 from pyjamas.ui.Widget import Widget
21 from pyjamas.ui import Focus
22 from pyjamas.Canvas.Color import Color
23
24 from pyjamas.Canvas.LinearGradientImplDefault import LinearGradientImplDefault
25 from pyjamas.Canvas.RadialGradientImplDefault import RadialGradientImplDefault
26 from pyjamas.Canvas.GWTCanvasImplDefault import GWTCanvasImplDefault
27
28 from pyjamas.Canvas.LinearGradientImplIE6 import LinearGradientImplIE6
29 from pyjamas.Canvas.RadialGradientImplIE6 import RadialGradientImplIE6
30 from pyjamas.Canvas.GWTCanvasImplIE6 import GWTCanvasImplIE6
31
32
33
34 """*
35 * 2D Graphics API. API mimicks functionality found in the Javascript canvas API
36 * (see <a href="http:#developer.mozilla.org/en/docs/Canvas_tutorial">canvas
37 * tutorial</a>).
38 *
39 * <p>
40 * Performance may scale differently for IE than for browsers with a native
41 * canvas self.implementation. Sub-pixel precision is supported where possible.
42 * </p>
43 """
45
46 """*
47 * Creates a GWTCanvas element. Element type depends on deferred binding.
48 * Default is CANVAS HTML5 DOM element. In the case of IE it should be VML.
49 *
50 * <p>
51 * Different coordinate spaces and pixel spaces will cause aliased scaling.
52 * Use <code>scale(double,double)</code> and consistent coordinate and pixel
53 * spaces for better results.
54 * </p>
55 *
56 * @param coordX the size of the coordinate space in the x direction
57 * @param coordY the size of the coordinate space in the y direction
58 * @param pixelX the CSS width in pixels of the canvas element
59 * @param pixelY the CSS height in pixels of the canvas element
60 """
61 - def __init__(self, coordX=300, coordY=150, pixelX=300, pixelY=150,
62 **kwargs):
80
83
86
87 """*
88 * Draws an arc. If the context has a non-empty path, then the method must add
89 * a straight line from the last point in the path to the start point of the
90 * arc.
91 *
92 * @param x center X coordinate
93 * @param y center Y coordinate
94 * @param radius radius of drawn arc
95 * @param startAngle angle measured from positive X axis to start of arc CW
96 * @param endAngle angle measured from positive X axis to end of arc CW
97 * @param antiClockwise direction that the arc line is drawn
98 """
99 - def arc(self, x, y, radius, startAngle, endAngle, antiClockwise):
100 self.impl.arc(x, y, radius, startAngle, endAngle, antiClockwise)
101
102
103 """*
104 * Erases the current path and prepares it for a path.
105 """
108
109
110 """*
111 * Clears the entire canvas.
112 """
114
115
116 self.impl.clear(self.coordWidth, self.coordHeight)
117
118
119 """*
120 * Closes the current path. "Closing" simply means that a line is drawn from
121 * the last element in the path back to the first.
122 """
125
126
127 """*
128 *
129 * Creates a LinearGradient Object for use as a fill or stroke style.
130 *
131 * @param x0 x coord of start point of gradient
132 * @param y0 y coord of start point of gradient
133 * @param x1 x coord of end point of gradient
134 * @param y1 y coord of end point of gradient
135 * @return returns the CanvasGradient
136 """
139
140
141 """*
142 *
143 * Creates a RadialGradient Object for use as a fill or stroke style.
144 *
145 * @param x0 x coord of origin of start circle
146 * @param y0 y coord of origin of start circle
147 * @param r0 radius of start circle
148 * @param x1 x coord of origin of end circle
149 * @param y1 y coord of origin of end circle
150 * @param r1 radius of the end circle
151 * @return returns the CanvasGradient
152 """
156
157
158 """*
159 *
160 * Does nothing if the context's path is empty. Otherwise, it connects the
161 * last point in the path to the given point <b>(x, y)</b> using a cubic
162 * Bezier curve with control points <b>(cp1x, cp1y)</b> and <b>(cp2x,
163 * cp2y)</b>. Then, it must add the point <b>(x, y)</b> to the path.
164 *
165 * This function corresponds to the
166 * <code>bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)</code> method in canvas
167 * element Javascript API.
168 *
169 * @param cp1x x coord of first Control Point
170 * @param cp1y y coord of first Control Point
171 * @param cp2x x coord of second Control Point
172 * @param cp2y y coord of second Control Point
173 * @param x x coord of point
174 * @param y x coord of point
175 """
178
179
180 """*
181 * Draws an input image at a given position on the canvas. Resizes image
182 * according to specified width and height and samples from the specified
183 * sourceY and sourceX.
184 *
185 * <p>
186 * We recommend that the pixel and coordinate spaces be the same to provide
187 * consistent positioning and scaling results
188 * </p>
189 *
190 option 1:
191 * @param img the image to be drawn
192 * @param offsetX x coord of the top left corner in the destination space
193 * @param offsetY y coord of the top left corner in the destination space
194 * @param img The image to be drawn
195
196 option 2:
197 * @param offsetX x coord of the top left corner in the destination space
198 * @param offsetY y coord of the top left corner in the destination space
199 * @param width the size of the image in the destination space
200 * @param height the size of the image in the destination space
201
202 option 3:
203 * @param img the image to be drawn
204 * @param sourceX the start X position in the source image
205 * @param sourceY the start Y position in the source image
206 * @param sourceWidth the width in the source image you want to sample
207 * @param sourceHeight the height in the source image you want to sample
208 * @param destX the start X position in the destination image
209 * @param destY the start Y position in the destination image
210 * @param destWidth the width of drawn image in the destination
211 * @param destHeight the height of the drawn image in the destination
212 """
214 if isinstance(img, Widget):
215 img_width = img.getWidth()
216 img_height = img.getHeight()
217 else:
218 img_width = DOM.getIntAttribute(img, "offsetWidth")
219 img_height = DOM.getIntAttribute(img, "offsetHeight")
220 if len(args) == 8:
221 self.impl.drawImage(img, args[0], args[1], args[2], args[3], args[4], args[5], args[6], args[7])
222 elif len(args) == 4:
223 sourceX = 0
224 sourceY = 0
225 sourceWidth = img_width
226 sourceHeight = img_height
227 destX = args[0]
228 destY = args[1]
229 destWidth = args[2]
230 destHeight = args[3]
231 self.impl.drawImage(img, sourceX, sourceY,
232 sourceWidth, sourceHeight,
233 destX, destY, destWidth, destHeight)
234 elif len(args) == 2:
235 self.impl.drawImage(img, args[0], args[1])
236
237
238 """*
239 * Fills the current path according to the current fillstyle.
240 """
243
244
245 """*
246 * Fills a rectangle of the specified dimensions, at the specified start
247 * coords, according to the current fillstyle.
248 *
249 * @param startX x coord of the top left corner in the destination space
250 * @param startY y coord of the top left corner in the destination space
251 * @param width destination width of image
252 * @param height destination height of image
253 """
254 - def fillRect(self, startX, startY, width, height):
255 self.impl.fillRect(startX, startY, width, height)
256
257 """*
258 * Places text, at the specified start
259 * coords, according to the current fillstyle.
260 *
261 * @param startX x coord of the top left corner in the destination space
262 * @param startY y coord of the top left corner in the destination space
263 * @param maxWidth maximum width of text
264 """
265 - def fillText(self, text, startX, startY, maxWidth=None):
266 self.impl.fillText(text, startX, startY, maxWidth)
267
268
269 """*
270 * Returns the height in pixels of the canvas.
271 *
272 * @return returns the height in pixels of the canvas
273 """
275 return self.coordHeight
276
277
278 """*
279 *
280 * Returns the width in pixels of the canvas.
281 *
282 * @return returns the width in pixels of the canvas
283 """
285 return self.coordWidth
286
287
288 """*
289 * See self.setter method for a fully detailed description.
290 *
291 * @return
292 * @see GWTCanvas#setGlobalAlpha(double)
293 """
296
297
298 """*
299 * See self.setter method for a fully detailed description.
300 *
301 * @return
302 * @see GWTCanvas#setGlobalCompositeOperation(String)
303 """
306
307
308 """*
309 * See self.setter method for a fully detailed description.
310 *
311 * @return
312 * @see GWTCanvas#setLineCap(String)
313 """
316
317
318 """*
319 * See self.setter method for a fully detailed description.
320 *
321 * @return
322 * @see GWTCanvas#setLineJoin(String)
323 """
326
327
328 """*
329 * See self.setter method for a fully detailed description.
330 *
331 * @return
332 * @see GWTCanvas#setLineWidth(double)
333 """
336
337
338 """*
339 * See self.setter method for a fully detailed description.
340 *
341 * @return
342 * @see GWTCanvas#setMiterLimit(double)
343 """
346
347
348 """*
349 * Adds a line from the last point in the current path to the point defined by
350 * x and y.
351 *
352 * @param x x coord of point
353 * @param y y coord of point
354 """
357
358
359 """*
360 * Makes the last point in the current path be <b>(x,y)</b>.
361 *
362 * @param x x coord of point
363 * @param y y coord of point
364 """
367
368
369 """*
370 * Does nothing if the context has an empty path. Otherwise it connects the
371 * last point in the path to the given point <b>(x, y)</b> using a quadratic
372 * Bezier curve with control point <b>(cpx, cpy)</b>, and then adds the given
373 * point <b>(x, y)</b> to the path.
374 *
375 * @param cpx x coord of the control point
376 * @param cpy y coord of the control point
377 * @param x x coord of the point
378 * @param y y coord of the point
379 """
382
383
384 """*
385 * Adds a rectangle to the current path, and closes the path.
386 *
387 * @param startX x coord of the top left corner of the rectangle
388 * @param startY y coord of the top left corner of the rectangle
389 * @param width the width of the rectangle
390 * @param height the height of the rectangle
391 """
392 - def rect(self, startX, startY, width, height):
393 self.impl.rect(startX, startY, width, height)
394
395
396 """*
397 * Convenience function for resizing the canvas with consistent coordinate and
398 * screen pixel spaces. Equivalent to doing:
399 *
400 * <pre><code>
401 * canvas.setCoordSize(width, height)
402 * canvas.setPixelHeight(height)
403 * canvas.setPixelWidth(width)
404 * </code></pre>
405 *
406 * @param width
407 * @param height
408 """
409 - def resize(self, width, height):
413
414
415 """*
416 * Restores the last saved context from the context stack.
417 """
418 - def restoreContext(self):
419 self.impl.restoreContext()
420
421
422 """*
423 * Adds a rotation of the specified angle to the current transform.
424 *
425 * @param angle the angle to rotate by, <b>in radians</b>
426 """
429
430
431 """*
432 * Saves the current context to the context stack.
433 """
434 - def saveContext(self):
435 self.impl.saveContext()
436
437
438 """*
439 * Adds a scale transformation to the current transformation matrix.
440 *
441 * @param x ratio that we must scale in the X direction
442 * @param y ratio that we must scale in the Y direction
443 """
445 self.impl.scale(x, y)
446
447
448 """*
449 * Sets the background color of the canvas element.
450 *
451 * @param color the background color.
452 """
455
456
457 """*
458 * Sets the coordinate height of the Canvas.
459 * <p>
460 * This will erase the canvas contents!
461 * </p>
462 *
463 * @param height the size of the y component of the coordinate space
464 """
468
469
470 """*
471 * Sets the coordinate space of the Canvas.
472 * <p>
473 * This will erase the canvas contents!
474 * </p>
475 *
476 * @param width the size of the x component of the coordinate space
477 * @param height the size of the y component of the coordinate space
478 """
482
483
484 """*
485 * Sets the coordinate width of the Canvas.
486 * <p>
487 * This will erase the canvas contents!
488 * </p>
489 *
490 * @param width the size of the x component of the coordinate space
491 """
495
496
497 """*
498 * Set the current Fill Style to the specified color gradient.
499 *
500 * @param grad {@link CanvasGradient}
501 """
504
505
506 """*
507 * Set the global transparency to the specified alpha.
508 *
509 * @param alpha alpha value
510 """
513
514
515 """*
516 * Determines how the canvas is displayed relative to any background content.
517 * The string identifies the desired compositing mode. If you do not self.set this
518 * value explicitly, the canvas uses the <code>GWTCanvas.SOURCE_OVER</code>
519 * compositing mode.
520 * <p>
521 * The valid compositing operators are:
522 * <ul>
523 * <li><code>GWTCanvas.SOURCE_OVER</code>
524 * <li><code>GWTCanvas.DESTINATION_OVER</code>
525 * </ul>
526 * <p>
527 *
528 * @param globalCompositeOperation
529 """
532
533
534 """*
535 * A string value that determines the end style used when drawing a line.
536 * Specify the string <code>GWTCanvas.BUTT</code> for a flat edge that is
537 * perpendicular to the line itself, <code>GWTCanvas.ROUND</code> for round
538 * endpoints, or <code>GWTCanvas.SQUARE</code> for square endpoints. If you do
539 * not self.set this value explicitly, the canvas uses the
540 * <code>GWTCanvas.BUTT</code> line cap style.
541 *
542 * @param lineCap
543 """
546
547
548 """*
549 * A string value that determines the join style between lines. Specify the
550 * string <code>GWTCanvas.ROUND</code> for round joins,
551 * <code>GWTCanvas.BEVEL</code> for beveled joins, or
552 * <code>GWTCanvas.MITER</code> for miter joins. If you do not self.set this value
553 * explicitly, the canvas uses the <code>GWTCanvas.MITER</code> line join
554 * style.
555 *
556 * @param lineJoin
557 """
560
561
562 """*
563 * Sets the current context's linewidth. Line width is the thickness of a
564 * stroked line.
565 *
566 * @param width the width of the canvas
567 """
570
571
572 """*
573 * A double value with the miter limit. You use this property to specify
574 * how the canvas draws the juncture between connected line segments. If the
575 * line join is self.set to <code>GWTCanvas.MITER</code>, the canvas uses the miter
576 * limit to determine whether the lines should be joined with a bevel instead
577 * of a miter. The canvas divides the length of the miter by the line width.
578 * If the result is greater than the miter limit, the style is converted to a
579 * bevel.
580 *
581 * @param miterLimit
582 """
585
586
587 """*
588 * Sets the CSS height of the canvas in pixels.
589 *
590 * @param height the height of the canvas in pixels
591 """
594
595
596 """*
597 * Sets the CSS width in pixels for the canvas.
598 *
599 * @param width width of the canvas in pixels
600 """
603
604
605 """*
606 * Set the current Stroke Style to the specified color gradient.
607 *
608 * @param grad {@link CanvasGradient}
609 """
612
613
614 """*
615 * Strokes the current path according to the current stroke style.
616 """
619
620
621 """*
622 * Strokes a rectangle defined by the supplied arguments.
623 *
624 * @param startX x coord of the top left corner
625 * @param startY y coord of the top left corner
626 * @param width width of the rectangle
627 * @param height height of the rectangle
628 """
629 - def strokeRect(self, startX, startY, width, height):
630 self.impl.strokeRect(startX, startY, width, height)
631
632
633 """*
634 * <code>The transform(m11, m12, m21, m22, dx, dy)</code> method must multiply
635 * the current transformation matrix with the input matrix. Input described
636 * by:
637 *
638 * <pre>
639 * m11 m21 dx
640 * m12 m22 dy
641 * 0 0 1
642 *</pre>
643 *
644 * @param m11 top left cell of 2x2 rotation matrix
645 * @param m12 top right cell of 2x2 rotation matrix
646 * @param m21 bottom left cell of 2x2 rotation matrix
647 * @param m22 bottom right cell of 2x2 rotation matrix
648 * @param dx Translation in X direction
649 * @param dy Translation in Y direction
650 """
653
654
655 """*
656 * Applies a translation (linear shift) by x in the horizontal and by y in the
657 * vertical.
658 *
659 * @param x amount to shift in the x direction
660 * @param y amount to shift in the y direction
661 """
664