有些场景缩放下文字显示不完整

Clark.Pan

本帖最后由 innerwang 于 2024-2-5 17:42 编辑

如图是在线表格编辑器，缩放到25%时，每个单元格的内容还是看起来是完整的
image.png485784911.png

将如下 excel 文件的内容拷贝到在线表格编辑器，缩放到 70% 就出现了文字不完整的情况
image.png652345885.png

这是为什么呢？有什么方式可以做到和在线表格编辑器demo中的sheet的一样的缩放效果？

测试电脑为 Mac

缩放测试.xlsx.zip (8.88 KB, 下载次数: 226)

Clark.Pan · Clark.Pan

其实楼上的回答已经很充分了，我按照我的理解再解释一下：
1.首先，canvas的绘制字体的起始位置并不是字体的左上或者右上等固定位置，而是在一个叫做基线的位置上。例如这篇张所讲的：https://www.twle.cn/l/yufei/canv ... t-textbaseline.html
SpreadJS的基线跟canvas的默认设置一样，用的是alphabetic，如下图所示
image.png983775939.png

2.就是楼上提到的浏览器最小字体的原因了，如果设置字体小于最小字体的大小，那么也会浏览器的最小字体显示。
3.所以按照上述的解释实际上居顶的时候基线已经在单元格的范围之外了，所以画出来是这样的，所以可以看到这样的效果
image.png564367370.png

如果你再缩放一些的话，还可以看到这样的效果，当居底的时候相反，基线在单元格范围之内，但是位子的大小的部分已经超出了单元格的大小（原因是第二点字体大小的问题）。所以可以看到这样的效果：
image.png509048461.png

居中可以是因为字体大小刚刚好能够在单元格中显示，其实本身是显示不全的，但是因为字的本身上下左右是留有余白的，刚好把余白部分给遮挡了，这就造成了为什么居中是可以完全显示的。

Clark.Pan · Clark.Pan

设置垂直方向文字对齐的居中显示

innerwang · innerwang

本帖最后由 innerwang 于 2024-2-20 10:29 编辑

Clark.Pan 发表于 2024-2-6 09:09
设置垂直方向文字对齐的居中显示

想问问为啥不垂直居中就会有问题呢？这个不垂直居中就会有问题是否考虑修复

我看新建 sheet，单元格默认就不是垂直居中的

前端小白 · 前端小白

你可以揣测一下垂直居中的算法。不论怎么调整单元格的layout，始终找到单元格中点，然后将缩放字体往上一画，完美。
如果不是垂直居中，那么就是常规画法，缩放后，要根据缩放比，来决定绘制文字起始位置，而这个起始位置，大概率要根据什么lineheight，lineweight算一波。

看你截图的样子，估计你浏览器最小字体的设置绝逼不是0 （比如最小字体是x），结果画法算的时候，缩放后字体大小应该是y，结果y<x,浏览器强行将y调整成x了。但是算绘制字体起始位置的时候，又是按照y算的。结果就是现在这个表现。

这玩意是限制吧

innerwang · innerwang

前端小白发表于 2024-2-20 10:58
你可以揣测一下垂直居中的算法。不论怎么调整单元格的layout，始终找到单元格中点，然后将缩放字体往上一画 ...

那我没有理解，为什么居中的时候，缩放字体就不会是x，而非居中来画的时候就是x呢？

前端小白 · 前端小白

咦，我好像一开头就说了啊，居中不用算起始位置，字体也是X。

其实你自己把浏览器最小字体调整一下看看效果就明白了，调的越大越容易明白咋回事。

innerwang · innerwang

前端小白发表于 2024-2-20 11:16
咦，我好像一开头就说了啊，居中不用算起始位置，字体也是X。

其实你自己把浏览器最小字体调整一下看看 ...

但是居中的时候看起来字体还是整体缩小了诶

image.png823438720.png

如图缩到30%, 这字体看起来也不像是 12px啊 (我的浏览器最小字体就是 12px)

前端小白 · 前端小白

对的，都是要缩的，只是缩的时候算位置的逻辑一个不受最小size的影响，一个受影响。
这就是你开篇说的问题啊“缩放到 70% 就出现了文字不完整的情况”

innerwang · innerwang

前端小白发表于 2024-2-20 12:31
对的，都是要缩的，只是缩的时候算位置的逻辑一个不受最小size的影响，一个受影响。
这就是你开篇说的问题 ...

为什么会有受影响与否的不同呢？我还是不理解为啥会有区别

不居中就是居顶或居底，找到单元格的顶或者底，把缩放字体往上一画，无法实现吗？

		自动登录	找回密码
密码			立即注册

[已处理] 有些场景缩放下文字显示不完整

最佳答案

18 个回复

浏览过的版块

讲师达人

悬赏达人

微信认证勋章

SpreadJS 认证

SpreadJS 高级认证

元老葡萄