Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

增加 label position 策略:exceedAdjust #6173

Closed
1 task done
hustcc opened this issue Apr 15, 2024 · 11 comments · Fixed by #6209
Closed
1 task done

增加 label position 策略:exceedAdjust #6173

hustcc opened this issue Apr 15, 2024 · 11 comments · Fixed by #6209
Assignees

Comments

@hustcc
Copy link
Member

hustcc commented Apr 15, 2024

AntV Open Source Contribution Plan(可选)

  • 我同意将这个 Issue 参与 OSCP 计划

Issue 类型

中级任务

任务介绍

当数据标签超出整个 canvas 画布的时候,会被剪裁掉,显示不全,所以需要给 label 标签做一个自动调整 x y 位置。

参考说明

参考:https://g2.antv.antgroup.com/spec/label/overlap-hide

增加一个新的类型 exceedAdjust,超出 canvas 画布的时候,自动反方向移动位置,防止被剪裁,代码可以参考。

@hustcc
Copy link
Member Author

hustcc commented Apr 16, 2024

image

如上图,标记区域的 label 应该自动向左移动,防止超出画布被剪裁。

@Runtus
Copy link
Contributor

Runtus commented Apr 25, 2024

大佬想问下这个label自动调整需求是设置成默认生效吗?

@hustcc
Copy link
Member Author

hustcc commented Apr 25, 2024

大佬想问下这个label自动调整需求是设置成默认生效吗?

不是,是类似于 overflowHide 一样,组成一个配置,大部分代码都是可以参考的。

@Runtus
Copy link
Contributor

Runtus commented Apr 25, 2024

大佬想问下这个label自动调整需求是设置成默认生效吗?

不是,是类似于 overflowHide 一样,组成一个配置,大部分代码都是可以参考的。

好的明白了,配置也是和overlap一样在transform之下吗?

@Runtus
Copy link
Contributor

Runtus commented Apr 25, 2024

我认领这个任务

@hustcc
Copy link
Member Author

hustcc commented Apr 25, 2024

#6199 这个问题是同类问题,可以熟悉之后,一起看看~

@Runtus
Copy link
Contributor

Runtus commented Apr 25, 2024

#6199 这个问题是同类问题,可以熟悉之后,一起看看~

get

@Runtus
Copy link
Contributor

Runtus commented Apr 26, 2024

@hustcc 大佬,我这更新对应文档时,需要放一个图片在md里,需要麻烦你帮忙上传到cdn上。
image

@hustcc
Copy link
Member Author

hustcc commented Apr 26, 2024

@Runtus

使用这个地址:https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*B2GwQbqkH_kAAAAAAAAAAAAADmJ7AQ/original

@hustcc
Copy link
Member Author

hustcc commented Apr 26, 2024

因为还没有看到 pr 的代码,所以在这里提前提醒一下,exceed 之后 Adjust 的策略:

adjust 的方向是 exceed 方向的反方向。

举个栗子:

  • 如果是右侧超出,那么就像左边调整位置
  • 如果是右下超出,那就向左上调整位置

注意处理整个画布都小于 label 大小的时候,不要出现代码的死循环。

@Runtus
Copy link
Contributor

Runtus commented Apr 26, 2024

因为还没有看到 pr 的代码,所以在这里提前提醒一下,exceed 之后 Adjust 的策略:

adjust 的方向是 exceed 方向的反方向。

举个栗子:

  • 如果是右侧超出,那么就像左边调整位置
  • 如果是右下超出,那就向左上调整位置

注意处理整个画布都小于 label 大小的时候,不要出现代码的死循环。

ok 不好意思,我想的是先把那个文档一起完善了一起提个pr,我明天把pr提上来

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Development

Successfully merging a pull request may close this issue.

2 participants