Image Element (jsgl.elements.ImageElement)

This page documents how raster image can be drawn and manipulated using JSGL.

The class inherits from jsgl.elements.AbstractElement.

To create an image, use the .createImage() factory method of a jsgl.Panel object. To make the image visible, add it to its viewport:

var myImage = myPanel.createImage();
myPanel.addElement(myImage);

Following methods are inherited from jsgl.elements.AbstractElement:

setZIndex, getZIndex, setCursor, getCursor, addMouseMoveListener, removeMouseMoveListener, addMouseDownListener, removeMouseDownListener, addMouseUpListener, removeMouseUpListener, addMouseOverListener, removeMouseOverListener, addMouseOutListener, removeMouseOutListener, addClickListener, removeClickListener, addDoubleClickListener, and removeDoubleClickListener.

Sets the X-coordinate of the image's anchor point.

Set the left side of the image (before any rotation!) to be at x=200 in the coordinate system:

myImage.setHorizontalAnchor(jsgl.HorizontalAnchor.LEFT);
myImage.setX(200);

Set the center of the image (before any rotation!) to be at x=300 in the coordinate system:

myImage.setHorizontalAnchor(jsgl.HorizontalAnchor.CENTER);
myImage.setX(300);

Set the right side of the image (before any rotation!) to be at x=400 in the coordinate system:

myImage.setHorizontalAnchor(jsgl.HorizontalAnchor.RIGHT);
myImage.setX(400);

Sets the Y-coordinate of the image's anchor point.

Set the top side of the image (before any rotation!) to be at y=100 in the coordinate system:

myImage.setVerticalAnchor(jsgl.VerticalAnchor.TOP);
myImage.setY(100);

Set the middle of the image (before any rotation!) to be at y=150 in the coordinate system:

myImage.setVerticalAnchor(jsgl.VerticalAnchor.MIDDLE);
myImage.setY(150);

Set the bottom side of the image (before any rotation!) to be at y=200 in the coordinate system:

myImage.setVerticalAnchor(jsgl.VerticalAnchor.BOTTOM);
myImage.setX(200);

version 2.0

Sets the location of the image's anchor point using couple of real-valued coordinates.

Set the anchor point of the image to be located at [x=300, y=200] in the coordinate system:

myImage.setLocationXY(300,200);

version 2.0

Sets the coordinates of the image's anchor point using a jsgl.Vector2D object.

The object passed as a parameter is copied, hence further changes in it will not affect the behavior of the image.

Make the anchor point of the image be located at [x=300, y=200] in the coordinate system:

myImage.setLocation(new jsgl.Vector2D(300,200));

version 2.0

Sets the horizontal anchor of the image. This influences how the image is horizontally positioned with respect to its anchor point. This also affects how the image is rotated around the anchor point.

See the illustration above.

myImage.setHorizontalAnchor(jsgl.HorizontalAnchor.LEFT); // default

myImage.setHorizontalAnchor(jsgl.HorizontalAnchor.CENTER);

myImage.setHorizontalAnchor(jsgl.HorizontalAnchor.RIGHT);

version 2.0

Sets the vertical anchor of the image. This influences how the image is vertically positioned with respect to its anchor point. This also affects how the image is rotated around the anchor point.

See the illustration above.

myImage.setVerticalAnchor(jsgl.VerticalAnchor.TOP); // default

myImage.setVerticalAnchor(jsgl.VerticalAnchor.MIDDLE);

myImage.setVerticalAnchor(jsgl.VerticalAnchor.BOTTOM);

Sets the clockwise rotation of the image around its anchor point in degrees.

Make the image rotated by 45 degrees:

myImage.setRotation(45);

TBD. (radians)

version 2.0

Gets the current X-coordinate of the image's anchor point.

Number

Report the current X-coordinate of myImage's anchor point:

window.alert(myImage.getX());

version 2.0

Gets the current Y-coordinate of the image's anchor point.

Number

Report the current Y-coordinate of myImage's anchor point:

