Skip to content
This repository has been archived by the owner on Oct 7, 2023. It is now read-only.

feat: axis & grid support 3D #304

Merged
merged 5 commits into from
Aug 11, 2023
Merged

feat: axis & grid support 3D #304

merged 5 commits into from
Aug 11, 2023

Conversation

xiaoiver
Copy link
Contributor

@xiaoiver xiaoiver commented Aug 10, 2023

其他修改:

  • DEMO 增加 WebGL 渲染器切换、相机插件

Text、Line 公告牌效果

在 3D 场景中文本需要支持公告牌效果,否则在相机交互时会出现“挤压变形”的情况:

const axis = new Axis({
  style: {
    /**
     * enable billboard effect
     */
    tickIsBillboard: true,
    lineIsBillboard: true,
    labelIsBillboard: true,
    titleIsBillboard: true,
    gridIsBillboard: true,
  }
})

在开启公告牌效果的基础上,有时需要对文本进行旋转,例如 G2 中的 Y 轴 title 旋转 90 度:

截屏2023-08-10 下午2 23 40

如何实现 Z 轴

可以先绘制 X 轴,以 startPos 作为旋转中心,绕 Y 轴旋转 90 度:

const zAxis = new Axis({
    style: {
      gridDirection: 'positive',
      startPos: [50, 50],
      endPos: [350, 50],
    },
  });
zAxis.setOrigin(50, 50, 0); // 设置旋转中心,与 startPos 重合
zAxis.rotate(0, 90, 0);

效果如下:

Aug-10-2023 15-22-23

如何绘制 Y-Z 的 Grid

可以绘制两根 Y 轴,同样旋转 90 度,隐藏其中一根的 label、title

yAxis.setOrigin(50, 50, 0);
yAxis.rotate(0, 90, 0);

tick 可以保留:

截屏2023-08-10 下午3 25 09

@coveralls
Copy link

coveralls commented Aug 10, 2023

Pull Request Test Coverage Report for Build 5830641824

  • 30 of 31 (96.77%) changed or added relevant lines in 4 files are covered.
  • 14 unchanged lines in 2 files lost coverage.
  • Overall coverage increased (+0.05%) to 82.612%

Changes Missing Coverage Covered Lines Changed/Added Lines %
tests/integration/components/axis/axis-linear-basis-z.ts 23 24 95.83%
Files with Coverage Reduction New Missed Lines %
src/util/number.ts 4 38.46%
src/ui/legend/utils.ts 10 43.28%
Totals Coverage Status
Change from base Build 5745849137: 0.05%
Covered Lines: 6923
Relevant Lines: 7885

💛 - Coveralls

@xiaoiver xiaoiver merged commit 8e76f2b into master Aug 11, 2023
1 check passed
@xiaoiver xiaoiver deleted the feat-axis branch August 11, 2023 08:57
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants