Class: Camera

player/Camera.Camera(viewport, layer)

Camera.

Constructor

new Camera(viewport, layer)

Initialize a new camera.

Parameters:
Name Type Description
viewport module:player/Viewport.Viewport

The viewport attached to this camera.
layer module:model/Presentation.Layer

The layer where this camera operates.
Source:

Extends

Members

angle :number

The rotation angle applied to the camera, in degrees.

The angle is automatically normalized in the interval [-180 ; 180].

Type:
  • number
Overrides:
Default Value:
  • 0
Source:

clipHeightFactor :number

The height of the clipping rectangle with respect to the height of the image seen by the camera.

Type:
  • number
Overrides:
Default Value:
  • 1
Source:

clipped :boolean

Indicates that the content outside a specified rectangle must be clipped.

Type:
  • boolean
Overrides:
Source:

clipRect

The geometry of the clipping rectangle.

Source:

clipWidthFactor :number

The width of the clipping rectangle with respect to the width of the image seen by the camera.

Type:
  • number
Overrides:
Default Value:
  • 1
Source:

clipXOffset :number

The horizontal offset of the clipping rectangle with respect to the current camera location.

Type:
  • number
Overrides:
Source:

clipYOffset :number

The vertical offset of the clipping rectangle with respect to the current camera location.

Type:
  • number
Overrides:
Source:

cx :number

The horizontal coordinate of the camera.

This is also the horizontal coordinate of the center of the image seen by the camera.

Type:
  • number
Overrides:
Default Value:
  • The center of the bounding box of the SVG content.
Source:

cy :number

The vertical coordinate of the camera.

This is also the vertical coordinate of the center of the image seen by the camera.

Type:
  • number
Overrides:
Default Value:
  • The center of the bounding box of the SVG content.
Source:

height :number

The height of the image seen by the camera.

Cannot be lower than 1.

Type:
  • number
Overrides:
Default Value:
  • The height of the bounding box of the SVG content.
Source:

layer :module:model/Presentation.Layer

The layer where this camera operates.

Type:
Source:

maskValue :number

In edit mode, the opacity of the mask outside the clipping rectangle.

Type:
  • number
Source:

opacity :number

The opacity level of the layer attached to this camera.

A floating-point number between 0 and 1.

Type:
  • number
Overrides:
Default Value:
  • 1
Source:

(readonly) scale :number

The scaling factor applied to this camera to fit the viewport.

Type:
  • number
Source:

selected :boolean

Is the layer for this camera selected for manipulation by the user?

When playing the presentation, all cameras are always selected.

Type:
  • boolean
Default Value:
  • true
Source:

svgClipOutlineRect1 :SVGRectElement

A rectangle with black stroke that indicates the boundary of the clipped region.

This rectangle is painted below svgClipOutlineRect2 to create an alternating black-and-white pattern.

Type:
  • SVGRectElement
Source:

svgClipOutlineRect2 :SVGRectElement

A rectangle with dashed white stroke that indicates the boundary of the clipped region.

This rectangle is painted over svgClipOutlineRect1 to create an alternating black-and-white pattern.

Type:
  • SVGRectElement
Source:

svgClipRect :SVGRectElement

The clipping rectangle of this camera.

Type:
  • SVGRectElement
Source:

svgMaskRect :SVGRectElement

In edit mode, a rectangle that will be combined to the clipping rectangle to create a mask.

Type:
  • SVGRectElement
Source:

svgRoot :SVGSVGElement

The root SVG element attached to this camera.

Type:
  • SVGSVGElement
Overrides:
Source:

svgTransformGroups :Array.<SVGGElement>

The groups that will support transformations.

One SVG group is created for each group listed in each layer.

Type:
  • Array.<SVGGElement>
Source:

viewport :module:player/Viewport.Viewport

The viewport attached to this camera.

Type:
Source:

width :number

The width of the image seen by the camera.

Cannot be lower than 1.

Type:
  • number
Overrides:
Default Value:
  • The width of the bounding box of the SVG content.
Source:

Methods

applyOffset(arg)

Apply a transformation to the current camera state.

This method accepts an object with the same type as the result of offsetFromElement.

Parameters:
Name Type Description
arg object

A transformation object to apply.

Properties
Name Type Description
deltaX number

An horizontal offset from the center of the SVG element.
deltaY number

A vertical offset from the center of the SVG element.
widthFactor number

A scaling factor applied to the width of the SVG element.
heightFactor number

A scaling factor applied to the height of the SVG element.
deltaAngle number

A relative angle from the orientation of the SVG element.
Overrides:
Source:
See:

clip(x0, y0, x1, y1)

Clip the image seen by the camera.

This method will set the clipped property to true and will compute the geometry of the clipping rectangle.

Parameters:
Name Type Description
x0 number

The X coordinate of the first corner of the clipping rectangle.
y0 number

The Y coordinate of the first corner of the clipping rectangle.
x1 number

The X coordinate of the opposite corner of the clipping rectangle.
y1 number

The Y coordinate of the opposite corner of the clipping rectangle.
Source:

concealClipping()

Hide the clipping rectangle and its surroundings.

This method makes the clipping rectangle invisible and masks the elements outside this rectangle.

Source:
See:

copy(state)

Copy another camera state into the current instance.

Parameters:
Name Type Description
state module:model/CameraState.CameraState

The camera state to copy.
Overrides:
Source:

fromStorable(storable)

Copy the properties of the given object into this instance.

Parameters:
Name Type Description
storable object

A plain object with the properties to copy.
Overrides:
Source:

getCandidateReferenceElement() → {object}

Find an SVG element that can be used as an anchor for this camera.

When the SVG is modified, the reference element will be used to recalculate to location, rotation, ans scaling factor of this camera.

The reference element is selected according to these criteria:

  • It must be completely, or partially, visible in the field of this camera.
  • Its bounding box has the biggest intersection area with the viewport, and the smallest area outside the viewport.
Source:
Returns:
  • An object {element, score} with an SVG element and a number that indicates how well the element fits the viewport.
Type
object

interpolate(initialState, finalState, progress, timingFunction, relativeZoom, svgPath, reversePath)

Update this camera by interpolating between two camera states.

This method is typically used when animating a transition between two frames of a Sozi presentation.

Parameters:
Name Type Description
initialState module:model/CameraState.CameraState

The initial camera state.
finalState module:model/CameraState.CameraState

The final camera state.
progress number

The relative time already elapsed between the initial and final states (between 0 and 1).
timingFunction function

A function that maps the progress indicator to the relative distance already completed between the initial and final states (between 0 and 1).
relativeZoom number

An additional zooming factor to apply during the transition.
svgPath SVGPathElement

An SVG path to follow during the transition.
reversePath boolean

If true, follow the path in the opposite direction.
Source:

offsetFromElement(svgElement) → {object}

Compute a transformation from the bounding box of an SVG element to the current camera state.

The result has the same type as the argument of applyOffset.

Parameters:
Name Type Description
svgElement SVGElement

A source SVG element.
Overrides:
Source:
See:
Returns:
  • The translation coordinates, scaling factors, and rotation angle.
Type
object

resetClipping()

Set the clipping properties to their default values.

This method will fit the clipping rectangle to the image seen by the camera.

Overrides:
Source:

restoreAspectRatio()

Update the dimensions of the image to match the aspect ratio of the viewport.

Source:

revealClipping()

Show the clipping rectangle and its surroundings.

This method makes the clipping rectangle visible and dims the elements outside this rectangle by making the clipping mask partially transparent.

Source:
See:

rotate(angle)

Rotate this camera.

Parameters:
Name Type Description
angle number

The rotation angle, in degrees.
Source:

setAtElement(svgElement, deltaXopt, deltaYopt, widthFactoropt, heightFactoropt, deltaAngleopt)

Fit the current camera state to the given SVG element.

The default behavior is to fit the image seen by the camera to the bounding box of the SVG element. Translation, scaling and rotation may be applied.

Parameters:
Name Type Attributes Default Description
svgElement SVGElement

The target SVG element.
deltaX number <optional>
 0

An horizontal offset from the center of the SVG element.
deltaY number <optional>
 0

A vertical offset from the center of the SVG element.
widthFactor number <optional>
 1

A scaling factor applied to the width of the SVG element.
heightFactor number <optional>
 1

A scaling factor applied to the height of the SVG element.
deltaAngle number <optional>
 0

A relative angle from the orientation of the SVG element.
Overrides:
Source:
See:

toMinimalStorable() → {object}

Convert this instance to a plain object that can be stored as JSON.

The result contains only the properties needed by the Sozi player to show and animate the presentation.

Overrides:
Source:
Returns:
  • A plain object with the properties needed by the player.
Type
object

toStorable() → {object}

Convert this instance to a plain object that can be stored as JSON.

The result contains all the properties needed by the editor to restore the state of this instance.

Overrides:
Source:
Returns:
  • A plain object with the properties needed by the editor.
Type
object

translate(deltaX, deltaY)

Translate the canvas.

The given coordinates represent the displacement of the canvas, e.g. when the user uses a drag-and-drop gesture. For this reason, they are negated when computing the new coordinates of this camera.

The translation is applied after the rotation and zoom.

Parameters:
Name Type Description
deltaX number

The displacement along the X axis.
deltaY number

The displacement along the Y axis.
Source:

update()

Update the current layer of the SVG document to reflect the properties of this camera.

This method applies geometrical transformations to the current layer, and updates the clipping rectangles and mask.

Source:

zoom(factor, x, y)

Zoom by a given factor.

A zoom-in operation will shrink the width and height of the image seen by this camera. It will be automatically scaled to fit the viewport.

Parameters:
Name Type Description
factor number

The scaling factor, above 1 to zoom in, below 1 to zoom out.
x number

The X coordinate of the transformation center (this point will not move during the operation).
y number

The Y coordinate of the transformation center (this point will not move during the operation).
Source: