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

[g] Text 支持 text-overflow 属性 #1149

Closed
xiaoiver opened this issue Sep 13, 2022 · 1 comment
Closed

[g] Text 支持 text-overflow 属性 #1149

xiaoiver opened this issue Sep 13, 2022 · 1 comment
Assignees
Labels

Comments

@xiaoiver
Copy link
Contributor

xiaoiver commented Sep 13, 2022

目前的 Text 支持给定宽度自动换行,但常需要搭配文本截断功能使用,例如添加省略号。如果都交给上层实现,除了重复也会因使用 <canvas> 进行文本度量进而影响服务端渲染。因此该功能有必要内置,已经充分考虑了服务端渲染场景。

截屏2022-09-13 上午11 38 28

参考 CSS 同名属性:https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

当然需要配合 wordWrapWidthmaxLines 使用,是为了确定最大宽高:

new Text({
  style: {
    text: 'abcde...',
    textOverflow: TextOverflow.ELLIPSIS,
    wordWrapWidth: 100,
    maxLines: 3,
  }
});

textOverflow 支持以下取值:

  • TextOverflow.CLIP 超出内容直接截断
  • TextOverflow.ELLIPSIS 截断后添加省略号 ...
  • 自定义字符串

注意事项:

  • 截断只影响渲染效果,不会改变原始文本
  • 需要在 Text 上提供一个标识代表确实被截断,便于其他组件例如 Tooltip 判断是否要展示完整文本
  • 关于 maxLines 这个属性名,并没有对应的 CSS / SVG 属性,在 CanvasKit 的 ParagraphStyle 中可见:
export interface ParagraphStyle {
    ellipsis?: string;
    maxLines?: number;
}

其他文本功能:

@xiaoiver
Copy link
Contributor Author

xiaoiver added a commit that referenced this issue Sep 19, 2022
* feat: support text-overflow in Text #1149

* feat: add synchronized version of element(s)FromPoint #1153

* feat: add lottie player #1147

* Publish

 - @antv/g-camera-api@1.0.5
 - @antv/g-canvas@1.9.4
 - @antv/g-canvaskit@0.8.4
 - @antv/g-compat@1.0.5
 - @antv/g-components@1.7.16
 - @antv/g-css-layout-api@1.0.5
 - @antv/g-css-typed-om-api@1.0.5
 - @antv/g-devtool@0.10.16
 - @antv/g-dom-mutation-observer-api@1.0.5
 - @antv/g-gesture@0.0.39
 - @antv/g-image-exporter@0.5.16
 - @antv/g-layout-blocklike@1.7.16
 - @antv/g-lite@1.0.5
 - @antv/g-lottie-player@0.0.2
 - @antv/g-math@1.7.16
 - @antv/g-mobile-canvas-element@0.6.16
 - @antv/g-mobile-canvas@0.8.13
 - @antv/g-mobile-svg@0.8.13
 - @antv/g-mobile-webgl@0.7.19
 - @antv/g-plugin-3d@1.7.16
 - @antv/g-plugin-a11y@0.4.16
 - @antv/g-plugin-annotation@0.2.13
 - @antv/g-plugin-box2d@1.7.16
 - @antv/g-plugin-canvas-path-generator@1.1.16
 - @antv/g-plugin-canvas-picker@1.8.13
 - @antv/g-plugin-canvas-renderer@1.7.19
 - @antv/g-plugin-canvaskit-renderer@1.1.17
 - @antv/g-plugin-control@1.7.16
 - @antv/g-plugin-css-select@1.7.16
 - @antv/g-plugin-device-renderer@1.7.19
 - @antv/g-plugin-dom-interaction@1.7.16
 - @antv/g-plugin-dragndrop@1.6.16
 - @antv/g-plugin-gpgpu@1.7.16
 - @antv/g-plugin-html-renderer@1.7.16
 - @antv/g-plugin-image-loader@1.1.17
 - @antv/g-plugin-matterjs@1.7.16
 - @antv/g-plugin-mobile-interaction@0.7.16
 - @antv/g-plugin-physx@1.7.16
 - @antv/g-plugin-rough-canvas-renderer@1.7.16
 - @antv/g-plugin-rough-svg-renderer@1.7.16
 - @antv/g-plugin-svg-picker@1.7.16
 - @antv/g-plugin-svg-renderer@1.8.13
 - @antv/g-plugin-webgl-device@1.7.16
 - @antv/g-plugin-webgpu-device@1.7.16
 - @antv/g-plugin-yoga@1.7.16
 - @antv/g-shader-components@1.7.16
 - @antv/g-svg@1.8.13
 - @antv/g-web-animations-api@1.0.5
 - @antv/g-web-components@1.7.16
 - @antv/g-webgl@1.7.19
 - @antv/g-webgpu@1.7.19
 - @antv/g@5.9.0
 - @antv/react-g@1.8.13
 - @antv/g-site@1.8.13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant