MultiMedia: Difference between revisions
Jump to navigation
Jump to search
Line 1: | Line 1: | ||
= PictureBox: images, | = PictureBox: Drawing, text, images, sprites = | ||
The PictureBox control is a powerful container for images, drawing and text. | |||
* Based on the HTML5 Canvas widget. | |||
== text == | * Before you can output anything to a PictureBox, a context must be created: | ||
<pre> | |||
pb = PictureBox1.getContext("2d") | |||
</pre> | |||
* All drawing, images, etc. are done to the context. | |||
* Declare the context variable globally if needed. | |||
* There are really only 3 things you can do with a PictureBox: Everything else deals with the context: | |||
{| class="wikitable" | |||
|- | |||
| getContext("2d") || Gets the drawing context. Returns the object that the PictureBox Context functions use. "2d" is currently the only valid argument. | |||
|- | |||
| refresh() || Redraws the entire PictureBox. Required after resizing the box or scrolling. | |||
|- | |||
| toDataURL(type) || Returns the current picturebox in a Base64 string image. If type is not specified, it is in PNG format. Type can also be "image/jpeg" or "image/gif". | |||
|} | |||
== Drawing == | |||
* Here are some of the drawing commands. | |||
* More are listed in the full documentation | |||
{| class="wikitable" | |||
| arc(x, y, radius, startAngle, endAngle, counterclockwise) || Adds an arc to the current path using a radius and specified angles(in radians). | |||
|- | |||
| arcTo(x1, y1, x2, y2, radius) || Adds an arc of a circle to the current sub path by using a radius and tangent points. | |||
|- | |||
| beginPath() || Creates a new path in the canvas and sets the starting point to the coordinate (0,0). | |||
|- | |||
| bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y) || Adds a cubic Bezier's curve to the current sub path using two control points. | |||
|- | |||
| clearRect(x, y, width, height) || Clears the specified rectangle region and makes it transparent. | |||
|- | |||
| closePath() || Closes an open path and attempts to draw a straight line from the current point to starting point of the path. The use of closePath() is optional. | |||
|- | |||
| fill() || Closes the current path and paints the area within it. | |||
|- | |||
| fillRect(x, y, width, height) || Draws a filled rectangle. | |||
|- | |||
| fillStyle || color|gradient|pattern | |||
|- | |||
| lineCap || Sets style of end caps for a line. "butt", "round" or "square". | |||
|- | |||
| lineJoin || Set style where two lines meet. "bevel", "round" or "mitre". | |||
|- | |||
| lineWidth || The current line width, in pixels. | |||
|- | |||
| lineTo(x, y) || Adds a line segment from the current point to the specified coordinate. The appearance of the line can be set by the following properties: <br> | |||
fillStyle, strokeStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor | |||
| rect(x, y, width, height) || Adds a rectangle. | |||
|- | |||
| stroke() || Actually draws the path you have defined | |||
|- | |||
| strokeRect(x, y, width, height) || Draws a rectangular outline. | |||
|- | |||
| strokeStyle || color|gradient|pattern | |||
|- | |||
| strokeText(text, x, y, maxWidth) || Draws text (with no fill) on the canvas. | |||
|} | |||
== Text == | |||
== Images == | |||
== Sprites == | == Sprites == |
Revision as of 15:07, 11 December 2013
PictureBox: Drawing, text, images, sprites
The PictureBox control is a powerful container for images, drawing and text.
- Based on the HTML5 Canvas widget.
- Before you can output anything to a PictureBox, a context must be created:
pb = PictureBox1.getContext("2d")
- All drawing, images, etc. are done to the context.
- Declare the context variable globally if needed.
- There are really only 3 things you can do with a PictureBox: Everything else deals with the context:
getContext("2d") | Gets the drawing context. Returns the object that the PictureBox Context functions use. "2d" is currently the only valid argument. |
refresh() | Redraws the entire PictureBox. Required after resizing the box or scrolling. |
toDataURL(type) | Returns the current picturebox in a Base64 string image. If type is not specified, it is in PNG format. Type can also be "image/jpeg" or "image/gif". |
Drawing
- Here are some of the drawing commands.
- More are listed in the full documentation
arc(x, y, radius, startAngle, endAngle, counterclockwise) | Adds an arc to the current path using a radius and specified angles(in radians). | ||
arcTo(x1, y1, x2, y2, radius) | Adds an arc of a circle to the current sub path by using a radius and tangent points. | ||
beginPath() | Creates a new path in the canvas and sets the starting point to the coordinate (0,0). | ||
bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y) | Adds a cubic Bezier's curve to the current sub path using two control points. | ||
clearRect(x, y, width, height) | Clears the specified rectangle region and makes it transparent. | ||
closePath() | Closes an open path and attempts to draw a straight line from the current point to starting point of the path. The use of closePath() is optional. | ||
fill() | Closes the current path and paints the area within it. | ||
fillRect(x, y, width, height) | Draws a filled rectangle. | ||
fillStyle | gradient|pattern | ||
lineCap | Sets style of end caps for a line. "butt", "round" or "square". | ||
lineJoin | Set style where two lines meet. "bevel", "round" or "mitre". | ||
lineWidth | The current line width, in pixels. | ||
lineTo(x, y) | Adds a line segment from the current point to the specified coordinate. The appearance of the line can be set by the following properties: fillStyle, strokeStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor |
rect(x, y, width, height) | Adds a rectangle. |
stroke() | Actually draws the path you have defined | ||
strokeRect(x, y, width, height) | Draws a rectangular outline. | ||
strokeStyle | gradient|pattern | ||
strokeText(text, x, y, maxWidth) | Draws text (with no fill) on the canvas. |