window.alert(myImage.getY());

version 2.0

Gets the current location of the image's anchor point.

The object returned is a copy of the image's internal representation, so further changes in it will not affect the behavior of the image.

jsgl.Vector2D

Make the anchor point of myImage be at the same location as the anchor point of yourImage:

myImage.setLocation(yourImage.getLocation());

version 2.0

Gets the current horizontal anchor of the image (see the illustration above).

jsgl.HorizontalAnchor

Make the horizontal anchor of myImage be the same as of yourImage:

myImage.setHorizontalAnchor(yourImage.getHorizontalAnchor());

version 2.0

Gets the current vertical anchor of the image (see the illustration above).

jsgl.VerticalAnchor

Make the vertical anchor of myImage be the same as of yourImage:

myImage.setVerticalAnchor(yourImage.getVerticalAnchor);

version 2.0

Gets the current clockwise rotation of the image around its anchor point in degrees.

Number

Make the clockwise rotation of myImage be the same as of yourImage:

myImage.setRotation(yourImage.getRotation());

version 2.0

Sets the width of the image. This overrides the physical width of the image that is detected automatically after the image is loaded.

Set the width of the image to 300 pixels:

myImage.setWidth(300);

version 2.0

Sets the height of the image. This overrides the physical height of the image that is detected automatically after the image is loaded.

Set the height of the image to 200 pixels:

myImage.setHeight(200);

version 2.0

Sets the size (Width and Height) of the image using couple of real numbers. This overrides the physical dimensions of the image that are detected automatically after the image is loaded.

Set the new size of the image to [width=300, height=200]:

myImage.setSizeWH(300,200);

version 2.0

Sets the size of the image using jsgl.Vector2D object. This overrides the physical dimensions of the image that are detected automatically after the image is loaded.

The object passed as parameter is copied, hence future changes in it will not affect the behavior of the image.

Set the size of the image to [width=300, height=200]:

myImage.setSize(new jsgl.Vector2D(300,200));

version 2.0

Gets the current width of the image.

If the width has previously been set manually, then the manually set width is returned.

If the width hasn't been set manually, two cases may happen:

1. The image has already been loaded and its physical width is returned;
2. The image has not been loaded yet and zero is returned.

Number

Set the width of myImage be the same of yourImage:

myImage.setWidth(yourImage.getWidth());

version 2.0

Gets the current height of the image.

If the height has previously been set manually, then the manually set height is returned.

If the height hasn't been set manually, two cases may happen:

1. The image has already been loaded and its physical height is returned;
2. The image has not been loaded yet and zero is returned.

Number

Make myImage be of the same height as yourImage:

myImage.setHeight(yourImage.getHeight());

version 2.0

Gets the current size of the image as jsgl.Vector2D. The X-coordinate of the vector represents the currently used width of the image, whilst the Y-coordinate means the currently used height.

The semantics of both the X and Y components of the vector is the same as with getWidth() and getHeight() methods.

The object returned is a copy of the element's internal representation, hence further changes in it will not affect the behavior of the image.

jsgl.Vector2D

Make myImage be of the same size as yourImage:

myImage.setSize(yourImage.getSize());

Sets the new opacity of the image.

Make the image 50% transparent:

myImage.setOpacity(0.5);

version 2.0

Gets the current opacity of the image.

Number

Make myImage be of the same opacity as yourImage:

myImage.setOpacity(yourImage.getOpacity());

Report the current transparency of the image:

window.alert('The image is currently ' + 100*(1-myImage.getOpacity()) + '% transparent.');

version 2.0

Gets the stroke object that is currently used for painting an outline of the image. By default, the stroke is disabled, i.e. there is no outline painted. To enable outline painting, use

myImage.getStroke().setEnabled(true)

jsgl.stroke.AbstractStroke

TBD.

version 2.0

Sets the new stroke object to be used for painting outline of the image.

The image element will be listening to changes in the stroke object and will repaint itself automatically whenever the stroke stroke changes.

TBD.

version 2.0