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

Я использую FabricJS, и смещение Text Shadow не применяется, как при рендеринге изображения как отображения на холсте.

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

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

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

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

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

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

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

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

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

1 ответ

Похоже, ошибка в Fabric.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'));
Другие вопросы по тегам