x4js - v2.2.49
    Preparing search index...

    Class SvgPath

    Represents an SVG path element, providing methods for constructing and manipulating SVG paths. It extends SvgItem to inherit common SVG element functionalities.

    Hierarchy (View Summary)

    Index
    _dom: SVGElement
    • Set the shape rendering attribute to control anti-aliasing for shapes.

      When enabled, the attribute is set to "auto" to allow smoothing/anti-aliasing. When disabled, the attribute is set to "crispEdges" to favor pixel-aligned, non-anti-aliased rendering.

      Parameters

      • set: boolean

        True to enable anti-aliasing ("auto"), false to disable ("crispEdges").

      Returns SvgPath

      the current instance to allow chaining).

    • draw an arc Draws an elliptical arc from the current point to a new point.

      Parameters

      • x: number

        The x-coordinate of the center of the ellipse.

      • y: number

        The y-coordinate of the center of the ellipse.

      • r: number

        The radius of the arc.

      • start: number

        The start angle of the arc in degrees (0 is right, 90 is down).

      • end: number

        The end angle of the arc in degrees.

      • clockwise: boolean = true

        If true, the arc is drawn clockwise; otherwise, counter-clockwise. Defaults to true.

      Returns this

      this

    • Closes the current subpath by drawing a straight line from the current position to the initial point of the current subpath.

      Returns this

      The current SvgPath instance for chaining.

    • Draws a cubic Bézier curve from the current point to (x3, y3) using (x1, y1) as the control point at the beginning of the curve and (x2, y2) as the control point at the end of the curve.

      Parameters

      • x1: number

        The x-coordinate of the first control point.

      • y1: number

        The y-coordinate of the first control point.

      • x2: number

        The x-coordinate of the second control point.

      • y2: number

        The y-coordinate of the second control point.

      • x3: number

        The x-coordinate of the end point of the curve.

      • y3: number

        The y-coordinate of the end point of the curve.

      Returns SvgPath

      The current SvgPath instance for chaining.

    • Draws a straight line from the current position to the specified coordinates.

      Parameters

      • x: number

        The x-coordinate of the end point.

      • y: number

        The y-coordinate of the end point.

      Returns this

      this

    • Moves the current drawing position to the specified coordinates without drawing a line. This is typically the first command in a path.

      Parameters

      • x: number

        The x-coordinate to move to.

      • y: number

        The y-coordinate to move to.

      Returns this

      this

    • define a new attribute

      Parameters

      • name: string

        attibute name

      • value: string

        attribute value

      Returns this

      this

    • change one style value

      Type Parameters

      • K extends keyof CSSStyleDeclaration

      Parameters

      • name: K
      • value: string | number

      Returns this

    • change the stroke color

      Parameters

      • color: string
      • Optionalwidth: number

      Returns this

    • change the stroke opacity attribute on the element.

      Parameters

      • opacity: number

        Opacity value where 0 is fully transparent and 1 is fully opaque.

      Returns SvgPath

      The current instance to allow method chaining.