Как масштабировать теневое смещение текста при импорте изображения холста в FabricJS?

I am use FabricJS and Text Shadow offset Not apply as it is when rendering image as display on canvas.

Текст на холсте отображается следующим образом

Введите описание изображения здесь

Но после сохранения изображения на холсте он отображается следующим образом.

Введите описание изображения здесь

Смещение тени уменьшилось.

Моя функция смещения тени следующим образом

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

I thin это происходит с функцией сохранения. Потому что у меня есть использовать множитель и масштабировать изображение при его сохранении. Моя функция сохранения выглядит следующим образом?

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

Я думаю, что мультипликатор не повлиял на теневое смещение. Как я это решаю?

Образец Скрипки

1 ответ

  1. Это похоже на ошибку в ткани.JS, который уже был исправлен в версии 1.6.6. Просто обновите до v1.6.6 и это будет работать хорошо, смотрите здесь: http://codepen.io/anon/pen/aBvpaK

    Они, кажется, изменили конструктор Canvas в v1.6.6 так что теперь он получает ссылку на элемент DOM, как это:

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