Стирание линий на ткани JS - PullRequest
Новая
       61

Стирание линий на ткани JS

0 голосов
/ 13 мая 2019

Я использую FabricJS, чтобы рисовать и стирать линии поверх изображения.Я сделал 2 слоя для холста, с нижним слоем в качестве фонового изображения и верхним слоем для эскизов.Всякий раз, когда я стираю маркировку, если я использую freeDrawingBrush.color = white или любой другой базовый цвет, он стирается.Однако, если я использую прозрачный 'rgba (0,0,0,0)', как цвет freeDrawingBrush, маркировка не стирается.

Как стереть маркировку на верхнем слое с помощьюпрозрачный как фон пути, созданного при стирании?

<div style="position: relative;">
    <canvas id="my-canvas" width="800" height="400" style="position: absolute; left: 0; top: 0; z-index: 1;background-color:rgba(0,0,0,0)"> </canvas> 
    <canvas id="layer3" width="800" height="400" style="position: absolute; left: 0; top: 0; z-index: 0;background-image:url(http://gallery.nanfa.org/d/52271-3/DSC_7537.jpg);"></canvas>
</div>

<script>
 canvas = window._canvas = new fabric.Canvas('layer1');
 canvas.isDrawingMode= 1;
 canvas.freeDrawingBrush.width = 10;
 canvas.renderAll();

//eraser function
 function eraser(){
  canvas.freeDrawingBrush.color = "white"; // if "rgba(0,0,0,0)", not work
  canvas.on('path:created', function (opt) {
      opt.path.globalCompositeOperation = 'destination-out';
      canvas.renderAll();
  });
}

//drawing function
function draw(){
    canvas.freeDrawingBrush.color = "black";
    canvas.on('path:created', function (opt) {
        opt.path.globalCompositeOperation = 'source-over';
        canvas.renderAll();
    });
}

</script>

Я использую fabricjs на html https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js

Любая помощь будет очень признательна.Заранее спасибо!

...