Как визуализировать два компонента электронной подписи в одном представлении / странице?

Question

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

Пожалуйста, помогите мне решить проблему.Для справки обратитесь к приведенному ниже коду:

Я попытался установить идентификатор динамически, но затем возникла другая проблема, которую я не могу выяснить.

Для просмотра:

xtype: 'container',
width: 319,
reference: 'signature',
html: '<canvas id="signatureSpaceId">' + 'No Canvas Support' + '</canvas>',
listeners: {
    afterrender: 'onCanvasRendered'
}

Для контроллера:

signData: null,

init: function() {
    let controller = this;
    controller.signData = '';
},

onCanvasRendered: function() {
    var view = this.getView();

    //get the signature pad
    signPad = Ext.getDom("signatureSpaceId");
    if (signPad && signPad.getContext) {
        signPadContext = signPad.getContext('2d');
    }
    if (!signPad || !signPadContext) {
        return;
    }

    // set width and height of signature pad
    signPad.width = 300;
    signPad.height = 230;

    //Mouse events
    signPad.addEventListener('mousedown', this.eventSignPad, false);
    signPad.addEventListener('mousemove', this.eventSignPad, false);
    signPad.addEventListener('mouseup', this.eventSignPad, false);
    signPad.addEventListener('mouseout', this.eventSignPad, false);

    //Touch screen events
    signPad.addEventListener('touchstart', this.eventTouchPad, false);
    signPad.addEventListener('touchmove', this.eventTouchPad, false);
    signPad.addEventListener('touchend', this.eventTouchPad, false);

    sign = new this.signCap();
    signPadContext.lineWidth = 2;
},

signCap: function() {
    var sign = this;
    this.draw = false;
    this.start = false;
    this.mousedown = function(event) {
        signPadContext.beginPath();
        signPadContext.arc(event._x, event._y, 1, 0*Math.PI, 2*Math.PI);
        signPadContext.fill();
        signPadContext.stroke();
        signPadContext.moveTo(event._x, event._y);
        sign.draw = true;
        clearButtonMIB.enable();
        saveButtonMIB.enable();
    };
    this.mousemove = function(event) {
        if (sign.draw) {
            signPadContext.lineTo(event._x, event._y);
            signPadContext.stroke();
        }
    };
    this.mouseup = function(event) {
        if (sign.draw) {
            sign.mousemove(event);
            sign.draw = false;
        }
    };
    this.mouseout = function(event) {
        if (sign.draw) {
            sign.mousemove(event);
            sign.draw = false;
        }
    };
    this.touchstart = function(event) {
        signPadContext.beginPath();
        signPadContext.arc(event._x, event._y, 1, 0*Math.PI, 2*Math.PI);
        signPadContext.fill();
        signPadContext.stroke();
        signPadContext.moveTo(event._x, event._y);
        sign.start = true;
        clearButtonMIB.enable();
        saveButtonMIB.enable();
    };
    this.touchmove = function(event) {
        event.preventDefault();
        if (sign.start) {
            signPadContext.lineTo(event._x, event._y);
            signPadContext.stroke();
        }
    };
    this.touchend = function(event) {
        if (sign.start) {
            sign.touchmove(event);
            sign.start = false;
        }
    };
},

eventSignPad: function(event) {
    if (event.offsetX || event.offsetX === 0) {
        event._x = event.offsetX;
        event._y = event.offsetY;
    } else if (event.layerX || event.layerX === 0) {
        event._x = event.layerX;
        event._y = event.layerY;
    }

    var func = sign[event.type];
    if (func) {
        func(event);
    }
},

eventTouchPad: function(event) {
    var mySign = Ext.get("signatureSpaceId");
    event._x = event.targetTouches[0].pageX - mySign.getX();
    event._y = event.targetTouches[0].pageY - mySign.getY();

    var func = sign[event.type];
    if (func) {
        func(event);
    }
}

Answer 1

Вы можете решить вашу проблему без использования идентификаторов или ссылок.Сначала удалите свойство id из элемента canvas.Затем измените метод контроллера onCanvasRendered следующим образом:

onCanvasRendered: function(canvasContainer) {
    ...
    signPad = canvasContainer.getEl().down('canvas', true);
    ...
}

У вас проблема с получением ссылки на элемент canvas.Не забывайте, что слушатель afterrender запускается с соответствующим контейнером в качестве первого аргумента.Я назвал аргумент canvasContainer.Отсюда, используя метод down Ext.dom.Element, вы можете легко получить ссылку на потомок контейнера canvas element.