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.

Sign up for GitHub

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

Jump to bottom

[g] Text 的 textBaseline 取 bottom 值时计算包围盒有误 #1313

Closed
xiaoiver opened this issue Mar 16, 2023 · 3 comments
Closed

[g] Text 的 textBaseline 取 bottom 值时计算包围盒有误 #1313

xiaoiver opened this issue Mar 16, 2023 · 3 comments
Assignees
@xiaoiver
Labels
bug

Comments

@xiaoiver
Copy link
Contributor

xiaoiver commented Mar 16, 2023 •
edited
Loading

在脏矩形渲染时会按照包围盒尺寸进行擦除，然后绘制文本。
出现了 'g'、'p'、'j' 等字符展示不全的情况：

截屏2023-03-16 下午5 03 45

截屏2023-03-16 下午5 25 48

其实包围盒（上图中的黑色方框）计算是正确的，问题出在设置 context.textBaseline = 'bottom' 时，应该当作 ideographic 处理，这也能和 SVG 保持一致。视觉效果上会稍稍往上提一点，这样就能刚好容纳在计算的包围盒中，擦除后绘制也就能展示全了：

截屏2023-03-16 下午8 26 23
@xiaoiver xiaoiver changed the title [g] Text 的 textBasline 取 bottom 值时计算包围盒有误 [g] Text 的 textBaseline 取 bottom 值时计算包围盒有误 Mar 16, 2023
@xiaoiver xiaoiver self-assigned this Mar 16, 2023
@xiaoiver xiaoiver added the bug label Mar 16, 2023
xiaoiver added a commit that referenced this issue Mar 16, 2023
@xiaoiver
fix: textBaseline bottom glitch when rendering under canvas #1313
6470c12
@xiaoiver xiaoiver reopened this Mar 16, 2023
@xiaoiver
Copy link
Contributor Author

还不能直接当作 ideographic 处理，原因是 node-canvas 并不支持该取值，这会造成基于它的服务端渲染图和浏览器效果不一致：
Automattic/node-canvas#36

@xiaoiver
Copy link
Contributor Author

Safari 和 Chrome 在 dominant-baseline 上的某些取值展示效果不同：

https://observablehq.com/@julesblm/svg-dominant-baseline-alignment-baseline-attributes
https://stackoverflow.com/questions/35565063/svg-dominant-baseline-not-working-in-safari

上方为 Chrome，下方为 Safari
image
image

