5.18.23

Patch Changes

• Updated dependencies [ce11b24]
  • @antv/g-lite@1.2.20
  • @antv/g-camera-api@1.2.21
  • @antv/g-dom-mutation-observer-api@1.2.20
  • @antv/g-web-animations-api@1.2.21

5.18.22

Patch Changes

• Updated dependencies [d090082]
  • @antv/g-web-animations-api@1.2.20

You can also register custom easing function via EasingFunctions like this:

import { EasingFunctions } from '@antv/g';

// Register easing function.
EasingFunctions['my-easing'] = (t: number) => t;

circle.animate([{ opacity: 0 }, { opacity: 1 }], {
  duration: 500,
  easing: 'my-easing', // Use it by name.
});

You can find more easing functions on: https://easings.net/

5.18.21

5.18.21

Patch Changes

• Updated dependencies [6492cdf]
  • @antv/g-lite@1.2.19
  • @antv/g-camera-api@1.2.20
  • @antv/g-dom-mutation-observer-api@1.2.19
  • @antv/g-web-animations-api@1.2.19

• Path should not downgrade to line when isBillboard enabled and fill should be used correctly.
• willReadFrequently: true should be passed in when creating offscreen canvas so that the browser won't throw warning.

5.18.20

Patch Changes

• 4fdee19: Keep aspect ratio in image.

OnlineExample

When keepAspectRatio enabled, either width or height can be omitted and the missing one can be inferred according to raw image's aspect. In the following example, height will be calculated automatically after the Image being loaded.

new Image({
  style: {
    src: 'http://',
    keepAspectRatio: true,
    width: 100
  }
})

But since the image loading process is in an async way, if we try to get bounds immediately, we'll get an empty bounds:

const image = new Image({
  style: {
    src: 'http://',
    keepAspectRatio: true,
    width: 100
  }
});
image.getBounds(); // empty

5.18.19

Patch Changes

• Updated dependencies [51b42d0]
  • @antv/g-lite@1.2.17
  • @antv/g-camera-api@1.2.18
  • @antv/g-dom-mutation-observer-api@1.2.17
  • @antv/g-web-animations-api@1.2.17

Online DEMO

The insertBefore() method inserts a node before a reference node as a child of a specified parent node.

const group1 = new Element();
const group2 = new Element();
const group3 = new Element();
const group4 = new Element();

// 2, 4, 3
group1.append(group2, group3);
group1.insertBefore(group4, group3);

If the given node already exists in the document, insertBefore() moves it from its current position to the new position. That is, it will automatically be removed from its existing parent before appending it to the specified new parent.

// 2, 3, 4 -> 2, 4, 3
group1.append(group2, group3, group4);
group1.insertBefore(group4, group3);

If refNode is null, then newNode is inserted at the end of node's child nodes.

// 2, 3, 4
group1.append(group2, group3);
group1.insertBefore(group4, null);

If refNode is not the child of parentNode, then newNode is inserted at the end of node's child nodes.

// 2, 3, 4
group1.append(group2, group3);
group1.insertBefore(group4, group5); // non-existed node

@antv/react-g@1.10.19

We can render component in JSX to any shape created with G API:
Online DEMO

import React, { useState, useEffect } from 'react';
import { Canvas as GCanvas, Group as GGroup } from '@antv/g';
import { Circle, render } from '@antv/react-g';

const CustomShape = () => {
  const [size, setSize] = useState(100);
  return <Circle cx={100} cy={100} r={size} stroke="#ff0000" lineWidth={2} />
};

useEffect(() => {
  // Create Canvas & Group with G API
  const canvas = new GCanvas({
    container: 'C',
    width: 500,
    height: 500,
    renderer: new Renderer(), // select a renderer
  });
  const group = new GGroup();
  canvas.appendChild(group);
  
  // Render to any shape with JSX syntax
  render(<CustomShape />, group);
});

5.18.18

Patch Changes

• Updated dependencies [7e3dbd7]
  • @antv/g-lite@1.2.16
  • @antv/g-camera-api@1.2.17
  • @antv/g-dom-mutation-observer-api@1.2.16
  • @antv/g-web-animations-api@1.2.16

Removing points attribute in Polygon & Polyline won't throw error now:

polygon.removeAttribute('points');
polyline.removeAttribute('points');

5.18.17

Patch Changes

• Updated dependencies [d2ed3d6]
  • @antv/g-camera-api@1.2.16

Add onframe callback in gotoLandmark params:

camera.gotoLandmark('reset', {
  duration: 1000,
  easing: 'ease-in',
  onfinish: () => {},
  onframe: (t) => {
    console.log(t); // [0, 1]
  }
});

5.18.16

Patch Changes

Skip triggering render hooks when camera changed only.

• Updated dependencies [f109d83]
  • @antv/g-lite@1.2.15
  • @antv/g-camera-api@1.2.15
  • @antv/g-dom-mutation-observer-api@1.2.15
  • @antv/g-web-animations-api@1.2.15

5.18.14

Patch Changes

• e5d69c7: Fix gradient path & add more geometry.

• Updated dependencies [e5d69c7]

  • @antv/g-lite@1.2.13
  • @antv/g-camera-api@1.2.13
  • @antv/g-dom-mutation-observer-api@1.2.13
  • @antv/g-web-animations-api@1.2.13