Options
All
  • Public
  • Public/Protected
  • All
Menu

Index

Type aliases

RaphaelBasicEventHandler

RaphaelBasicEventHandler<ThisContext, TEvent>: (this: ThisContext, event: TEvent) => any

Type parameters

Type declaration

    • (this: ThisContext, event: TEvent): any
    • A basic event handler for some common events on RaphaelElements, such as click and dblclick.

      Parameters

      • this: ThisContext
      • event: TEvent

      Returns any

RaphaelBuiltinEasingFormula

RaphaelBuiltinEasingFormula: "linear" | "<" | ">" | "<>" | "backIn" | "backOut" | "elastic" | "bounce" | "ease-in" | "easeIn" | "ease-out" | "easeOut" | "ease-in-out" | "easeInOut" | "back-in" | "back-out"

Names of the easing RaphaelBuiltinEasingFormulas that are available by default. See also the RaphaelStatic.easing_formulas object.

RaphaelConstructionOptionsArray4

RaphaelConstructionOptionsArray4: [string, number, number, ...RaphaelShapeDescriptor[]]

Array that can be passed to the Raphael() constructor. The first three arguments in the array are, in order:

  • containerID: ID of the element which is going to be a parent for drawing surface.
  • width: Width for the canvas.
  • height: Height for the canvas.

The remaining items are descriptor objects for the shapes that are created initially.

RaphaelConstructionOptionsArray5

RaphaelConstructionOptionsArray5: [number, number, number, number, ...RaphaelShapeDescriptor[]]

Array that can be passed to the Raphael() constructor. The first four arguments in the array are, in order:

  • x: x coordinate of the viewport where the canvas is created.
  • y: y coordinate of the viewport where the canvas is created.
  • width: Width for the canvas.
  • height: Height for the canvas.

The remaining items are descriptor objects for the shapes that are created initially.

RaphaelCustomAttribute

RaphaelCustomAttribute<TTechnology, TArgs>: (this: RaphaelElement<TTechnology>, ...values: TArgs) => Partial<RaphaelAttributes>

Type parameters

Type declaration

RaphaelCustomEasingFormula

RaphaelCustomEasingFormula: string & {}

Names of the easing RaphaelBuiltinEasingFormulas that may be added by the user. See also the RaphaelStatic.easing_formulas object.

RaphaelDashArrayType

RaphaelDashArrayType: "" | "-" | "." | "-." | "-.." | ". " | "- " | "--" | "- ." | "--." | "--.."

Represents the stroke dash types supported by Raphaël.

RaphaelDragOnEndHandler

RaphaelDragOnEndHandler<ThisContext>: (this: ThisContext, event: DragEvent) => any

Type parameters

  • ThisContext

Type declaration

    • (this: ThisContext, event: DragEvent): any
    • Represents the handler callback that is called when dragging ends. See RaphaelBaseElement.drag.

      Parameters

      • this: ThisContext
      • event: DragEvent

      Returns any

RaphaelDragOnMoveHandler

RaphaelDragOnMoveHandler<ThisContext>: (this: ThisContext, deltaX: number, deltaY: number, mouseX: number, mouseY: number, event: DragEvent) => any

Type parameters

  • ThisContext

Type declaration

    • (this: ThisContext, deltaX: number, deltaY: number, mouseX: number, mouseY: number, event: DragEvent): any
    • Represents the handler callback that is called when the pointer is moved while dragging. See RaphaelBaseElement.drag.

      Parameters

      • this: ThisContext
      • deltaX: number
      • deltaY: number
      • mouseX: number
      • mouseY: number
      • event: DragEvent

      Returns any

RaphaelDragOnOverHandler

RaphaelDragOnOverHandler<TTechnology, ThisContext>: (this: ThisContext, targetElement: RaphaelElement<TTechnology>) => any

Type parameters

Type declaration

RaphaelDragOnStartHandler

RaphaelDragOnStartHandler<ThisContext>: (this: ThisContext, x: number, y: number, event: DragEvent) => any

Type parameters

  • ThisContext

Type declaration

    • (this: ThisContext, x: number, y: number, event: DragEvent): any
    • Represents the handler callback that is called when dragging starts. See RaphaelBaseElement.drag.

      Parameters

      • this: ThisContext
      • x: number
      • y: number
      • event: DragEvent

      Returns any

RaphaelEasingFormula

RaphaelEasingFormula: (normalizedAnimationTime: number) => number

Type declaration

    • (normalizedAnimationTime: number): number
    • An easing formula for smoothly interpolating between two values. The formula is passed the normalized animation time and should return the relative animation position at that time.

      Parameters

      • normalizedAnimationTime: number

      Returns number

RaphaelElementPluginMethod

RaphaelElementPluginMethod<TTechnology, TArgs, TRetVal>: (this: RaphaelElement<TTechnology>, ...args: TArgs) => TRetVal

