未捕获的TypeError：闪电组件中的非对象调用了Reflect.defineProperty

Question

在19年春季测试沙箱之后，我们将讨论数字签名组件中的以下问题。 仅适用于ipad和平板电脑设备

未捕获的TypeError：非对象上调用了Reflect.defineProperty / 组件 /

<aura:component  implements="force:appHostable">

    <aura:handler name="render" value="{!this}" action="{!c.Init}"/>

    <div style="text-align: center;">
        <canvas aura:id="can" style="border:2px solid #ddd;background: transparent;"></canvas>
    </div>
    <div style="text-align: center;margin: 7px;">
        <button class="slds-button slds-button_brand" onclick="{!c.erase}">Clear</button>
        <button class="slds-button slds-button_brand" onclick="{!c.save}">Save</button>
    </div>
</aura:component>

/ 控制器 /

({
    Init : function(component, event, helper) {
        helper.doInit(component, event, helper);
    },
    erase:function(component, event, helper){
        helper.eraseHelper(component, event, helper);
    },
    save:function(component, event, helper){
        helper.saveHelper(component, event, helper);
    },
})

/ 助手 /

({
doInit : function(component, event, helper) {
        var canvas, ctx, flag = false,
        prevX = 0,
        currX = 0,
        prevY = 0,
        currY = 0,
        dot_flag = false;

    var x = "black",
        y = 2,
        w,h;
    canvas=component.find('can').getElement();
    var ratio = Math.max(window.devicePixelRatio || 1, 1);
    w = canvas.width*ratio;
    h = canvas.height*ratio;
    ctx = canvas.getContext("2d");
    console.log('ctx:='+ctx);

    canvas.addEventListener("mousemove", function (e) {
        findxy('move', e)
    }, false);
    canvas.addEventListener("mousedown", function (e) {
        findxy('down', e)
    }, false);
    canvas.addEventListener("mouseup", function (e) {
        findxy('up', e)
    }, false);
    canvas.addEventListener("mouseout", function (e) {
        findxy('out', e)
    }, false);
    // Set up touch events for mobile, etc
    canvas.addEventListener("touchstart", function (e) {
        var touch = e.touches[0];
        var mouseEvent = new MouseEvent("mousedown", {
            clientX: touch.clientX,
            clientY: touch.clientY
        });
        canvas.dispatchEvent(mouseEvent);
         e.preventDefault();
    }, false);
    canvas.addEventListener("touchend", function (e) {
        var mouseEvent = new MouseEvent("mouseup", {});
        canvas.dispatchEvent(mouseEvent);
    }, false);
    canvas.addEventListener("touchmove", function (e) {
        var touch = e.touches[0];
        var mouseEvent = new MouseEvent("mousemove", {
            clientX: touch.clientX,
            clientY: touch.clientY
        });
        canvas.dispatchEvent(mouseEvent);
         e.preventDefault();

    }, false);

    // Get the position of a touch relative to the canvas
    function getTouchPos(canvasDom, touchEvent) {
        var rect = canvasDom.getBoundingClientRect();
        return {
            x: touchEvent.touches[0].clientX - rect.left,
            y: touchEvent.touches[0].clientY - rect.top
        };
    }

    function findxy(res, e){
        const rect = canvas.getBoundingClientRect();
        if (res == 'down') {
            prevX = currX;
            prevY = currY;
            currX = e.clientX - rect.left ;
            currY = e.clientY -  rect.top;

            flag = true;
            dot_flag = true;
            if (dot_flag) {
                ctx.beginPath();
                ctx.fillStyle = x;
                ctx.fillRect(currX, currY, 2, 2);
                ctx.closePath();
                dot_flag = false;
            }
        }
        if (res == 'up' || res == "out") {
            flag = false;
        }
        if (res == 'move') {
            if (flag) {
                prevX = currX;
                prevY = currY;
                currX = e.clientX -  rect.left;
                currY = e.clientY - rect.top;
                draw(component,ctx);
            }
        }
    }
    function draw() {
        ctx.beginPath();
        ctx.moveTo(prevX, prevY);
        ctx.lineTo(currX, currY);
        ctx.strokeStyle = x;
        ctx.lineWidth = y;
        ctx.stroke();
        ctx.closePath();
    }

},
eraseHelper: function(component, event, helper){
    var m = confirm("Want to clear");
    if (m) {
        var canvas=component.find('can').getElement();
        var ctx = canvas.getContext("2d");
        var w = canvas.width;
        var h = canvas.height;
        ctx.clearRect(0, 0, w, h);
   }
},
saveHelper:function(component, event, helper){
    var pad=component.find('can').getElement();
    var dataUrl = pad.toDataURL();
    console.log('dataUrl:='+dataUrl);
    var strDataURI=dataUrl.replace(/^data:image\/(png|jpg);base64,/, "");
    alert(strDataURI);

}

}）

一些发现是触摸事件上的问题 var touch = e.touches [0]; 解决上述问题的任何帮助 对于上述代码，请确保您所在的组织的春季版本为19

进行注册，请使用

https://www.salesforce.com/form/signup/prerelease-spring19/。