如何使用 jsPsych 心理物理学插件中的“手动”属性调用函数来绘制刺激？

问题描述

我一直在尝试使用“手动”对象属性来绘制光栅刺激。我已经编写了一个函数来使用 drawFunc 绘制刺激。但是，我想在每次试验中使用 context.filter 更改一个输入参数，即对比度级别。我想在刺激变量之外定义函数和输入参数，并通过提供相关参数来调用绘制补丁的函数。但是，这似乎不起作用。我每次都被迫定义函数。有没有办法解决这个问题？

var Left0 = {
    obj_type: 'manual',// means a rectangle
    startX: 550,// location in the canvas
    startY: 325,endX: 700,endY: 325,width: 300,// of the rectangle
    height: 200,horiz_pix_sec: 30,show_start_time: 0,motion_start_time: 2000,drawFunc() {
        context = jsPsych.currentTrial().context;
        var pos = 0;
        const gradLength = 100;
        const my_gradient  = context.createLinearGradient(400,600,0);
        const bands = 10;
        const colors = ["#000","#FFF"];
        const stops = bands * colors.length;
        while (pos <= stops) {
            my_gradient.addColorStop(pos / stops,colors[pos % colors.length]);
            pos++;
        }
        context.filter = 'contrast('+ CL1 +')';
        context.fillStyle = my_gradient;
        context.fillRect(500,325,gradLength,gradLength);
        context.stroke();
    }
};

//相反，我只想像这样定义一次函数。

function drawFunc (x1,y1,x2,y2,CL1,x,y) {
    context = jsPsych.currentTrial().context;
    var pos = 0;
    const gradLength = 100;
    const my_gradient  = context.createLinearGradient(x1,y2);
    const bands = 10;
    const colors = ["#000","#FFF"];
    const stops = bands * colors.length;
    while (pos <= stops) {
        my_gradient.addColorStop(pos / stops,colors[pos % colors.length]);
        pos++;
    }
    context.filter = 'contrast('+ CL1 +')';
    context.fillStyle = my_gradient;
    context.fillRect(x,y,gradLength);
    context.stroke();
}

//然后稍后调用

var Left0 = {
    obj_type: 'manual',drawFunc: drawFunc(400,0.5,500,325)
} 

请帮助解决此问题。

解决方法

您可以将 drawFunc(...) 包装在匿名函数中：

var Left0 = {
    obj_type: 'manual',// means a rectangle
    startX: 550,// location in the canvas
    startY: 325,endX: 700,endY: 325,width: 300,// of the rectangle
    height: 200,horiz_pix_sec: 30,show_start_time: 0,motion_start_time: 2000,drawFunc: function(){
        drawFunc(400,600,0.5,500,325)
    }
}

这是有效的，因为 drawFunc 参数需要一个函数。当您使用 drawFunc(...) 而不将其包装在匿名函数中时，参数是函数的返回值，而不是函数本身。