Type parameters

Type declaration

    • You can add your own method to elements, see RaphaelStatic.el for more details.

      Plugin methods may take any arbitrary number of parameters and may return any value. When possible, consider return this to allow for chaining.

      Parameters

      Returns TRetVal

RaphaelElementPluginRegistry

RaphaelElementPluginRegistry<TTechnology>: { [ P in keyof RaphaelElement<TTechnology>]: RaphaelElement<TTechnology>[P] extends (...args: any) => any ? RaphaelElementPluginMethod<TTechnology, Parameters<RaphaelElement<TTechnology>[P]>, ReturnType<RaphaelElement<TTechnology>[P]>> : never }

You can add your own method to elements. This is useful when you want to hack default functionality or want to wrap some common transformation or attributes in one method. In contrast to canvas methods, you can redefine element method at any time. Expending element methods would not affect set.

Raphael.el.red = function () {
this.attr({fill: "#f00"});
};
// then use it
paper.circle(100, 100, 20).red();
param TTechnology

Type of the technology used by this paper, either SVG or VML.

Type parameters

RaphaelFontOrigin

RaphaelFontOrigin: "baseline" | "middle"

Represents the base line of a piece of text.

RaphaelLineCapType

RaphaelLineCapType: "butt" | "square" | "round"

Represents the line cap types supported by Raphaël. See RaphaelBaseElement.attr.

RaphaelLineJoinType

RaphaelLineJoinType: "bevel" | "round" | "miter"

Represents the line join types supported by Raphaël. See RaphaelBaseElement.attr.

RaphaelOnAnimationCompleteHandler

RaphaelOnAnimationCompleteHandler<ThisContext>: (this: ThisContext) => void

Type parameters

  • ThisContext

Type declaration

    • (this: ThisContext): void
    • Callback that is invoked once an animation is complete.

      Parameters

      • this: ThisContext

      Returns void

RaphaelPaperPluginMethod

RaphaelPaperPluginMethod<TTechnology, TArgs, TRetVal>: (this: RaphaelPaper<TTechnology>, ...args: TArgs) => TRetVal

Type parameters

Type declaration

    • You can add your own method to the canvas, see RaphaelStatic.fn for more details.

      Plugin methods may take any arbitrary number of parameters and may return any value. When possible, consider return this to allow for chaining.

      Parameters

      Returns TRetVal

RaphaelPaperPluginRegistry

RaphaelPaperPluginRegistry<TTechnology, T>: { [ P in keyof T]: T[P] extends (...args: any) => any ? RaphaelPaperPluginMethod<TTechnology, Parameters<T[P]>, ReturnType<T[P]>> : RaphaelPaperPluginRegistry<TTechnology, T[P]> }

You can add your own method to the canvas. Please note that you can create your own namespaces inside the RaphaelStatic.fn object - methods will be run in the context of canvas anyway:

Raphael.fn.arrow = function (x1, y1, x2, y2, size) {
return this.path( ... );
};
// or create namespace
Raphael.fn.mystuff = {
arrow: function () {…},
star: function () {…},
// etc...
};

var paper = Raphael(10, 10, 630, 480);
// then use it
paper.arrow(10, 10, 30, 30, 5).attr({fill: "#f00"});
paper.mystuff.arrow();
paper.mystuff.star();
param TTechnology

Type of the technology used by this paper, either SVG or VML.

param T

Type of the paper or sub namespace in the paper.

Type parameters

RaphaelPathSegment

RaphaelPathSegment: ["M", number, number] | ["m", number, number] | ["L", number, number] | ["l", number, number] | ["H", number] | ["h", number] | ["V", number] | ["v", number] | ["Q", number, number, number, number] | ["q", number, number, number, number] | ["T", number, number] | ["t", number, number] | ["C", number, number, number, number, number, number] | ["c", number, number, number, number, number, number] | ["S", number, number, number, number] | ["s", number, number, number, number] | ["A", number, number, number, number, number, number, number] | ["a", number, number, number, number, number, number, number] | ["R", number, number] | ["r", number, number] | ["Z"] | ["z"]

Represents a single command of an SVG path string, such as a moveto or lineto command.

Please note that Raphaël splits path strings such as H 10 20 into two segments: ["H", 10] and ["H", 20].

RaphaelPotentialFailure

RaphaelPotentialFailure<T>: T & { error?: number }

Represents a result or return value of an operation that can fail, such as due to illegal arguments. For example, RaphaelStatic.getRGB returns an error if the string could not be parsed.

This adds an error property. When it is set to to true, the operation was not successful - such as when an input string could not be parsed or the arguments are out of range.

param T

Type of the result when the operation did not fail.

Type parameters

  • T: {}

RaphaelSetPluginMethod

