[]
DEMOS DOCS API
DOWNLOAD NEED HELP? BOOK DEMO
(Showing Draft Content)

IRenderEngine Interface

IRenderEngine Interface

Represents a rendering engine that performs the basic drawing routines.

Heirarchy

  • IRenderEngine

Implemented by

Properties

Methods

Properties

cssPriority

cssPriority: boolean

Gets or sets the value that indicates css priority. By default, it's true and the specified css class has a priority over current engine's properties like fill or stroke.

element

element: Element

Gets the rendered element.

fill

fill: string

Gets or sets the color used to fill the element.

fontFamily

fontFamily: string

Gets or sets the font family for the text output.

fontSize

fontSize: string

Gets or sets the font size for the text output.

stroke

stroke: string

Gets or sets the color used to outline the element.

strokeWidth

strokeWidth: number

Gets or sets the thickness of the outline.

textFill

textFill: string

Gets or sets the text color.

Methods

addClipRect

  • addClipRect(clipRect: Rect, id: string): any

  • Adds a clipping rectangle to the context.

    Parameters

    • clipRect: Rect

      The clipping rectangle.

    • id: string

      The ID of the clipping rectangle.

    Returns any

beginRender

  • beginRender(): any

  • Clears the viewport and starts the rendering cycle.

    Returns any

drawDonutSegment

  • drawDonutSegment(cx: number, cy: number, radius: number, innerRadius: number, startAngle: number, sweepAngle: number, className?: string, style?: any, clipPath?: string): any

  • Draws a doughnut segment.

    Parameters

    • cx: number

      X coordinate of the segment center.

    • cy: number

      Y coordinate of the segment center.

    • radius: number

      Outer radius of the segment.

    • innerRadius: number

      Inner radius of the segment.

    • startAngle: number

      Start angle of the segment, in degrees.

    • sweepAngle: number

      Sweep angle of the segment, in degrees clockwise.

    • Optional className: string

      Class name to be applied to the element.

    • Optional style: any

      Style object to be applied to the element.

    • Optional clipPath: string

      Id of the path to use as a clipping path.

    Returns any

