自定义单元格位置问题

收藏

如下图：想把叉放到单元格内，调了起始值后始终不会到单元格内，无论怎么加宽单元格都不行，图标的c1就可以。

代码如下：
1、画c1的代码
width = GSSCText.prototype.getAutoFitWidth.call(this, text, text, style, sheet.zoom(), context)
GSSCText.prototype.paintContent.call(this, ctx, text, x, y-h/3, w, h, style, context)
style.foreColor=color
style.font=prefont
return width

2、画叉的代码
width = GSSCText.prototype.getAutoFitWidth.call(this, text, text, style, sheet.zoom(), context)
//const start = maxOffsets[3] + maxOffsets[4] > 0 ? x + width - maxOffsets[3] - maxOffsets[4] : x
const start = x + maxOffsets[4] //maxOffsets[4] 标识c1的宽度
GSSCText.prototype.paintContent.call(this, ctx, text, start, y-h/3, w, h, style, context)

dexteryao · dexteryao

您重写的是那个方法？想在文字后面画个叉？

Dtttax · Dtttax

单元格内加叉，如图，重写的paintContent 方法

dexteryao · dexteryao

您好，看您的截图，应该就是真个绘制时候偏移量计算不对，你要加红X，前面所有内容都要往前移动，留出X的位置

Dtttax · Dtttax

所有内容都要往前移动是怎么写的？

GSSCText.prototype.paintContent.call(this, ctx, text, x, y-h/3, w, h, style, context)

是这个x的位置么

dexteryao · dexteryao

嗯，但是没有你的上下文，不清楚具体要怎么改，我重新谢了个Demo，你看下