RaphaelSetPluginMethod<TTechnology, TArgs, TRetVal>: (this: RaphaelSet<TTechnology>, ...args: TArgs) => TRetVal

Type parameters

Type declaration

    • (this: RaphaelSet<TTechnology>, ...args: TArgs): TRetVal
    • You can add your own method to set, see RaphaelStatic.st for more details.

      Plugin methods may take any arbitrary number of parameters and may return any value. When possible, consider return this to allow for chaining.

      Parameters

      Returns TRetVal

RaphaelSetPluginRegistry

RaphaelSetPluginRegistry<TTechnology>: { [ P in keyof RaphaelSet<TTechnology>]: RaphaelSet<TTechnology>[P] extends (...args: any) => any ? RaphaelSetPluginMethod<TTechnology, Parameters<RaphaelSet<TTechnology>[P]>, ReturnType<RaphaelSet<TTechnology>[P]>> : never }

You can add your own method to elements and sets. It is wise to add a set method for each element method you added, so you will be able to call the same method on sets too. See also {@link el}.

Raphael.el.red = function() {
this.attr({fill: "#f00"});
};

Raphael.st.red = function() {
this.forEach(function () {
this.red();
});
};

// then use it
paper.set(paper.circle(100, 100, 20), paper.circle(110, 100, 20)).red();
param TTechnology

Type of the technology used by this paper, either SVG or VML.

Type parameters

RaphaelShapeType

RaphaelShapeType: "circle" | "ellipse" | "image" | "rect" | "text" | "path" | "set"

The names of the base shapes that can be created on the canvas. Used, for example, by the Raphael() constructor.

RaphaelTechnology

RaphaelTechnology: "" | "SVG" | "VML"

Represents the technology used by Raphaël, depending on the browser support.

  • SVG: Scalable vector graphics are used.
  • VML: Vector markup language is used.
  • (empty string): Neither technology can be used. Raphaël will not work.

Vector Markup Language (VML) was an XML-based file format for two-dimensional vector graphics. It was specified in Part 4 of the Office Open XML standards ISO/IEC 29500 and ECMA-376. According to the specification, VML is a deprecated format included in Office Open XML for legacy reasons only.

RaphaelTextAnchorType

RaphaelTextAnchorType: "start" | "middle" | "end"

Represents the text anchor types supported by Raphaël. See RaphaelBaseElement.attr.

RaphaelTransformSegment

RaphaelTransformSegment: ["t", number, number] | ["s", number, number, number, number] | ["s", number, number] | ["r", number, number, number] | ["r", number] | ["m", number, number, number, number, number, number]

Represents a single transform operation:

  • t: A translation operation. Parameters are [deltaX, deltaY]
  • s: A scaling operation. Parameters are [scaleX, scaleY, originX, originY]
  • r: A rotation operation: Parameters are [angleInDegrees, originX, originY]
  • m: A general matrix transform. Parameters are [a, b, c, d, e, f], see RaphaelMatrix.

RaphaelUnwrapElement

RaphaelUnwrapElement<TTechnology, TBase>: TBase extends RaphaelSet<TTechnology> ? RaphaelElement<TTechnology> : TBase

Distinguishes between a RaphaelSet and other RaphaelElements. When an event handler is added to a set, it is called with the this context set to the elements contained in the set. Otherwise, when the handler is added to an element, it is called with the this context set to that element.

param TTechnology

Type of the technology used by this paper, either SVG or VML.

param TBase

A raphael element or set to unwrap.

returns

If the element to unwrap is a RaphaelSet, a RaphaelElement. Otherwise, the given element.

Type parameters

VMLCircleElement

VMLCircleElement: VMLElement

Dummy type alias for a VML circle element. Might be replaced with the actual API at some point.

VMLElement

VMLElement: Element

Dummy type alias for a VML element (vector markup language). Might be replaced with the actual API at some point.

Vector Markup Language (VML) was an XML-based file format for two-dimensional vector graphics. It was specified in Part 4 of the Office Open XML standards ISO/IEC 29500 and ECMA-376. According to the specification, VML is a deprecated format included in Office Open XML for legacy reasons only.

VMLEllipseElement

VMLEllipseElement: VMLElement

Dummy type alias for a VML ellipse element. Might be replaced with the actual API at some point.

VMLImageElement

VMLImageElement: VMLElement

Dummy type alias for a VML image element. Might be replaced with the actual API at some point.

VMLPathElement

VMLPathElement: VMLElement

Dummy type alias for a VML path element. Might be replaced with the actual API at some point.

VMLRectElement

VMLRectElement: VMLElement

Dummy type alias for a VML rect element. Might be replaced with the actual API at some point.

VMLTextElement

VMLTextElement: VMLElement

Dummy type alias for a VML text element. Might be replaced with the actual API at some point.

Variables

default

default: RaphaelStatic

Generated using TypeDoc