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();
    }

然后设置细胞类型：

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

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

Answer 2

SpreadJs 支持通过以下示例返回给我，该示例​​适合我的需要，以防其他人为 V12.7

Javascript

var spread;
var sheet;
$(document).ready(function () {
    spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 });
    sheet = spread.getActiveSheet();

    sheet.setColumnCount(5);
    sheet.setRowCount(5);
    sheet.suspendPaint();
    sheet.getCell(0, 0).text("This is Circle text.").cellType(new IconCellType(document.getElementById('icon-lock')));

    sheet.getCell(2, 0).text("Orange").cellType(new IconCellType(document.getElementById('icon-lock')));
    sheet.resumePaint();
});

function IconCellType(img) {
    this.typeName = "IconCellType";
    this.img = img;
}
IconCellType.prototype = new GC.Spread.Sheets.CellTypes.Base();
// EllipsisTextCellType.prototype
IconCellType.prototype.paint = function (ctx, value, x, y, w, h, style, context) {            
    if (!ctx) {
        return;
    }
    ctx.save();

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

    // draw text
    GC.Spread.Sheets.CellTypes.Base.prototype.paint.apply(this, [ctx, value, x+20, y, w-20, h, style, context]);
    ctx.beginPath();
    // let img = document.getElementById('icon-lock');
    ctx.drawImage(this.img, x + 2, y + 2, 16, 16);
    ctx.fill();
    ctx.stroke();

    ctx.restore();
};

HTML

<img id="icon-lock" style="display:none"  src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE4LjEuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTAgNTAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iNTBweCIgaGVpZ2h0PSI1MHB4Ij4KPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNOSw0OWMtMS4xLDAtMi0wLjktMi0yVjIzICBjMC0xLjEsMC45LTIsMi0yaDMyYzEuMSwwLDIsMC45LDIsMnYyNGMwLDEuMS0wLjksMi0yLDJIOXoiLz4KPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMzYsMjFjMCwwLDAtNC45LDAtNiAgYzAtNi4xLTQuOS0xMS0xMS0xMWMtNi4xLDAtMTEsNC45LTExLDExYzAsMS4xLDAsNiwwLDYiLz4KPHBhdGggZD0iTTI4LDMzYzAtMS43LTEuMy0zLTMtM2MtMS43LDAtMywxLjMtMywzYzAsMC45LDAuNCwxLjcsMSwyLjJWMzhjMCwxLjEsMC45LDIsMiwyYzEuMSwwLDItMC45LDItMnYtMi44ICBDMjcuNiwzNC43LDI4LDMzLjksMjgsMzN6Ii8+Cjwvc3ZnPgo="/>
<h1>SpreadJS</h1>
<div id="ss" style="width: 500px; height: 400px; border: 1px solid gray"></div>

渲染