drawEllipse

  • drawEllipse(cx: number, cy: number, rx: number, ry: number, className?: string, style?: any): any

  • Draws an ellipse.

    Parameters

    • cx: number

      X coordinate of the ellipse's center.

    • cy: number

      Y coordinate of the ellipse's center.

    • rx: number

      X radius (half of the ellipse's width).

    • ry: number

      Y radius (half of the ellipse's height).

    • Optional className: string

      Class name to be applied to the element.

    • Optional style: any

      Style object to be applied to the element.

    Returns any

drawImage

  • drawImage(href: string, x: number, y: number, w: number, h: number): any

  • Draws an image.

    Parameters

    • href: string

      Url of the image to draw.

    • x: number

      Left coordinate of the image's bounding rectangle.

    • y: number

      Bottom coordinate of the image's bounding rectangle.

    • w: number

      Image width.

    • h: number

      Image height.

    Returns any

drawLine

  • drawLine(x1: number, y1: number, x2: number, y2: number, className?: string, style?: any): any

  • Draws a line.

    Parameters

    • x1: number

      X coordinate of the first point.

    • y1: number

      Y coordinate of the first point.

    • x2: number

      X coordinate of the second point.

    • y2: number

      Y coordinate of the second point.

    • Optional className: string

      Class name to be applied to the element.

    • Optional style: any

      Style object to be applied to the element.

    Returns any

drawLines

  • drawLines(xs: number[], ys: number[], className?: string, style?: any, clipPath?: string, num?: number): any

  • Draws a series of lines.

    Parameters

    • xs: number[]

      Array of X coordinates.

    • ys: number[]

      Array of Y coordinates.

    • Optional className: string

      Class name to be applied to the element.

    • Optional style: any

      Style object to be applied to the element.

    • Optional clipPath: string

      Id of the path to use as a clipping path.

    • Optional num: number

    Returns any

drawPieSegment

  • drawPieSegment(cx: number, cy: number, radius: number, startAngle: number, sweepAngle: number, className?: string, style?: any, clipPath?: string): any

  • Draws a pie segment.

    Parameters

    • cx: number

      X coordinate of the segment center.

    • cy: number

      Y coordinate of the segment center.

    • radius: number

      Radius of the segment.

    • startAngle: number

      Start angle of the segment, in degrees.

    • sweepAngle: number

      Sweep angle of the segment, in degrees clockwise.

    • Optional className: string

      Class name to be applied to the element.

    • Optional style: any

      Style object to be applied to the element.

    • Optional clipPath: string

      Id of the path to use as a clipping path.

    Returns any

drawPolygon

  • drawPolygon(xs: number[], ys: number[], className?: string, style?: any, clipPath?: string): any

  • Draws a polygon.

    Parameters

    • xs: number[]

      Array of X coordinates.

    • ys: number[]

      Array of Y coordinates.

    • Optional className: string

      Class name to be applied to the element.

    • Optional style: any

      Style object to be applied to the element.

    • Optional clipPath: string

      Id of the path to use as a clipping path.

    Returns any

drawRect

  • drawRect(x: number, y: number, w: number, h: number, className?: string, style?: any, clipPath?: string): any

  • Draws a rectangle.

    Parameters

    • x: number

      Left of the rectangle.

    • y: number

      Bottom of the rectangle.

    • w: number

      Width of the rectangle.

    • h: number

      Height of the rectangle.

    • Optional className: string

      Class name to be applied to the element.

    • Optional style: any

      Style object to be applied to the element.

    • Optional clipPath: string

      Id of the path to use as a clipping path.

    Returns any

drawSplines

  • drawSplines(xs: number[], ys: number[], className?: string, style?: any, clipPath?: string, num?: number): any

  • Draws a series of splines (smooth path).

    Parameters

    • xs: number[]

      Array of X coordinates.

    • ys: number[]

      Array of Y coordinates.

    • Optional className: string

      Class name to be applied to the element.

    • Optional style: any

      Style object to be applied to the element.

    • Optional clipPath: string

      Id of the path to use as a clipping path.

    • Optional num: number

    Returns any

drawString

  • drawString(s: string, pt: Point, className?: string, style?: any): any

  • Draws a string.

    Parameters

    • s: string

      String to be drawn.

    • pt: Point

      Reference point for the string.

    • Optional className: string

      Class name to be applied to the element.

    • Optional style: any

      Style object to be applied to the element.

    Returns any

drawStringRotated

  • drawStringRotated(s: string, pt: Point, center: Point, angle: number, className?: string, style?: any): any

  • Draws a rotated string.

    Parameters

    • s: string

      String to be drawn.

    • pt: Point

      Reference point for rendering the string.

    • center: Point

      Reference point for rotating the string.

    • angle: number

      Rotation angle, in degrees, clockwise.

    • Optional className: string

      Class name to be applied to the element.

    • Optional style: any

      Style object to be applied to the element.

    Returns any

endGroup

  • endGroup(): any

  • Ends a group.

    Returns any

endRender

  • endRender(): any

  • Finishes the rendering cycle.

    Returns any

measureString

  • measureString(s: string, className?: string, groupName?: string, style?: any): Size

  • Measures a string.

    Parameters

    • s: string

      String to be measured.

    • Optional className: string

      Class name to use when measuring the string.

    • Optional groupName: string

      Name of the group to use when measuring the string.

    • Optional style: any

      Style object to use when measuring the string.

    Returns Size

setViewportSize

  • setViewportSize(w: number, h: number): any

  • Sets the size of the viewport.

    Parameters

    • w: number

      Viewport width.

    • h: number

      Viewport height.

    Returns any

startGroup

  • startGroup(className?: string, clipPath?: string, createTransform?: boolean): any

  • Starts a group.

    Parameters

    • Optional className: string

      Class name to apply to the new group.

    • Optional clipPath: string

      Id of the path to use as a clipping path.

    • Optional createTransform: boolean

      Whether to create a new transform for the group.

    Returns any