Options
All
  • Public
  • Public/Protected
  • All
Menu

Abstracts the elements that can be created by Raphaël, such as circles, rectangles, and paths.

Elements are implemented either via SVG or VML, see RaphaelTechnology.

Type Parameters

Hierarchy

Index

Properties

id: number

Unique id of the element. Especially useful when you want to listen to events of the element, because all events are fired in format <module>.<action>.<id>. Also useful for the RaphaelPaper.getById method.

The current transform matrix representing the total transform of this element.

next: null | RaphaelElement<TTechnology, RaphaelElementByTechnologyMap<SVGElement, Element>[TTechnology]>

Reference to the next element in the hierarchy.

node: TNode

Gives you a reference to the DOM object, so you can assign event handlers or just mess around.

Note: Don’t mess with it.

paper: RaphaelPaper<TTechnology>

Internal reference to paper where object drawn. Mainly for use in plugins and element extensions.

prev: null | RaphaelElement<TTechnology, RaphaelElementByTechnologyMap<SVGElement, Element>[TTechnology]>

Reference to the previous element in the hierarchy.

raphael: undefined | RaphaelStatic<"SVG" | "VML">

Internal reference to Raphaël object, in case it is not available.

type: string

The type of this element, e.g., circle or path.

Methods

  • Set the given attribute of this element to the given value.

    Type Parameters

    Parameters

    • attributeName: K

      Name of an attribute to set.

    • attributeValue: undefined | RaphaelAttributes[K]

      New value for the attribute.

    Returns RaphaelElement<TTechnology, TNode>

    this element for chaining.

  • Finds the current value of the given attribute.

    Type Parameters

    Parameters

    • attributeName: K

      Name of the attribute to read.

    Returns undefined | RaphaelReadAttributes[K]

    The value of the given attribute, or undefined if the attribute is unset or does not exist.

  • Finds the current value of the given attributes.

    Type Parameters

    Parameters

    • attributeNames: K

      Names of the attributes to read.

    Returns { [ P in string | number | symbol]: K[P] extends keyof RaphaelReadAttributes ? undefined | RaphaelReadAttributes[any[any]] : never }

    A tuple with the values of the given attribute names.

  • Writes the given attributes to this element.

    Parameters

    Returns RaphaelElement<TTechnology, TNode>

    this element for chaining.

  • data(key: string): any
  • data(key: string, value: any): RaphaelElement<TTechnology, TNode>
  • Retrieves the value associated with the given key. See also removeData.

    Parameters

    • key: string

      Key of the datum to retrieve.

    Returns any

    The data associated with the given key.

  • Adds the given value associated with the given key. See also removeData.

    Parameters

    • key: string

      Key of the datum to store.

    • value: any

      Datum to store.

    Returns RaphaelElement<TTechnology, TNode>

  • Adds the event handlers for a drag of this element.

    Type Parameters

    • MoveThisContext = RaphaelElement<TTechnology, TNode>

      Type of the this context for the onMove handler.

    • StartThisContext = RaphaelElement<TTechnology, TNode>

      Type of the this context for the onStart handler.

    • EndThisContext = RaphaelElement<TTechnology, TNode>

      Type of the this context for the onEnd handler.

    Parameters

    • onMoveHandler: RaphaelDragOnMoveHandler<MoveThisContext>

      Handler for when the pointer is moved while dragging.

    • onStartHandler: RaphaelDragOnStartHandler<StartThisContext>

      Handler for when the dragging starts.

    • onEndHandler: RaphaelDragOnEndHandler<EndThisContext>

      Handler for when the dragging ends.

    • Optional moveThisContext: MoveThisContext

      The this context with which the onMove handler is invoked.

    • Optional startThisContext: StartThisContext

      The this context with which the onStart handler is invoked.

    • Optional endThisContext: EndThisContext

      The this context with which the onEnd handler is invoked.

    Returns RaphaelElement<TTechnology, TNode>

    this element for chaining.

  • Returns a bounding box for this element.

    Parameters

    • Optional isWithoutTransform: boolean

      true if you want to have bounding box before transformations are applied. Default is false.

    Returns RaphaelAxisAlignedBoundingBox

    The smallest bounding box that contains this element.

  • Return a set of elements that create a glow-like effect around this element.

    Note: Glow is not connected to the element. If you change element attributes it will not adjust itself.

    Parameters

    Returns RaphaelSet<TTechnology>

    A set of elements that produce the given glow effect.

  • hover<HoverInThisContext, HoverOutThisContext>(onHoverInHandler: RaphaelBasicEventHandler<HoverInThisContext, MouseEvent>, onHoverOutHandler: RaphaelBasicEventHandler<HoverOutThisContext, MouseEvent>, hoverInThisContext?: HoverInThisContext, hoverOutThisContext?: HoverOutThisContext): RaphaelElement<TTechnology, TNode>
  • Adds event handlers for the hover events to this element.

    Type Parameters

    • HoverInThisContext = RaphaelElement<TTechnology, TNode>

      Type of the this context for the onHoverIn handler.

    • HoverOutThisContext = RaphaelElement<TTechnology, TNode>

      Type of the this context for the onHoverOut handler.

    Parameters

    • onHoverInHandler: RaphaelBasicEventHandler<HoverInThisContext, MouseEvent>

      Handler for when the pointer enters this element.

    • onHoverOutHandler: RaphaelBasicEventHandler<HoverOutThisContext, MouseEvent>

      Handler for when the pointer leaves this element.

    • Optional hoverInThisContext: HoverInThisContext

      The this context with which the onHoverIn handler is invoked.

    • Optional hoverOutThisContext: HoverOutThisContext

      The this context with which the onHoverOut handler is invoked.

    Returns RaphaelElement<TTechnology, TNode>

    this element for chaining.

  • isPointInside(x: number, y: number): boolean
  • Determine if given point is inside this element’s shape

    Parameters

    • x: number

      x coordinate of the point

    • y: number

      y coordinate of the point

    Returns boolean

    true if point inside the shape

  • Stops an animation of this element with the ability to resume it later on.

    Parameters

    • Optional anim: RaphaelAnimation

      Animation to pause. If not given, pauses all current animations.

    Returns RaphaelElement<TTechnology, TNode>

    this element for chaining.

  • remove(): void
  • Removes the value associated with this element by the given key. If the key is not provided, removes all the data of this element.

    Parameters

    • Optional key: string

      Key of the datum to remove.

    Returns RaphaelElement<TTechnology, TNode>

    this element for chaining.

  • rotate(degrees: number, centerX: number, centerY: number): RaphaelElement<TTechnology, TNode>
  • rotate(degrees: number): RaphaelElement<TTechnology, TNode>
  • Rotates this element by the given angle around the given point.

    Parameters

    • degrees: number

      Angle in degrees by which to rotate.

    • centerX: number

      Horizontal coordinate of the center of rotation.

    • centerY: number

      Vertical coordinate of the center of rotation.

    Returns RaphaelElement<TTechnology, TNode>

    this element for chaining.

  • Rotates this element by the given angle around the center of this shape.

    Parameters

    • degrees: number

      Angle in degrees by which to rotate.

    Returns RaphaelElement<TTechnology, TNode>

    this element for chaining.

  • scale(scaleFactorX: number, scaleFactorY: number, centerX: number, centerY: number): RaphaelElement<TTechnology, TNode>
  • scale(scaleFactorX: number, scaleFactorY?: number): RaphaelElement<TTechnology, TNode>
  • Scales this element by the given scale factor, relative to the given center.

    Parameters

    • scaleFactorX: number

      Horizontal part of the scale factor.

    • scaleFactorY: number

      Vertical part of the scale factor.

    • centerX: number

      Horizontal coordinate of the center of the scaling operation.

    • centerY: number

      Vertical coordinate of the center of the scaling operation.

    Returns RaphaelElement<TTechnology, TNode>

    this element for chaining.

  • Scales this element by the given scale factor. The center of this shape is used as the center of the scaling operation.

    Parameters

    • scaleFactorX: number

      Horizontal part of the scale factor.

    • Optional scaleFactorY: number

      Vertical part of the scale factor. If not given, defaults to scaleFactorX.

    Returns RaphaelElement<TTechnology, TNode>

    this element for chaining.

  • Sets the status of animation of the element in milliseconds. Similar to status method.

    Parameters

    • animation: RaphaelAnimation

      Animation for which to set the status.

    • value: number

      Number of milliseconds from the beginning of the animation.

    Returns RaphaelElement<TTechnology, TNode>

    this element for chaining.

  • Gets the status (normalized animation time) of the current animations of this element.

    Returns RaphaelAnimationStatus[]

    The status of all animations currently playing.

  • Gets the status of the given animation of this element.

    Parameters

    Returns number

    The current value (normalized animation time) of the given animation.

  • Sets the status of the given animation of this element to the given value. This will cause the animation to jump to the given position.

    Parameters

    • animation: RaphaelAnimation

      Animation object for which to set the status.

    • value: number

      New value (normalized animation time) for the animation, between 0 and 1.

    Returns RaphaelElement<TTechnology, TNode>

    this element for chaining.

  • Stops all or the the given animation of this element.

    Parameters

    • Optional animation: RaphaelAnimation

      An animation to stop. If not given, stops all animations currently playing.

    Returns RaphaelElement<TTechnology, TNode>

    this element for chaining.

  • Moves this element so it is the furthest from the viewer’s eyes, behind other elements.

    Returns RaphaelElement<TTechnology, TNode>

    this element for chaining.

  • Moves this element so it is the closest to the viewer’s eyes, on top of other elements.

    Returns RaphaelElement<TTechnology, TNode>

    this element for chaining.

  • transform(): string
  • transform(transformString: string): RaphaelElement<TTechnology, TNode>
  • Returns the current transformation of this element. This transformation is separate to other attributes, i.e. translation does not change x or y of the rectangle. The format of transformation string is similar to the path string syntax:

    "t100,100r30,100,100s2,2,100,100r45s1.5"
    

    Each letter is a command. There are four commands:

    • t is for translate
    • r is for rotate,
    • s is for scale
    • m is for matrix.

    So, the example line above could be read like

    translate by 100, 100;
    rotate 30° around 100, 100;
    scale twice around 100, 100;
    rotate 45° around centre;
    scale 1.5 times relative to centre

    As you can see rotate and scale commands have origin coordinates as optional parameters, the default is the centre point of the element. Matrix accepts six parameters.

    // to get current value call it without parameters
    console.log(el.transform());

    Returns string

    The current transformation of this element.

  • Adds transformation to this element which is separate to other attributes, i.e. translation does not change x or y of the rectangle. The format of transformation string is similar to the path string syntax:

    "t100,100r30,100,100s2,2,100,100r45s1.5"
    

    Each letter is a command. There are four commands:

    • t is for translate
    • r is for rotate,
    • s is for scale
    • m is for matrix.

    So, the example line above could be read like

    translate by 100, 100;
    rotate 30° around 100, 100;
    scale twice around 100, 100;
    rotate 45° around centre;
    scale 1.5 times relative to centre

    As you can see rotate and scale commands have origin coordinates as optional parameters, the default is the centre point of the element. Matrix accepts six parameters.

    var el = paper.rect(10, 20, 300, 200);

    // translate 100, 100, rotate 45°, translate -100, 0
    el.transform("t100,100r45t-100,0");

    // if you want you can append or prepend transformations
    el.transform("...t50,50");
    el.transform("s2...");

    // or even wrap
    el.transform("t50,50...t-50-50");

    // to reset transformation call method with empty string
    el.transform("");

    Parameters

    • transformString: string

    Returns RaphaelElement<TTechnology, TNode>

    this element for chaining.

  • translate(deltaX: number, deltaY: number): RaphaelElement<TTechnology, TNode>
  • Translates this element by the given amount.

    Parameters

    • deltaX: number

      Amount by which to translate in the horizontal direction.

    • deltaY: number

      Amount by which to translate in the vertical direction.

    Returns RaphaelElement<TTechnology, TNode>

    this element for chaining.

Generated using TypeDoc