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
- Images are loaded asynchronously, since they may take time to load.
- A global image object needs to be created to load the image into.
- When load is complete, a function with the image object _onload is called.
- It can then be drawn on the PictureBox.
myImage=new Image()
- Here are the image functions:
createImageData(width, height) |
Creates a new, blank ImageData object.
|
drawImage(image, x, y, width, height) |
Draw an image.
|
getImageData(x,y,height,width) |
Return the image data for a portion of the image. Includes width, height, data array [rgba].
|
globalCompositeOperation(source-over, source-atop, source-in, source-out, destination-over, destination-atop, destination-in, destination-out, lighter, copy, xor ) |
Sets or returns how a source (new) images are drawn onto a destination (existing) image.
|
putImageData(imgData, x, y, dirtyX, dirtyY, dirtyWidth, dirtyHeight) |
Puts the image data (from a specified ImageData object) back onto the canvas.
|
- Here is how the code looks:
myImage=new Image()
Function Button3_onclick()
'Set the image. When it finishes loading, Image1_onload will be called.
myImage.src="mario.jpg"
End Function
Function myImage_onload()
pb.drawImage(myImage,0,0)
End Function
- Do not set the image in global code - the PictureBox will not be ready.
- Doing so in Sub Main or a button is fine.
Sprites
- PictureBoxes can be moved on the screen so they act as sprites
- Here we move the complete PictureBox and flip it upside down.
PictureBox1.Left=PictureBox1.Left+5
PictureBox1.style.webkitTransform="rotate(180deg)"
- Animate a sprite by using a SetTimeout function to be run every few milliseconds.
SetTimeout("moveMario()",10)
Multimedia
Audio
The Audio control is used to play sounds.
- Sound files can be any common format, including mp3, ogg, uncompressed wav and aac.
Here are some options for it:
autoplay |
Audio will start playing as soon as ready. Not supported on iOS.
|
controls |
Controls will be displayed, such as a Play.
|
loop |
Audio will start over again when finished.
|
preload |
Audio should be loaded when the page loads. Ignored if autoplay is present.
|
src |
The name of the file. For example, Super.wav. It can be in the project folder or on a website.
|
Function Button1_onclick()
Audio1.play()
End Function
Video
The Video control is used to play a video.
- The video has to be in a specific format. Generally, H.264+AAC+MP4 will work.
autoplay |
Video will start playing as soon as ready.
|
controls |
Controls will be displayed, such as a Play.
|
loop |
Video will start over again when finished.
|
preload |
Video should be loaded when the page loads. Ignored if autoplay is present.
|
src |
The name of the file. For example, http://www.nsbasic.com/videotest.mp4. It should be in the project folder or on a web site.
|
Function Button2_onclick()
Video1.play()
End Function
HTMLView