- Legend to Symbols

-
Class nokia.maps.gfx.IDL
IDL is the abbreviation for Image Description Language. Each instance of the IDL class contains data that describe an image using a set of opcodes which must be interpreted and used to render the image. The opcodes are interpreted and based in a virtual rendering context that supports a set of state attributes and a set of instructions (opcodes). The instructions either modify the state attributes of the rendering context or they cause drawing operations to be performed, using the current rendering context state.
You can find more detailed information about the opcodes and the state
attributes in the IDL properties and the static hashtable opcodes.
The coordinate system
A point in the IDL is infinitely small and a line or a Bezier curve are therefore infinitely thin as well. An IDL point with the coordinates 0,0 is projected onto the center of the screen pixel with the coordinates 0,0. This projection model differs from that used in SVG and the Canvas implementation, but it fits in with the model used by VML. We settled on this model simply because it makes rendering easier to understand and to handle.
The following example creates a 2D image, 64 x 64 pixels, showing a semi-transparent red rectangle, centered within the image and with a 1 pixel black opaque border:
// Create a new IDL object.
var IDL = nokia.maps.gfx.IDL,
parseCss = nokia.maps.gfx.Color.parseCss,
top = IDL.opcodes,
attr = IDL.attributeToIdentifier,
idlImage = new IDL(
[
// Create a new image with a size of 64x64 pixel
op.BEGIN_2D_IMAGE, 64, 64, "MyImage",
// Create a new path that follows a rectangular shape with the top-left
// corner of the bounding box at 16, 16 and a width and height of 32 x 32
// pixels
op.BEGIN_PATH,
op.MOVE_TO, 16, 16,
op.LINE_TO, 47, 16,
op.LINE_TO, 47, 47,
op.LINE_TO, 16, 47,
op.CLOSE_PATH,
// Fill and stroke the path
op.SET, attr.fillColor, parseCss("red", 0.5),
op.SET, attr.strokeColor, parseCss("black",1.0),
op.SET, attr.lineWidth, 1.0,
op.FILL,
op.STROKE
]);
// Create an instance of the best painter for the current browser and
// platform and paint the IDL image into the document body
var body = document.body || document.documentElement,
DefaultPainter = nokia.maps.gfx.Painter.defaultPainter,
painter = new DefaultPainter();
body.appendChild(painter.createElement(idlImage, document));
Note that we do not recommend that you create an IDL object directly; it is better to use the class nokia.maps.gfx.Graphics for this purpose. The reason is that although "hand optimized" opcode can be small and maybe efficient in certain implementations, for exaple, a Canvas painter, but it can cause suboptimal performance if used with other painters such as VML, while the graphics context generates code that runs well in all implementations.
width, height, description and data properties.
width, height, description and data, from an internal stack.
width, height, description and data, to an internal stack.
"butt", "round" or "square", the default is "butt".
"round", "bevel" or "miter", the default is "miter".
"start", "end", "left", "right" or "center", default is "start".
This method creates a new empty image description language object.
| {nokia.maps.gfx.IDL} | [idl]: | The IDL with which the given IDL object is to be initialized; if not provided, an empty IDL object is created |
| {nokia.maps.gfx.IDL} | idl | The IDL to be appended to the given IDL instance |
| {nokia.maps.gfx.IDL} | The reference to the given IDL instance |
Note that The only property that is deep-cloned is data.
As a result, the clone contains a copied instruction set, but all other
properties refer to the same values. The internal stack is cloned as
well.
| {nokia.maps.gfx.IDL} | A clone of the given IDL instance |
| {nokia.maps.gfx.IDL} | idl | The IDL to be appended to the given IDL instance |
| {nokia.maps.gfx.IDL} | The new combined IDL, the image size of the current IDL is retained |
Example:
var IDL = nokia.maps.gfx.IDL,
Color = nokia.maps.gfx.Color,
idl = new IDL(),
opcodes = IDL.opcodes,
attr = attributeToIdentifier;
idl.push(
opcodes.BEGIN_2D_IMAGE, 40, 40, "ExampleImage",
opcodes.BEGIN_PATH,
opcodes.MOVE_TO, 10, 10,
opcodes.LINE_TO, 20, 10,
opcodes.LINE_TO, 20, 20,
opcodes.LINE_TO, 10, 20,
opcodes.CLOSE_PATH,
opcodes.SET, attr.fillColor, Color.parseCss("#ff0000",0.5),
opcodes.FILL
);
| {Object} | idl… | An arbitrary number of parameters that contain the IDL code to be pushed |
width, height,
description and data properties.
width,
height, description and data,
from an internal stack.
If the internal stack is empty, the method restores the default state
and therefore it has the same effect as reset().
| {Object} | Additional data that has been pushed to the internal stack, if any |
The data always consists of one opcode, followed by fixed number of parameters for that opcode.
- See:
- nokia.maps.gfx.Color
"butt", "round" or "square", the default
is "butt".
The lineCap attribute defines the type of endings of lines. The butt value means that the end of each line has a flat edge. The round value means that a semi-circle is added to the end of the line. The square value means that a rectangle shall be added at the end of each line.
"round", "bevel" or "miter", the default
is "miter".
The lineJoin defines the type of corners that will be places where two lines meet. If the lineJoin
is "bevel", a filled triangle connecting the two opposite corners of the straight line, with
the third point of the triangle being the join point.
The "round" value means that a filled arc connecting the two aforementioned corners of the join
must be rendered at joins.
The "miter" value means that a second filled triangle must be rendered at the join, with one
line being the line between the two aforementioned corners, abutting the first triangle, and the other two
being continuations of the outside edges of the two joining lines, as long as required to intersect without
going over the miter length.
The miter length is the distance from the point where the join occurs to the intersection of the line edges
on the outside of the join. The miter limit ratio is the maximum allowed ratio of the miter length to half
the line width. If the miter length would cause the miter limit ratio to be exceeded, this second triangle
must not be rendered.
BEGIN_PATH),
while the values are the numeric values of opcodes.
Please refer to this table when adding your own opcodes to the
data property of the IDL.
| Alias | Opcode | Parameter | Description |
| BEGIN_2D_IMAGE | 45 (-) | {Number} width, {Number} height, {String} description | This is the first opcode (0x2D) that must apear in any 2D image description. It defines a new image with the given size of the canvas and sets the cursor to the position 0,0. |
| BEGIN_PATH | 64 (@) | - | Clear all sub-pathes. |
| MOVE_TO | 77 (M) | {Number} x, {Number} y | Start a new subpath and move the cursor to the given pixel position within the canvas. |
| LINE_TO | 76 (L) | {Number} x, {Number} | Draw a line from the current cursor position to the given canvas position. |
| BEZIER_CURVE_TO | 67 (C) | {Number} cp1_x, {Number} cp1_y, {Number} cp2_x, {Number} cp2_y, {Number} x, {Number} y |
Draw a Bezier curve of the 3rd degree from the current cursor position to the given x / y position using the two given control points. |
| CLOSE_PATH | 120 (x) | - | Close the last sub-path and connect the last point of the path with the first one, so that a fill operation can be performed. |
| FILL | 102 (f) | - | Close the last sub-path and fill all sub-paths with the current fill color. |
| STROKE | 115 (s) | - | Stroke all sub-paths with the current stroke style. |
| DRAW_IMAGE | 73 (I) | {Image} image, {Number} sourceX, {Number} sourceY, {Number} sourceWidth, {Number} sourceHeight, {Number} destinationX, {Number} destinationY, {Number} destinationWidth, {Number} destinationHeight |
Slice part of a source image and draws it into the destination. |
| SAVE | 62 (>) | - | Save the state of the rendering context at the stack (push). |
| RESTORE | 60 (<) | - | Restore the state of the rendering context from the stack (pop). |
| SET | 35 (#) | {Number} attributeIdentifier, {Object} value | Set the state attribute with the given identifier to the given value. The name of an
attribute can be translated into its identifier using the static attributeToIdentifier
property and from its identifier to its name using the static identifierToAttribute
property. |
- See:
- nokia.maps.gfx.Color