javascript - 在 FabricJS 中导入画布图像时如何缩放文本阴影偏移？

Question

我正在使用 FabricJS 和文本阴影偏移，因为它在将图像渲染为画布上的显示时不适用。

画布上的文字显示如下

但是在保存画布图像后，它显示如下。

阴影偏移减少了。

我的阴影偏移功能如下

function textShadowOffsetChange() {
    var val = $('#text-shadow-offset-slider').slider('option','value');
    if(document.getElementById("text-shadow-set").checked && isText()) {
        currentElement.setShadow({
            color: '#000',
            blur: 5,
            offsetX: val,
            offsetY: val
        });
        canvas.renderAll();
    }
}

我认为这与保存功能有关。因为我在保存时使用了乘数并缩放图像。我的保存功能如下？

var MaskImg = canvas.toDataURL({
       format: 'png',
       multiplier: multi,
       left: (canvas.width - maskWidth)/2,
       height: maskOriHeight/multi,
       width: maskOriWidth/multi
});

我认为乘数不受阴影偏移的影响。我如何解决这个问题？

样品小提琴

Answer 1

It looks like a bug in Fabric.JS which has already been fixed in version 1.6.6. Just update to v1.6.6 and it will work fine, see here: http://codepen.io/anon/pen/aBvpaK

They seem to have changed the Canvas constructor in v1.6.6 so that now it gets a reference to the DOM element like this:

var canvas = new fabric.Canvas(document.getElementById('c'));