xiaoiver added a commit that referenced this issue Mar 17, 2023
@xiaoiver
fix: textBaseline when set to bottom #1313
28f3596
xiaoiver added a commit that referenced this issue Mar 22, 2023
@xiaoiver
修复 textBaseline 问题 (#1315)
3ffbc77 
* feat: add cancel landmark animation in camera

* fix: make geometry calculation lazy

* fix: prevent calling getImageData when css parsing disabled  #1309

* Publish

 - @antv/g-camera-api@1.0.33
 - @antv/g-canvas@1.9.36
 - @antv/g-canvaskit@0.8.36
 - @antv/g-components@1.7.43
 - @antv/g-css-layout-api@1.0.32
 - @antv/g-css-typed-om-api@1.0.32
 - @antv/g-devtool@0.10.43
 - @antv/g-dom-mutation-observer-api@1.0.32
 - @antv/g-gesture@0.0.70
 - @antv/g-image-exporter@0.5.44
 - @antv/g-layout-blocklike@1.7.43
 - @antv/g-lite@1.0.44
 - @antv/g-lottie-player@0.0.32
 - @antv/g-math@1.7.43
 - @antv/g-mobile-canvas-element@0.6.43
 - @antv/g-mobile-canvas@0.8.44
 - @antv/g-mobile-svg@0.8.44
 - @antv/g-mobile-webgl@0.7.51
 - @antv/g-pattern@1.0.13
 - @antv/g-plugin-3d@1.7.45
 - @antv/g-plugin-a11y@0.4.43
 - @antv/g-plugin-annotation@0.2.42
 - @antv/g-plugin-box2d@1.7.44
 - @antv/g-plugin-canvas-path-generator@1.1.45
 - @antv/g-plugin-canvas-picker@1.8.44
 - @antv/g-plugin-canvas-renderer@1.7.48
 - @antv/g-plugin-canvaskit-renderer@1.1.46
 - @antv/g-plugin-control@1.7.43
 - @antv/g-plugin-css-select@1.7.44
 - @antv/g-plugin-device-renderer@1.7.48
 - @antv/g-plugin-dom-interaction@1.7.44
 - @antv/g-plugin-dragndrop@1.6.43
 - @antv/g-plugin-gpgpu@1.7.43
 - @antv/g-plugin-html-renderer@1.7.47
 - @antv/g-plugin-image-loader@1.1.46
 - @antv/g-plugin-matterjs@1.7.44
 - @antv/g-plugin-mobile-interaction@0.7.43
 - @antv/g-plugin-physx@1.7.44
 - @antv/g-plugin-rough-canvas-renderer@1.7.46
 - @antv/g-plugin-rough-svg-renderer@1.7.46
 - @antv/g-plugin-svg-picker@1.7.44
 - @antv/g-plugin-svg-renderer@1.8.44
 - @antv/g-plugin-webgl-device@1.7.44
 - @antv/g-plugin-webgpu-device@1.7.43
 - @antv/g-plugin-yoga@1.7.43
 - @antv/g-plugin-zdog-canvas-renderer@1.0.11
 - @antv/g-plugin-zdog-svg-renderer@1.0.9
 - @antv/g-shader-components@1.7.43
 - @antv/g-svg@1.8.44
 - @antv/g-web-animations-api@1.0.32
 - @antv/g-web-components@1.7.43
 - @antv/g-webgl@1.7.51
 - @antv/g-webgpu@1.7.50
 - @antv/g@5.16.6
 - @antv/react-g@1.8.52

* fix: maximum calling exceeds when calling getBounds

* Publish

 - @antv/g-lite@1.0.45
 - @antv/g@5.16.7
 - @antv/react-g@1.8.53

* fix: make sure metrics finished under SVG renderer

* Publish

 - @antv/g-lite@1.0.46
 - @antv/g-mobile-svg@0.8.45
 - @antv/g-plugin-rough-svg-renderer@1.7.47
 - @antv/g-plugin-svg-renderer@1.8.45
 - @antv/g-plugin-zdog-svg-renderer@1.0.10
 - @antv/g-svg@1.8.45
 - @antv/g@5.16.8
 - @antv/react-g@1.8.54

* fix: enhance perf when creating AABB

* Publish

 - @antv/g-canvas@1.9.37
 - @antv/g-gesture@0.0.71
 - @antv/g-lite@1.0.47
 - @antv/g-mobile-canvas@0.8.45
 - @antv/g-mobile-webgl@0.7.52
 - @antv/g-plugin-canvas-renderer@1.7.49
 - @antv/g-plugin-device-renderer@1.7.49
 - @antv/g-webgl@1.7.52
 - @antv/g-webgpu@1.7.51
 - @antv/g@5.16.9
 - @antv/react-g@1.8.55

* fix: textBaseline bottom glitch when rendering under canvas #1313

* Publish

 - @antv/g-canvas@1.9.38
 - @antv/g-gesture@0.0.72
 - @antv/g-mobile-canvas@0.8.46
 - @antv/g-plugin-canvas-renderer@1.7.50

* fix: textBaseline when set to bottom #1313

* fix: measure font should not be skipped

* Publish

 - @antv/g-canvas@1.9.39
 - @antv/g-gesture@0.0.73
 - @antv/g-lite@1.0.48
 - @antv/g-mobile-canvas@0.8.47
 - @antv/g-mobile-svg@0.8.46
 - @antv/g-mobile-webgl@0.7.53
 - @antv/g-plugin-canvas-renderer@1.7.51
 - @antv/g-plugin-device-renderer@1.7.50
 - @antv/g-plugin-svg-renderer@1.8.46
 - @antv/g-svg@1.8.46
 - @antv/g-web-animations-api@1.0.33
 - @antv/g-webgl@1.7.53
 - @antv/g-webgpu@1.7.52
 - @antv/g@5.16.10
 - @antv/react-g@1.8.56

* chore: test case in ci

* fix: use latest WebGPU spec

* fix: semantic error TS2503: Cannot find namespace 'NodeJS'

* Publish

 - @antv/g-gesture@0.0.74
 - @antv/g-lite@1.0.49
 - @antv/g-plugin-webgpu-device@1.7.44
 - @antv/g-webgpu@1.7.53
 - @antv/g@5.16.11
 - @antv/react-g@1.8.57

* feat: support directional sort duration brush selection

* Publish

 - @antv/g-plugin-annotation@0.2.43

* fix: a11y plugin when css parsing disabled

* Publish

 - @antv/g-plugin-a11y@0.4.44

* feat: expose isDrawingMode in annotation plugin
@xiaoiver xiaoiver mentioned this issue Mar 28, 2023
Closed
@xiaoiver
Copy link
Contributor Author

调整了下 SVG 的实现，top / bottom 时通过设置成 middle 再配合 dy 实现，目前和 Canvas 效果完全一致：

截屏2023-07-21 上午10 45 47

xiaoiver added a commit that referenced this issue Jul 21, 2023
@xiaoiver
fix: make textBaseline in SVG the same with Canvas #1313
ee52dc6
xiaoiver added a commit that referenced this issue Jul 21, 2023
@xiaoiver
fix: enhance perf of Text when fontSize changed in webgl (#1424)
1b0901b 
* fix: enhance perf of Text when fontSize changed in webgl #1422

* chore: commit changeset

* fix: draw 1px sub-pixel line correctly in webgl #1425

* chore: commit changeset

* chore: add testcase for sub-pixel line #1425

* fix: convertToPath should account for Rect with undefined x/y

* chore: commit changeset

* fix: make FillMesh instanced to enhance perf #1359

* chore: commit changeset

* fix: make textBaseline in SVG the same with Canvas #1313

* chore: commit changeset

* fix: add a fixed offset for Text in webgl #1380

* chore: commit changeset

* fix: convertToPath should be compatible with empty coords

* chore: commit changeset
xiaoiver added a commit that referenced this issue Jul 21, 2023
@xiaoiver @github-actions
Release (#1428)
c0f3d84 
* fix: enhance perf of Text when fontSize changed in webgl (#1424)

* fix: enhance perf of Text when fontSize changed in webgl #1422

* chore: commit changeset

* fix: draw 1px sub-pixel line correctly in webgl #1425

* chore: commit changeset

* chore: add testcase for sub-pixel line #1425

* fix: convertToPath should account for Rect with undefined x/y

* chore: commit changeset

* fix: make FillMesh instanced to enhance perf #1359

* chore: commit changeset

* fix: make textBaseline in SVG the same with Canvas #1313

* chore: commit changeset

* fix: add a fixed offset for Text in webgl #1380

* chore: commit changeset

* fix: convertToPath should be compatible with empty coords

* chore: commit changeset

* chore(release): bump version (#1427)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@xiaoiver xiaoiver

Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@xiaoiver