Javascript 如何在单个视图/页面中呈现两个电子签名组件？

我正在尝试创建一个电子签名板组件，它应该是可重用的。 如果我在任何页面/视图中使用该组件一次，它工作正常。 当我在一个页面/视图中使用多个组件时，问题就来了。我发现canvas组件存在ID冲突，因为最新渲染的组件只能工作

请帮我解决这个问题。 参考以下代码：

我试图动态地放置ID，但后来出现了一些我无法解决的问题

查看：

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

---

您可以在不使用ID或引用的情况下解决问题。首先从

canvas

元素中删除

id

属性。然后调整

onCanvasRendered

控制器方法，如下所示：

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

您的问题是获取对canvas元素的引用。不要忘记，

afterrender

侦听器将以相应的容器作为第一个参数启动。我已经调用了参数

canvasContainer

。从这里，使用

Ext.dom.Element

方法，您可以轻松地获得对容器的后代

canvas

元素的引用