Fabric.js渐变

Question

我正在使用 fabric.js 构建应用程序，用户可以自定义一些设计，我有渐变选项，以便用户可以使用纯色和渐变填充形状，现在，我提供简单4种类型的渐变和用户只能使用两种颜色创建渐变一切正常...但现在我还需要包含一个滑块，以便用户也可以设置从哪里开始分色...但滑块不能正常工作我希望如果滑块在中间，那么两种颜色都是50％。

This is my gradient editing tool

这是我将渐变应用于形状对象的代码

function addGradientauto() {
color1=$('#gdcolorone').val();
color2=$('#gdcolortwo').val();
range=$('#gdrangesld').val();
range=parseFloat(range);
if(GD_type==null) {
    type=1;
}
else {
    type=GD_type;
}
rgb=gradhextorgba(color2);
rgba=rgb.replace(')', ', 0)').replace('rgb', 'rgba');
rgba=rgba.replace(";", "");
if ($('#gradientalpha').is(':checked')) {
    color2=rgba;
}
obj=canvas.getActiveObject();
if (type==1) {
    obj.setGradient('fill', {
        type: 'linear', x1: 0, y1: obj.height, x2: 0, y2: obj.height / 4, colorStops: {
            range: color1, 1: color2
        }
    }
    );
}
else if(type==2) {
    obj.setGradient('fill', {
        type: 'linear', x1: obj.width, y1: 0, x2: obj.width / 4, y2: 0, colorStops: {
            range: color1, 1: color2
        }
    }
    );
}
else if (type==3) {
    obj.setGradient('fill', {
        type: 'linear', x1: 0, y1: obj.height / 4, x2: 0, y2: obj.height, colorStops: {
            range: color1, 1: color2
        }
    }
    );
}
else if (type==4) {
    obj.setGradient('fill', {
        type: 'linear', x1: obj.width / 4, y1: 0, x2: obj.width, y2: 0, colorStops: {
            range: color1, 1: color2
        }
    }
    );
}
canvas.renderAll();
save();

}