javascript - 添加自定义单元格图像/叠加水印

Question

我希望能够使用挂锁图标为 spreadJs 中的单元格添加水印。我希望它始终位于单元格的右中心，如下图所示。

这可能吗？

我可以看到下面的链接做了类似的事情，但它跨越了整个单元格，我真的不想要这样，因为单元格的宽度和高度可以是任何宽度和高度，所以这看起来很奇怪。

我希望单元格能够正常运行并保留所有现有样式，而不是在需要的挂锁单元格上添加水印。

https://help.grapecity.com/spread/SpreadJSWeb/backimage.html

更新

我刚刚遇到以下内容，我认为它有可能使用自定义单元格进行工作。有没有人有一个他们可以分享的简单示例，它所做的只是将自定义图标添加到现有单元格？

https://help.grapecity.com/spread/SpreadJSWeb/cellcustom.html

Answer 1

您可以如上所述创建自定义 CellType。

定义细胞类型:

function IconCellType() {
    }
    IconCellType.prototype = new GC.Spread.Sheets.CellTypes.Text();
    IconCellType.prototype.paint = function (ctx, value, x, y, w, h, style, context) {
        if (!ctx) {
            return;
        }

        GC.Spread.Sheets.CellTypes.Text.prototype.paint.call(this, ctx, value, x, y, w, h, style, context);

        ctx.save();

        // draw inside the cell's boundary
        ctx.rect(x, y, w, h);
        ctx.clip();

        let img = document.getElementById('lock');
        ctx.drawImage(img, x+w-20, y+h/2-10, 20, 20);

        ctx.restore();
    }

然后设置celltype:

var sheet = workbook.getActiveSheet();
sheet.getCell(1, 1).cellType(new IconCellType());

另请注意，您添加的文档链接适用于 SpreadJS 版本 9。转到 the v12 Documentation获取最新的文档。