Thursday, 7 December 2017

JavaScript Drawing Methods

The drawPoint() method takes the x and y coordinates of the point to be drawn. These are specified relative to the upper-left corner of the image, which is point (0,0).
The y coordinate is used as an index into the array of xbmRow objects. The high-order bits of the x coordinate are used to compute an index into the array of JavaScript numbers representing the row. The low-order bits are then used to calculate the bit offset for the desired pixel coordinate, which is turned on.

The drawCircle() method, xbmDrawCircle(), and the drawFilledCircle() method, xbmDrawFilledCircle(), take the coordinates of the center point of the circle plus the radius.
These methods take advantage of the fact that it's necessary only to compute the points for a single octant (one-eighth) of a circle. They compute these points relative to an origin of (0,0), and then translate them to the eight octants relative to the x and y coordinates.

Once an xbmImage has been displayed, any subsequent changes to it will not be displayed when you redraw the frame. Netscape assumes that images of a given name don't change, so it uses its cached copy after the first draw.
The workaround is to assign the xbmImage object to an object with a different name and then redraw it. The JS-Draw application, shown in the next section, uses an array for this purpose.

The toString() method, MarqueeString(), uses a table to center the text vertically and horizontally within the frame.
You should also note that if you use a combination of large and small fonts in your marquee, the text may "wobble" vertically during the transition from one size to another.

The nbsp() function is used to replace all space characters with nonbreaking spaces (&nbsp). This enables you to include consecutive spaces in your text.
It also prevents the scrolling text from breaking into two or more lines when the font is small enough or the marquee window large enough that this would otherwise occur.

The url parameter to the Image() constructor must be a fully specified URL; relative URLs won't work within the framework we've developed because the default protocol is always assumed to be javascript:. The width and height parameters are required,
But it is not necessarily that they have to be accurate: Netscape automatically scales images to the width and height specified.

In some cases, you may just want to put some text in a frame at a particular time. This isn't really an effect, per se, but it would be convenient to have an object similar to the rest of our objects for this purpose. The Static object fills this need.
The Static() constructor takes a BodyColor object and a text string, which may contain HTML. You could also use a Text object or a Block object for the text parameter.

The JavaScript uses 32-bit integers, it makes sense to store 32 XBM bits in each JavaScript number. However, it turns out that the high-order sign bit can't be set on some platforms, so we'll use 16-bit numbers instead.
This wastes some space, but the math is much easier if we stick with powers of 2.