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.
|
- Here is an example of some drawing:
'start by setting our colors.
pb.strokeStyle = vbBlack
pb.fillStyle = vbRed
'Now, we define the lines we want to draw in a path.
pb.beginPath()
pb.arc(150,150,50,0,Math.PI*2,True)
pb.closePath()
'Path is complete: draw it
pb.stroke()
'and paint the area inside the path
pb.fill()
Text
- Here are the text functions
fillText(text, x, y) |
Writes text using current settings of font, textAlign and textBaseline.
|
font |
The font to use for text. It is a string with three parts: "style size fontname". style can be normal, italic or bold. Example: "italic 40px Calibri"
|
measureText(text) |
Returns a rectangle object with text's size.
|
strokeText(text, x, y, maxWidth) |
Draws text (with no fill) on the canvas.
|
textAlign |
Controls text alignment. Possible values are start , end , left , right and center .
|
textBaseline |
Controls where the text is drawn relative to the starting point. Possible values are top , hanging , middle , alphabetic , ideographic and bottom .
|
style(x, y, width, height) |
Any valid style string.
|
pb.textBaseline = "top"
pb.font="16px sans-serif"
pb.fillText("This is a picturebox",100,0)
Images
Sprites
Multimedia
Audio
Video
HTMLView