MultiMedia: Difference between revisions
Jump to navigation
Jump to search
Line 52: | Line 52: | ||
| lineWidth || The current line width, in pixels. | | lineWidth || The current line width, in pixels. | ||
|- | |- | ||
| lineTo(x, y) || Adds a line segment from the current point to the specified coordinate. | | lineTo(x, y) || Adds a line segment from the current point to the specified coordinate. | ||
|- | |- | ||
| rect(x, y, width, height) || Adds a rectangle. | | rect(x, y, width, height) || Adds a rectangle. |
Revision as of 15:08, 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. |
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. |