Добавить пользовательское изображение ячейки / наложение водяного знака

Question

Я хотел бы иметь возможность пометить ячейку водяного знака в значке замка.Я хочу, чтобы это всегда было в правильном центре ячейки, как показано на рисунке ниже.

Возможно ли это?

Я вижу, что ссылка ниже делает что-то похожее, но это растянуто по всей ячейке, которую я не хочу, так как ширина ячейкии высота может быть любой ширины и высоты, так что это будет выглядеть странно.

Я бы хотел, чтобы ячейка функционировала как обычно и сохраняла все существующие стили, за исключением наличия водяного знака над ячейкой замка, где это необходимо.

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

ОБНОВЛЕНИЕ

Я только что натолкнулся на следующее, которое, я думаю, потенциально может работать с использованием пользовательской ячейки.У кого-нибудь есть простой пример, которым он может поделиться, когда все, что он делает, - это добавление пользовательского значка в существующую ячейку?

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

Answer 1

Вы можете создать собственный тип ячейки, как указано выше.

Определите тип ячейки:

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>

Оказывает