本帖最后由 Richard.Ma 于 2024-7-18 13:39 编辑
背景
在Excel和SpreadJS中,下可以设置单元格文本属性“缩小字体填充”以便在文本过长时自动缩小字体以适应单元格大小。然而,当启用自动换行功能时,“缩小字体填充”功能就无法设置了。因此,只能实现单行的缩小字体填充
很多的用户在使用spreadjs时,又希望能在自动换行的情况下实现文本自动缩小以适应单元格高度。
本文将介绍如何通过SpreadJS自定义单元格类型来实现这一效果
实现思路
SpreadJS允许开发者自定义单元格类型,我们可以在自定义单元格类型的paint方法中,通过getAutoFitHeight方法获取文本显示所需的高度,并与当前单元格高度进行比较。如果超出当前单元格高度,则缩小字体并重新测量,重复这一过程直到文本高度小于单元格高度。然后再调用原有的paint方法进行渲染。
关键代码
首先,定义一个自定义的单元格类型WrapFitCellType,继承自SpreadJS的GC.Spread.Sheets.CellTypes.Text类。Text类型已经实现了单元格文本编辑和渲染的逻辑。我们只需要对paint方法改写来实现我们的逻辑:
- function WrapFitCellType() {
- }
- WrapFitCellType.prototype = new GC.Spread.Sheets.CellTypes.Text();
- WrapFitCellType.prototype.paint = function (ctx, value, x, y, w, h, style, context) {
- if (value) {
- while (true) {
- var fitheight = this.getAutoFitHeight(value, this.format(value, style.formatter), style, 1, context);
- if (fitheight < h - 4) {
- break;
- }
- //减小字体的大小直到合适,字体大小为字符串,例如“ 12px”,因此我们需要删除“px”或“pt”并将其转换为数字
- if (style.fontSize.indexOf("px") > 0)
- style.fontSize = parseInt(style.fontSize.substring(0, style.fontSize.length - 2)) - 1 + "px";
- else if (style.fontSize.indexOf("pt") > 0)
- style.fontSize = parseInt(style.fontSize.substring(0, style.fontSize.length - 2)) - 1 + "pt";
- }
- context.fontInfo = null;
- context.lineHeight = null;
- //仍然调用Text.paint方法,仅改变了style.fontSize
- GC.Spread.Sheets.CellTypes.Text.prototype.paint.apply(this, [ctx, value, x, y, w, h, style, context]);
- }
- };
复制代码
调用示例代码
- spread.getActiveSheet().setCellType(0, 0, new WrapFitCellType());
- spread.getActiveSheet().setRowHeight(0, 100);
- spread.getActiveSheet().setColumnWidth(0, 200);
- spread.getActiveSheet().getCell(0, 0).wordWrap(true);
- spread.getActiveSheet().getCell(0, 0).fontSize("50px");
复制代码
在这个单元格中,字体大小是50px,当输入的文字显示不下的时候,渲染时就会自动调整字体大小进行适应
|
|