JXG.Image

Class

Construct and handle images. Creates a new image object. Do not use this constructor to create a image. Use JXG.Board#create with type Image instead.

The image can be supplied as

  • URL or
  • base64 encoded inline image like "data:image/png;base64, /9j/4AAQSkZJRgA..." or
  • a function returning an URL: function(){ return 'xxx.png; }.
Attributes

Own

none

Inherited

Members

Own

size : array

Description

Array of length two containing [width, height] of the image in pixel.

Type
array
Source
base/image.js, line 82

url : string

Description

'href' of the image. This might be an URL, but also a data-uri is allowed.

Type
string
Source
base/image.js, line 91

Inherited

Methods

Own

H() → {number}

Returns the height of the image in user coordinates.

Returns

height of the image in user coordinates

Type
number

Details

Source
base/image.js, line 387

W() → {number}

Returns the width of the image in user coordinates.

Returns

width of the image in user coordinates

Type
number

Details

Source
base/image.js, line 381

hasPoint(x, y) → {Boolean}

Checks whether (x,y) is over or near the image;

Parameters

Name Type Description
x Number

Coordinate in x direction, screen coordinates.

y Number

Coordinate in y direction, screen coordinates.

Returns

True if (x,y) is over the image, False otherwise.

Type
Boolean

Details

Overrides
JXG.CoordsElement#hasPoint
Source
base/image.js, line 132

setSize(width, height) → {JXG.GeometryElement}

Set the width and height of the image. After setting a new size, board.update() or image.fullUpdate() has to be called to make the change visible.

Examples

var im = board.create('image', ['https://jsxgraph.org/distrib/images/uccellino.jpg',
                               [-3,-2], [3,3]]);
im.setSize(4, 4);
board.update();

var p0 = board.create('point', [-3, -2]),
    im = board.create('image', ['https://jsxgraph.org/distrib/images/uccellino.jpg',
                    [function(){ return p0.X(); }, function(){ return p0.Y(); }],
                    [3,3]]),
    p1 = board.create('point', [1, 2]);

im.setSize(function(){ return p1.X() - p0.X(); }, function(){ return p1.Y() - p0.Y(); });
board.update();

Parameters

Name Type Description
width number | function | string

Number, function or string that determines the new width of the image

height number | function | string

Number, function or string that determines the new height of the image

Returns

A reference to the element

Type
JXG.GeometryElement

Details

Source
base/image.js, line 368

(private) update() → {JXG.GeometryElement}

Recalculate the coordinates of lower left corner and the width and height.

Returns

A reference to the element

Type
JXG.GeometryElement

Details

Overrides
JXG.CoordsElement#update
Source
base/image.js, line 186

(private) updateRenderer()

Send an update request to the renderer.

Details

Overrides
JXG.CoordsElement#updateRenderer
Source
base/image.js, line 202

(private) updateSize() → {JXG.GeometryElement}

Updates the internal arrays containing size of the image.

Returns

A reference to the element

Type
JXG.GeometryElement

Details

Source
base/image.js, line 211

(private) updateSpan() → {JXG.GeometryElement}

Update the anchor point of the image, i.e. the lower left corner and the two vectors which span the rectangle.

Returns

A reference to the element

Type
JXG.GeometryElement

Details

Source
base/image.js, line 228

Inherited

Events

Own

none

Inherited

Parameters

Name Type Description
board string | JXG.Board

The board the new image is drawn on.

coordinates Array

An array with the user coordinates of the image.

attributes Object

An object containing visual and - optionally - a name and an id.

url string | function

An URL string or a function returning an URL string.

size Array

Array containing width and height of the image in user coordinates.

Details

Source
base/image.js, line 67

Extends