<!doctype html>
<html>
<head>
<title>上下标公式渲染</title>
<meta name="spreadjs culture" content="zh-cn" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" type="text/css" href="https://cdn.grapecity.com.cn/spreadjs/css/gc.spread.sheets.excel2013white.12.0.6.css">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.js"></script>
<script src="https://cdn.grapecity.com.cn/spreadjs/scripts/gc.spread.sheets.all.12.0.6.min.js" type="text/javascript"></script>
<script src="https://cdn.grapecity.com.cn/spreadjs/scripts/interop/gc.spread.excelio.12.0.6.min.js" type="text/javascript" type="text/javascript"></script>
<script src="https://cdn.grapecity.com.cn/spreadjs/scripts/plugins/gc.spread.sheets.charts.12.0.6.min.js" type="text/javascript" type="text/javascript"></script>
<script src="https://cdn.grapecity.com.cn/spreadjs/scripts/plugins/gc.spread.sheets.shapes.12.0.6.min.js" type="text/javascript" type="text/javascript"></script>
<script src="https://cdn.grapecity.com.cn/spreadjs/scripts/plugins/gc.spread.sheets.print.12.0.6.min.js" type="text/javascript" type="text/javascript"></script>
<script src="https://cdn.grapecity.com.cn/spreadjs/scripts/plugins/gc.spread.sheets.pdf.12.0.6.min.js" type="text/javascript" type="text/javascript"></script>
<script src="https://cdn.grapecity.com.cn/spreadjs/scripts/resources/zh/gc.spread.sheets.resources.zh.12.0.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
var spreadNS = GC.Spread.Sheets;
var spread;
$(document).ready(function () {
spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {
sheetCount: 2
});
initSpread(spread);
});
//自定义单元格
function ShowTagCellType() {
this.typeName = "ShowTagCellType";
this._cellTagStartCache = undefined
this._cellTagEndCache = undefined
this._textWidth = undefined
this._textHeight = undefined
}
ShowTagCellType.prototype = new GC.Spread.Sheets.CellTypes.Text();
ShowTagCellType.prototype.paintContent = function (ctx, value, x, y, w, h, style, context) {
var tag = context.sheet.getTag(context.row, context.col);
if (tag == '' || tag == null || tag === undefined) {
this._cellTagStartCache = undefined
this._cellTagEndCache = undefined
this._textWidth = undefined
this._textHeight = undefined
GC.Spread.Sheets.CellTypes.Text.prototype.paintContent.call(this, ctx, value, x, y, w, h, style, context)
return;
}
this._cellTagStartCache = [], this._textWidth = 0;
var startTextWidth = 0,
endTextWidth = 0;
var sheet = context.sheet,
zoomFactor = sheet.zoom();
var foreColor = style.foreColor,
textDecoration = style.textDecoration;
//为了实现简单，单元格垂直居中，如果有其他需求，绘制文字位置重新计算
style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
for (var i = 0; i < tag.cellTagStart.length; i++) {
var node = tag.cellTagStart[i];
if (node.type === 'text') {
style.foreColor = foreColor
style.textDecoration = textDecoration
var cellText = node.text;
GC.Spread.Sheets.CellTypes.Text.prototype.paintContent.call(this, ctx, cellText, x + startTextWidth, y, w - startTextWidth, h, style, context)
var textWidth = GC.Spread.Sheets.CellTypes.Text.prototype.getAutoFitWidth.call(this, cellText, cellText, style, zoomFactor, context)
startTextWidth += textWidth
} else if (node.type === 'link') {
style.foreColor = "blue"
style.textDecoration = GC.Spread.Sheets.TextDecorationType.underline;
var linkText = node.link;
if (node.isCustomName) {
linkText = this.getFormulaFromCustomerName(sheet, node.link);
}
GC.Spread.Sheets.CellTypes.Text.prototype.paintContent.call(this, ctx, linkText, x + startTextWidth + 2, y, w - startTextWidth, h, style, context)
var textWidth = GC.Spread.Sheets.CellTypes.Text.prototype.getAutoFitWidth.call(this, linkText, linkText, style, zoomFactor, context)
this._cellTagStartCache[i] = {
startX: x + startTextWidth,
textWidth: textWidth + 3,
formula: linkText
}
startTextWidth += (textWidth + 3)
}
}
this._textWidth += startTextWidth;
// Set Font to default
style.foreColor = foreColor
style.textDecoration = textDecoration
if (tag.cellTagEnd) {
var supTextNode = tag.cellTagEnd.supText,
subTextNode = tag.cellTagEnd.subText;
var supTextWidth = 0,
subTextWidth = 0;
if (supTextNode && supTextNode.length > 0) {
style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style.vAlign = GC.Spread.Sheets.VerticalAlign.bottom;
for (var i = supTextNode.length - 1; i >= 0; i--) {
var node = supTextNode[i];
style.foreColor = node.color || foreColor;
// style.textDecoration = textDecoration
var cellText = node.text;
var textWidth = GC.Spread.Sheets.CellTypes.Text.prototype.getAutoFitWidth.call(this, cellText, cellText, style, zoomFactor, context)
GC.Spread.Sheets.CellTypes.Text.prototype.paintContent.call(this, ctx, cellText, x + w - textWidth - supTextWidth - 5, y, textWidth + 5, h / 2, style, context)
supTextWidth += (textWidth + 3)
}
}
if (subTextNode && subTextNode.length > 0) {
style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style.vAlign = GC.Spread.Sheets.VerticalAlign.top;
for (var i = subTextNode.length - 1; i >= 0; i--) {
var node = subTextNode[i];
style.foreColor = node.color || foreColor;
// style.textDecoration = textDecoration
var cellText = node.text;
var textWidth = GC.Spread.Sheets.CellTypes.Text.prototype.getAutoFitWidth.call(this, cellText, cellText, style, zoomFactor, context)
GC.Spread.Sheets.CellTypes.Text.prototype.paintContent.call(this, ctx, cellText, x + w - textWidth - subTextWidth - 5, y + h / 2, textWidth + 5, h / 2, style, context)
subTextWidth += (textWidth + 3)
}
}
endTextWidth = supTextWidth > subTextWidth ? supTextWidth : subTextWidth;
var textHeight = GC.Spread.Sheets.CellTypes.Text.prototype.getAutoFitHeight.call(this, "A", "A", style, zoomFactor, context)
this._textHeight = textHeight * 2
// var supText = tag.cellTagEnd.supText, subText = tag.cellTagEnd.subText;
// var supTextWidth = GC.Spread.Sheets.CellTypes.Text.prototype.getAutoFitWidth.call(this, supText, supText, style, zoomFactor, context)
// var subTextWidth = GC.Spread.Sheets.CellTypes.Text.prototype.getAutoFitWidth.call(this, subText, subText, style, zoomFactor, context)
// endTextWidth = supTextWidth > subTextWidth ? supTextWidth : subTextWidth;
// var textHeight = GC.Spread.Sheets.CellTypes.Text.prototype.getAutoFitHeight.call(this, supText, supText, style, zoomFactor, context)
// this._textHeight = textHeight * 2
// style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
// style.vAlign = GC.Spread.Sheets.VerticalAlign.bottom;
// GC.Spread.Sheets.CellTypes.Text.prototype.paintContent.call(this, ctx, supText, x + w - endTextWidth - 5, y, endTextWidth + 5, h / 2, style, context)
// style.vAlign = GC.Spread.Sheets.VerticalAlign.top;
// GC.Spread.Sheets.CellTypes.Text.prototype.paintContent.call(this, ctx, subText, x + w - endTextWidth - 5, y + h / 2, endTextWidth + 5, h / 2, style, context)
}
this._textWidth += endTextWidth;
// Set Font to default
style.foreColor = foreColor
style.textDecoration = textDecoration
//Paint Value
style.font = "bold " + style.font
style.hAlign = GC.Spread.Sheets.HorizontalAlign.right;
style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
GC.Spread.Sheets.CellTypes.Text.prototype.paintContent.call(this, ctx, value, x, y, w - endTextWidth - 3, h, style, context)
};
ShowTagCellType.prototype.getFormulaFromCustomerName = function (sheet, customName) {
var nameInfo = sheet.getCustomName(customName);
var expression = nameInfo.getExpression();
var expStr = GC.Spread.Sheets.CalcEngine.expressionToFormula(sheet, expression, 0, 0);
var range = GC.Spread.Sheets.CalcEngine.formulaToRange(sheet, expStr, 0, 0);
expStr = GC.Spread.Sheets.CalcEngine.rangeToFormula(range, 0, 0, GC.Spread.Sheets.CalcEngine.RangeReferenceRelative.allRelative, false)
return expStr;
}
ShowTagCellType.prototype.getHitInfo = function (x, y, cellStyle, cellRect, context) {
var info = {
x: x,
y: y,
row: context.row,
col: context.col,
cellRect: cellRect,
sheetArea: context.sheetArea,
isReservedLocation: false,
reservedLocation: -1
};
if (y > cellRect.y + (cellRect.height - this._textHeight) / 2 && y < cellRect.y + cellRect.height - (cellRect.height - this._textHeight) / 2)
for (var i = 0; i < this._cellTagStartCache.length; i++) {
var item = this._cellTagStartCache[i];
if (item) {
var startX = item.startX;
if (x - startX > 0 && x < startX + item.textWidth) {
info.isReservedLocation = true;
info.reservedLocation = i;
break;
}
}
}
return info;
}
ShowTagCellType.prototype.processMouseUp = function (hitInfo) {
var sheet = hitInfo.sheet,
self = this;
if (sheet && hitInfo.isReservedLocation && hitInfo.reservedLocation >= 0) {
setTimeout(function () {
var expStr = self._cellTagStartCache[hitInfo.reservedLocation].formula;
var range = GC.Spread.Sheets.CalcEngine.formulaToRange(sheet, expStr, 0, 0);
sheet.setActiveCell(range.row, range.col);
var rec = sheet.getCellRect(range.row, range.col)
if (rec.x === undefined) {
sheet.showCell(range.row, range.col, GC.Spread.Sheets.VerticalPosition.top, GC.Spread.Sheets.HorizontalPosition.left);
}
}, 10);
return true;
}
return false;
};
ShowTagCellType.prototype.processMouseMove = function (hitInfo) {
var sheet = hitInfo.sheet;
var div = sheet.getParent().getHost();
var canvasId = div.id + "vp_vp";
var canvas = $("#" + canvasId)[0];
if (sheet && hitInfo.isReservedLocation) {
canvas.style.cursor = 'pointer';
return true;
} else {
canvas.style.cursor = 'default';
}
return false;
};
ShowTagCellType.prototype.getAutoFitWidth = function (value, text, cellStyle, zoomFactor, context) {
if (this._textWidth) {
cellStyle.font = "bold " + cellStyle.font
return 5 + this._textWidth + GC.Spread.Sheets.CellTypes.Text.prototype.getAutoFitWidth.call(this, value, text, cellStyle, zoomFactor, context);
} else
return GC.Spread.Sheets.CellTypes.Text.prototype.getAutoFitWidth.call(this, value, text, cellStyle, zoomFactor, context)
}
ShowTagCellType.prototype.getAutoFitHeight = function (value, text, cellStyle, zoomFactor, context) {
if (this._textHeight) {
return this._textHeight;
} else {
return GC.Spread.Sheets.CellTypes.Text.prototype.getAutoFitHeight.call(this, value, text, cellStyle, zoomFactor, context)
}
}
function getFormulaFromRowCol(row, col) {
var range = new GC.Spread.Sheets.Range(row, col, 1, 1)
return GC.Spread.Sheets.CalcEngine.rangeToFormula(range, 0, 0, GC.Spread.Sheets.CalcEngine.RangeReferenceRelative.allAbsolute, false)
}
function initSpread(spread) {
var sheet = spread.getSheet(0);
var a1 = getFormulaFromRowCol(0, 0)
sheet.addCustomName('SourceCell', a1, 0, 0)
sheet.suspendPaint();
var style = new GC.Spread.Sheets.Style();
style.font = "14px simkai";
sheet.setStyle(-1, -1, style, GC.Spread.Sheets.SheetArea.viewport);
var cell = sheet.getCell(1, 1);
cell.cellType(new ShowTagCellType());
cell.formatter('"$USA"#,##0.00_);("$USA"[red]#,##0.00)')
// cell.value(-5000.02);
cell.formula("SourceCell")
sheet.setValue(0, 0, -5000.02)
var cellTagStart = [{
type: 'text',
text: '(Text Mark)'
},
{
type: 'text',
text: '(Text11111)'
},
{
type: 'link',
isCustomName: true,
link: 'SourceCell'
},
{
type: 'link',
isCustomName: false,
link: 'B12'
},
{
type: 'link',
isCustomName: false,
link: 'C3'
},
];
var cellTagEnd = {
supText: [{
type: 'text',
text: 'SUP'
}],
subText: [{
type: 'text',
text: 'SUB'
}]
}
cell.tag({
cellTagStart: cellTagStart,
cellTagEnd: cellTagEnd
});
var cell2 = sheet.getCell(2, 1);
cell2.cellType(new ShowTagCellType());
cell2.formatter('"$USA"#,##0.00_);("$USA"#,##0.00)')
cell2.value(1000.03);
var cellTagStart2 = [{
type: 'text',
text: '{Mark}'
},
{
type: 'text',
text: '{Text}'
},
{
type: 'text',
text: '{Text}'
},
{
type: 'link',
isCustomName: true,
link: 'SourceCell'
},
{
type: 'link',
isCustomName: false,
link: 'B22'
},
];
var cellTagEnd2 = {
supText: [{
type: 'text',
color: 'red',
text: 'A'
},
{
type: 'text',
text: 'B'
},
{
type: 'text',
text: 'C'
}
],
subText: [{
type: 'text',
text: 'TRUE'
},{
type: 'text',
color: 'red',
text: 'X'
}]
}
cell2.tag({
cellTagStart: cellTagStart2,
cellTagEnd: cellTagEnd2
});
sheet.resumePaint();
sheet.autoFitColumn(1);
sheet.autoFitRow(1);
sheet.autoFitRow(2);
};
/*code_end*/
</script>
</head>
<body>
<div class="sample-turtorial">
<div id="ss" style="width:100%; height: 420px;border: 1px solid gray;"></div>
</div>
</body>
</html>

复制代码

Dtttax · Dtttax

解决了，是要c1那个地方起始位置要改，

KevinChen · KevinChen

很高兴解决了您的问题，本帖结贴了~

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

[已处理] 自定义单元格位置问题

7 个回复

本帖子中包含更多资源

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证

微信认证勋章