Предварительно сохраните edit.js файл PNG - PullRequest
Новая
       53

Предварительно сохраните edit.js файл PNG

0 голосов
/ 26 ноября 2018

В настоящее время я разрабатываю интерфейс для клиента, который позволит клиенту создать изображение PNG для дальнейшего использования:

enter image description here

У меня есть вмой холст fabric.js, который я называю оверлеями (тремя белыми квадратами), которые могут быть расположены случайным образом в зависимости от используемого шаблона.

Если пользователь выберет включение новой опции под названием " front overlays "все над этими квадратами будет под ними (я создаю белый Rect в этих оверлеях и помещаю их в верхнюю часть холста).

Прежде, чем редактирование закончится, я могу просто сохранитьPNG с библиотекой FileSaver.js, потому что внутренняя часть этих оверлеев была прозрачной.И теперь, если « front overlays » включен, это пространство белого цвета.

Теперь мне нужно очистить эти оверлеи на ходу перед сохранением.Возможно ли это с fabric.js?Или с библиотекой JS?

1 Ответ

0 голосов
/ 26 ноября 2018

Ответ был намного проще, чем я думал:

если моя новая опция включена, я зацикливаю свои оверлеи и очищаю их с помощью «clearRect», который работает, потому что fabric.js использует canvas ...:) 

    if(frontOverlay) {
        let c = document.getElementById("canvas");
        let ctx = c.getContext("2d");

        for (let i = 0, len = overlaySvg.length; i < len; i++) {
            let stroke = overlaySvg[i].strokeWidth;
            ctx.clearRect(overlaySvg[i].left+stroke, overlaySvg[i].top+stroke, overlaySvg[i].width-stroke, overlaySvg[i].height-stroke);
        }
    }
...