@antv/g

  • Version 6.3.1
  • Published
  • 3.09 MB
  • 5 dependencies
  • MIT license

Install

npm i @antv/g
yarn add @antv/g
pnpm add @antv/g

Overview

A core module for rendering engine implements DOM API.

Index

Variables

variable defaultDotPatternCfg

const defaultDotPatternCfg: {
size: number;
padding: number;
backgroundColor: string;
opacity: number;
fill: string;
fillOpacity: number;
stroke: string;
strokeOpacity: number;
lineWidth: number;
isStagger: boolean;
};

    variable defaultLinePatternCfg

    const defaultLinePatternCfg: {
    spacing: number;
    opacity: number;
    backgroundColor: string;
    backgroundOpacity: number;
    strokeOpacity: number;
    stroke: string;
    lineWidth: number;
    };
    • linePattern 的 默认配置

    variable defaultSquarePatternCfg

    const defaultSquarePatternCfg: {
    size: number;
    padding: number;
    isStagger: boolean;
    backgroundColor: string;
    opacity: number;
    fill: string;
    fillOpacity: number;
    stroke: string;
    lineWidth: number;
    };
    • squarePattern 的 默认配置

    variable EasingFunctions

    const EasingFunctions: Record<EasingFunctionType, TypeEasingFunction>;

      Functions

      function compareAnimations

      compareAnimations: (
      leftAnimation: IAnimation,
      rightAnimation: IAnimation
      ) => number;

        function dots

        dots: (cfg?: DotPatternCfg) => Rect;

          function lines

          lines: (cfg?: LinePatternCfg) => Rect;
          • 创建 linePattern

          function makeTiming

          makeTiming: (
          timingInput: KeyframeEffectOptions,
          forGroup: boolean
          ) => AnimationEffectTiming;

            function normalizeKeyframes

            normalizeKeyframes: (
            effectInput: Keyframe[] | PropertyIndexedKeyframes | null,
            timing?: AnimationEffectTiming
            ) => ComputedKeyframe[];

              function normalizeTimingInput

              normalizeTimingInput: (
              timingInput: KeyframeEffectOptions | number | undefined,
              forGroup: boolean
              ) => AnimationEffectTiming;

                function numericTimingToObject

                numericTimingToObject: (
                timingInput: KeyframeEffectOptions | number
                ) => KeyframeEffectOptions;

                  function squares

                  squares: (cfg?: SquarePatternCfg) => Rect;
                  • 创建 squarePattern

                  Classes

                  class AdvancedCamera

                  class AdvancedCamera extends Camera {}
                  • Provides camera action & animation.

                  method cancelLandmarkAnimation

                  cancelLandmarkAnimation: () => void;

                    method createLandmark

                    createLandmark: (
                    name: string,
                    params?: Partial<{
                    position: vec3 | vec2;
                    focalPoint: vec3 | vec2;
                    zoom: number;
                    roll: number;
                    }>
                    ) => Landmark;

                      method dolly

                      dolly: (value: number) => this;
                      • 沿 n 轴移动,当距离视点远时移动速度较快,离视点越近速度越慢

                      method gotoLandmark

                      gotoLandmark: (
                      name: string | Landmark,
                      options?:
                      | number
                      | Partial<{
                      easing: string;
                      easingFunction: TypeEasingFunction;
                      duration: number;
                      onframe: (t: number) => void;
                      onfinish: () => void;
                      }>
                      ) => void;

                        method pan

                        pan: (tx: number, ty: number) => this;
                        • 沿水平(right) & 垂直(up)平移相机

                        method rotate

                        rotate: (azimuth: number, elevation: number, roll: number) => this;
                        • Changes the azimuth and elevation with respect to the current camera axes

                          Parameter azimuth

                          the relative azimuth

                          Parameter elevation

                          the relative elevation

                          Parameter roll

                          the relative roll

                        class Animation

                        class Animation implements IAnimation {}
                        • See Also

                          • https://developer.mozilla.org/en-US/docs/Web/API/Animation/Animation

                        constructor

                        constructor(effect: KeyframeEffect, timeline: AnimationTimeline);

                          property currentTime

                          currentTime: number;

                            property effect

                            effect: KeyframeEffect;
                            • See Also

                              • https://developer.mozilla.org/en-US/docs/Web/API/Animation/effect

                            property finished

                            readonly finished: Promise<any>;
                            • Example 1

                              Promise.all( elem.getAnimations().map( function(animation) { return animation.finished } ) ).then( function() { return elem.remove(); } );

                              See Also

                              • https://developer.mozilla.org/en-US/docs/Web/API/Animation/finished

                            property id

                            id: string;
                            • See Also

                              • https://developer.mozilla.org/en-US/docs/Web/API/Animation/id

                            property oncancel

                            oncancel: (this: Animation, ev: AnimationPlaybackEvent) => any;
                            • See Also

                              • https://developer.mozilla.org/en-US/docs/Web/API/Animation/oncancel

                            property onfinish

                            onfinish: (this: Animation, ev: AnimationPlaybackEvent) => any;
                            • See Also

                              • https://developer.mozilla.org/en-US/docs/Web/API/Animation/onfinish

                            property onframe

                            onframe: (this: Animation, ev: AnimationPlaybackEvent) => any;
                            • get called after each frame when running

                            property onremove

                            onremove: (this: Animation, ev: Event) => any;

                              property pending

                              readonly pending: boolean;
                              • See Also

                                • https://developer.mozilla.org/en-US/docs/Web/API/Animation/pending

                              property playbackRate

                              playbackRate: number;

                                property playState

                                readonly playState: AnimationPlayState;

                                  property ready

                                  readonly ready: Promise<any>;
                                  • Example 1

                                    animation.pause(); animation.ready.then(function() { // Displays 'running' alert(animation.playState); }); animation.play();

                                    See Also

                                    • https://developer.mozilla.org/en-US/docs/Web/API/Animation/ready

                                  property startTime

                                  startTime: number;

                                    property timeline

                                    timeline: AnimationTimeline;
                                    • See Also

                                      • https://developer.mozilla.org/en-US/docs/Web/API/Animation/timeline

                                    property totalDuration

                                    readonly totalDuration: number;

                                      method addEventListener

                                      addEventListener: {
                                      <K extends keyof AnimationEventMap>(
                                      type: K,
                                      listener: (this: Animation, ev: AnimationEventMap[K]) => any,
                                      options?: boolean | AddEventListenerOptions
                                      ): void;
                                      (
                                      type: string,
                                      listener: EventListenerOrEventListenerObject,
                                      options?: boolean | AddEventListenerOptions
                                      ): void;
                                      };

                                        method cancel

                                        cancel: () => void;

                                          method commitStyles

                                          commitStyles: () => void;

                                            method dispatchEvent

                                            dispatchEvent: (event: Event) => boolean;

                                              method finish

                                              finish: () => void;

                                                method markTarget

                                                markTarget: () => void;

                                                  method pause

                                                  pause: () => void;

                                                    method persist

                                                    persist: () => void;

                                                      method play

                                                      play: () => void;

                                                        method removeEventListener

                                                        removeEventListener: {
                                                        <K extends keyof AnimationEventMap>(
                                                        type: K,
                                                        listener: (this: Animation, ev: AnimationEventMap[K]) => any,
                                                        options?: boolean | EventListenerOptions
                                                        ): void;
                                                        (
                                                        type: string,
                                                        listener: EventListenerOrEventListenerObject,
                                                        options?: boolean | EventListenerOptions
                                                        ): void;
                                                        };

                                                          method reverse

                                                          reverse: () => void;

                                                            method targetAnimations

                                                            targetAnimations: () => IAnimation[];

                                                              method tick

                                                              tick: (timelineTime: number, isAnimationFrame: boolean) => void;

                                                                method unmarkTarget

                                                                unmarkTarget: () => void;

                                                                  method updatePlaybackRate

                                                                  updatePlaybackRate: (playbackRate: number) => void;
                                                                  • See Also

                                                                    • https://developer.mozilla.org/en-US/docs/Web/API/Animation/updatePlaybackRate

                                                                  method updatePromises

                                                                  updatePromises: () => false | Promise<any>;
                                                                  • state machine, resolve/reject ready/finished Promise according to current state

                                                                  class AnimationEvent

                                                                  class AnimationEvent extends FederatedEvent implements AnimationPlaybackEvent {}
                                                                  • See Also

                                                                    • https://developer.mozilla.org/en-US/docs/Web/API/AnimationPlaybackEvent

                                                                  constructor

                                                                  constructor(
                                                                  manager: any,
                                                                  target: Animation,
                                                                  currentTime: number,
                                                                  timelineTime: number
                                                                  );

                                                                    property currentTime

                                                                    currentTime: number;

                                                                      property timelineTime

                                                                      timelineTime: number;

                                                                        class AnimationTimeline

                                                                        class AnimationTimeline implements IAnimationTimeline {}
                                                                        • See Also

                                                                          • https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/web-animations-js/index.d.ts

                                                                        constructor

                                                                        constructor(document: IDocument);

                                                                          property animations

                                                                          animations: Animation[];
                                                                          • all active animations

                                                                          property animationsWithPromises

                                                                          animationsWithPromises: Animation[];

                                                                            property currentTime

                                                                            currentTime: number;

                                                                              method applyDirtiedAnimation

                                                                              applyDirtiedAnimation: (animation: Animation) => void;

                                                                                method applyPendingEffects

                                                                                applyPendingEffects: () => void;

                                                                                  method destroy

                                                                                  destroy: () => void;

                                                                                    method getAnimations

                                                                                    getAnimations: () => Animation[];

                                                                                      method isTicking

                                                                                      isTicking: () => boolean;

                                                                                        method play

                                                                                        play: (
                                                                                        target: IElement,
                                                                                        keyframes: Keyframe[] | PropertyIndexedKeyframes | null,
                                                                                        options?: number | KeyframeAnimationOptions
                                                                                        ) => Animation;

                                                                                          method restart

                                                                                          restart: () => boolean;

                                                                                            method tick

                                                                                            tick: (
                                                                                            t: number,
                                                                                            isAnimationFrame: boolean,
                                                                                            updatingAnimations: IAnimation[]
                                                                                            ) => Animation[][];

                                                                                              class Arrow

                                                                                              class Arrow extends CustomElement<ArrowStyleProps> {}
                                                                                              • support 3 types of arrow line: 1. Line 2. Polyline 3. Path

                                                                                                support 2 types of arrow head: 1. default(Path) 2. custom

                                                                                              constructor

                                                                                              constructor(config: DisplayObjectConfig<ArrowStyleProps>);

                                                                                                property PARSED_STYLE_LIST

                                                                                                static PARSED_STYLE_LIST: Set<string>;

                                                                                                  property tag

                                                                                                  static tag: string;

                                                                                                    method attributeChangedCallback

                                                                                                    attributeChangedCallback: <Key extends keyof ArrowStyleProps>(
                                                                                                    name: Key,
                                                                                                    oldValue: ArrowStyleProps[Key],
                                                                                                    newValue: ArrowStyleProps[Key]
                                                                                                    ) => void;

                                                                                                      method getBody

                                                                                                      getBody: () => Line | Path | Polyline;

                                                                                                        method getEndHead

                                                                                                        getEndHead: () => DisplayObject<any, any>;

                                                                                                          method getStartHead

                                                                                                          getStartHead: () => DisplayObject<any, any>;

                                                                                                            class ImageExporter

                                                                                                            class ImageExporter {}

                                                                                                              constructor

                                                                                                              constructor(options: ImageExporterOptions);

                                                                                                                method downloadImage

                                                                                                                downloadImage: (options: DownloadImageOptions) => void;

                                                                                                                  method toCanvas

                                                                                                                  toCanvas: (options?: Partial<CanvasOptions>) => Promise<HTMLCanvasElement>;
                                                                                                                  • return a HTMLCanvasElement which you can call toDataURL later

                                                                                                                    Example 1

                                                                                                                    const canvas = await exporter.toCanvas(); canvas.toDataURL(); // data:

                                                                                                                  method toSVGDataURL

                                                                                                                  toSVGDataURL: () => Promise<string>;

                                                                                                                    class KeyframeEffect

                                                                                                                    class KeyframeEffect implements IKeyframeEffect {}
                                                                                                                    • Example 1

                                                                                                                      const circleDownKeyframes = new KeyframeEffect( circle, // element to animate [ { transform: 'translateY(0)' }, // keyframe { transform: 'translateY(100)' } // keyframe ], { duration: 3000, fill: 'forwards' } // keyframe options );

                                                                                                                      See Also

                                                                                                                      • https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect

                                                                                                                    constructor

                                                                                                                    constructor(
                                                                                                                    target: any,
                                                                                                                    effectInput: Keyframe[] | PropertyIndexedKeyframes,
                                                                                                                    timingInput?: number | KeyframeEffectOptions
                                                                                                                    );

                                                                                                                      property animation

                                                                                                                      animation: Animation;

                                                                                                                        property composite

                                                                                                                        composite: CompositeOperation;

                                                                                                                          property iterationComposite

                                                                                                                          iterationComposite: IterationCompositeOperation;

                                                                                                                            property normalizedKeyframes

                                                                                                                            normalizedKeyframes: ComputedKeyframe[];

                                                                                                                              property target

                                                                                                                              target: any;

                                                                                                                                property timing

                                                                                                                                timing: AnimationEffectTiming;

                                                                                                                                  method applyInterpolations

                                                                                                                                  applyInterpolations: () => void;

                                                                                                                                    method getComputedTiming

                                                                                                                                    getComputedTiming: () => ComputedEffectTiming;
                                                                                                                                    • See Also

                                                                                                                                      • https://developer.mozilla.org/en-US/docs/Web/API/AnimationEffect/getComputedTiming

                                                                                                                                    method getKeyframes

                                                                                                                                    getKeyframes: () => ComputedKeyframe[];

                                                                                                                                      method getTiming

                                                                                                                                      getTiming: () => EffectTiming;
                                                                                                                                      • See Also

                                                                                                                                        • https://developer.mozilla.org/en-US/docs/Web/API/AnimationEffect/getTiming

                                                                                                                                      method setKeyframes

                                                                                                                                      setKeyframes: (keyframes: Keyframe[] | PropertyIndexedKeyframes | null) => void;

                                                                                                                                        method update

                                                                                                                                        update: (localTime: number | null) => boolean;

                                                                                                                                          method updateTiming

                                                                                                                                          updateTiming: (timing?: OptionalEffectTiming) => void;
                                                                                                                                          • See Also

                                                                                                                                            • https://developer.mozilla.org/en-US/docs/Web/API/AnimationEffect/updateTiming

                                                                                                                                          class Sector

                                                                                                                                          class Sector extends Path {}

                                                                                                                                            constructor

                                                                                                                                            constructor(config: any);

                                                                                                                                              property PARSED_STYLE_LIST

                                                                                                                                              static PARSED_STYLE_LIST: Set<string>;

                                                                                                                                                method setAttribute

                                                                                                                                                setAttribute: (name: any, value: any, force?: boolean) => void;

                                                                                                                                                  Interfaces

                                                                                                                                                  interface CanvasOptions

                                                                                                                                                  interface CanvasOptions {}

                                                                                                                                                    property afterDrawImage

                                                                                                                                                    afterDrawImage: (context: CanvasRenderingContext2D) => void;

                                                                                                                                                      property beforeDrawImage

                                                                                                                                                      beforeDrawImage: (context: CanvasRenderingContext2D) => void;

                                                                                                                                                        property clippingRegion

                                                                                                                                                        clippingRegion: Rectangle;

                                                                                                                                                          property ignoreElements

                                                                                                                                                          ignoreElements: (element: Element) => boolean;

                                                                                                                                                            interface DownloadImageOptions

                                                                                                                                                            interface DownloadImageOptions {}

                                                                                                                                                              property dataURL

                                                                                                                                                              dataURL: string;

                                                                                                                                                                property name

                                                                                                                                                                name?: string;

                                                                                                                                                                  interface ImageExporterOptions

                                                                                                                                                                  interface ImageExporterOptions {}

                                                                                                                                                                    property canvas

                                                                                                                                                                    canvas: Canvas;

                                                                                                                                                                      property defaultFilename

                                                                                                                                                                      defaultFilename?: string;

                                                                                                                                                                        Package Files (15)

                                                                                                                                                                        Dependencies (5)

                                                                                                                                                                        Dev Dependencies (0)

                                                                                                                                                                        No dev dependencies.

                                                                                                                                                                        Peer Dependencies (0)

                                                                                                                                                                        No peer dependencies.

                                                                                                                                                                        Badge

                                                                                                                                                                        To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                                                                                                                        You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@antv/g.

                                                                                                                                                                        • Markdown
                                                                                                                                                                          [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@antv/g)
                                                                                                                                                                        • HTML
                                                                                                                                                                          <a href="https://www.jsdocs.io/package/@antv/g"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>