Есть ли способ закрашивать только определенные fabri c .Objects с помощью бесплатного рисования fabri c. js? - PullRequest
Новая
       81

Есть ли способ закрашивать только определенные fabri c .Objects с помощью бесплатного рисования fabri c. js?

1 голос
/ 12 июля 2020

Я разрабатываю приложение для рисования, цель которого - позволить людям рисовать на изображениях. У меня есть рабочий «ластик», который по сути является дубликатом исходного изображения, нарисованного поверх всех слоев с помощью fabric.PatternBrush().

Проблема, с которой я сталкиваюсь, заключается в том, что если кто-то решит использовать ластик несколько раз, затем при увеличении / уменьшении изображения с помощью staticCanvas.zoomToPoint() необходимо преобразовать каждое повторяющееся изображение из каждого ластика, что вызывает очень серьезную задержку.

Итак, есть ли способ, которым я мог бы просто использовать какой-нибудь globalCompositeOperation и белый PencilBru sh, чтобы исправить эту проблему, позволяя ластику стереть все слои контуров, но не слои изображений? ... или что-то в этом роде.

EDIT

Я исправил проблему, создав шаблон вне функции getPatternSr c и не используя getPatternSr c вообще. Вместо этого я использовал PatternBru sh .source = HTMLCanvasElement. Это позволяет исходному изображению быть одним шаблоном, который не нужно восстанавливать для каждого отдельного преобразования.

Другая проблема заключается в том, что я использую машинописный текст, а файл d.ts по умолчанию (и онлайн-документация) не поддерживает покажите PatternBru sh .source как свойство, которое вы можете установить.

Я изначально делал что-то вроде этого (источник для использования getPatternSrc из http://fabricjs.com/freedrawing) ... 

    var eraser = new fabric.PatternBrush(canvas);
    eraser.getPatternSrc = function() {
    let image = document.getElementById('originalImage') as HTMLImageElement,
        patternCanvas = document.createElement('canvas'),
        { naturalWidth: width, naturalHeight: height } = image;
        patternCanvas.width = width;
        patternCanvas.height = height;
        let ctx = patternCanvas.getContext('2d') as CanvasRenderingContext2D;
        let pattern = ctx.createPattern(image, 'no-repeat') as CanvasPattern;
        ctx.fillStyle = pattern;
        ctx.fillRect(0, 0, width, height);
        return patternCanvas;
    };

Когда я должен был это сделать ... 

    let eraser = new fabric.PatternBrush(canvas);
    let image = document.getElementById('originalImage') as HTMLImageElement,
        patternCanvas = document.createElement('canvas'),
        { naturalWidth: width, naturalHeight: height } = image;
        patternCanvas.width = width;
        patternCanvas.height = height;
        let ctx = patternCanvas.getContext('2d') as CanvasRenderingContext2D;
        let pattern = ctx.createPattern(image, 'no-repeat') as CanvasPattern;
        ctx.fillStyle = pattern;
        ctx.fillRect(0, 0, width, height);
    eraser.source = patternCanvas; // main solution & difference
    canvas.freeDrawingBrush = eraser;

К сожалению, документации по этой проблеме не было 0.

...