Как вывести события-указатели на объекты в стеке слоев?

Question

fabric.Object.prototype.objectCaching = false;
var canvasBackground = new fabric.Canvas('backgroundcanvas');
var canvas = new fabric.Canvas('paintcanvas');
var canvas_2 = new fabric.Canvas('paintcanvas_2');
var canvas_3 = new fabric.Canvas('paintcanvas_3');
var canvas_4 = new fabric.Canvas('paintcanvas_4');


fabric.Image.fromURL('https://dev.loversloc.com/media/collection/templates/confetti_easy_01.png', function(myImg) {
 var img1 = myImg.set({ 
    top: 0,
    left: 0,
    scaleX: canvas.width/myImg.width,
    scaleY: canvas.height/myImg.height,
		selectable : false,
    evented: false
 });
 canvas.add(img1); 
});

fabric.Image.fromURL('https://beautymode.fr/wp-content/uploads/2017/09/636096742373357996142416222_fashion-beauty-tips.jpg', function(myImg) {
 var img1 = myImg.set({ 
    top: 20,
    left: 20,
    width: 300,
    height: 300,
		globalCompositeOperation: 'source-atop'
 });
 canvas.add(img1);
});


fabric.Image.fromURL('https://dev.loversloc.com/media/collection/templates/confetti_easy_02.png', function(myImg) {
 var img1 = myImg.set({ 
    top: 0,
    left: 0,
    scaleX: canvas.width/myImg.width,
    scaleY: canvas.height/myImg.height,
		selectable : false,
    evented: false
 });
 canvas_2.add(img1); 
});

fabric.Image.fromURL('https://beautymode.fr/wp-content/uploads/2017/09/636096742373357996142416222_fashion-beauty-tips.jpg', function(myImg) {
 var img1 = myImg.set({ 
    top: 20,
    left: 420,
    width: 300,
    height: 300,
		globalCompositeOperation: 'source-atop'
 });
 canvas_2.add(img1);
});


fabric.Image.fromURL('https://dev.loversloc.com/media/collection/templates/confetti_easy_03.png', function(myImg) {
 var img1 = myImg.set({ 
    top: 0,
    left: 0,
    scaleX: canvas.width/myImg.width,
    scaleY: canvas.height/myImg.height,
		selectable : false,
    evented: false
 });
 canvas_3.add(img1); 
});

fabric.Image.fromURL('https://beautymode.fr/wp-content/uploads/2017/09/636096742373357996142416222_fashion-beauty-tips.jpg', function(myImg) {
 var img1 = myImg.set({ 
    top: 220,
    left: 220,
    width: 300,
    height: 300,
		globalCompositeOperation: 'source-atop'
 });
 canvas_3.add(img1);
});


fabric.Image.fromURL('https://dev.loversloc.com/media/collection/templates/confetti_easy_04.png', function(myImg) {
 var img1 = myImg.set({ 
    top: 0,
    left: 0,
    scaleX: canvas.width/myImg.width,
    scaleY: canvas.height/myImg.height,
		selectable : false,
    evented: false
 });
 canvas_4.add(img1); 
});

fabric.Image.fromURL('https://beautymode.fr/wp-content/uploads/2017/09/636096742373357996142416222_fashion-beauty-tips.jpg', function(myImg) {
 var img1 = myImg.set({ 
    top: 420,
    left: 420,
    width: 300,
    height: 300,
		globalCompositeOperation: 'source-atop'
 });
 canvas_4.add(img1);
});


fabric.Image.fromURL('https://dev.loversloc.com/media/collection/templates/confetti_easy.png', function(myImg) {
 var img1 = myImg.set({ 
 		globalCompositeOperation: 'destination-over',
    top: 0,
    left: 0,
    scaleX: canvasBackground.width/myImg.width,
    scaleY: canvasBackground.height/myImg.height,    
		selectable : false,
    evented: false
 });
 canvasBackground.add(img1); 
});


var $con_1 = $('.paintcanvas');
var $con_2 = $('.paintcanvas_2');
var $con_3 = $('.paintcanvas_3');
var $con_4 = $('.paintcanvas_4');

canvas.on({
    'mouse:move': function(e) {
      if (e.target) {
        $con_2.css('pointer-events',/*!*/'none');
      } else {
        $con_2.css('pointer-events',/*!*/'all');
      }
    },
});

canvas_2.on({
    'mouse:move': function(e) {
      if (e.target) {
        $con_2.css('pointer-events',/*!*/'all');
      } else {
        $con_2.css('pointer-events',/*!*/'none');
      }
    }
});

canvas_3.on({
    'mouse:move': function(e) {
      if (e.target) {
        $con_4.css('pointer-events',/*!*/'none');
      } else {
        $con_4.css('pointer-events',/*!*/'all');
      }
    }
});

canvas_4.on({
    'mouse:move': function(e) {
      if (e.target) {
        $con_4.css('pointer-events',/*!*/'all');
      } else {
        $con_4.css('pointer-events',/*!*/'none');
      }
    }
});

.parent {
  position: relative;
  background: black;
}


.backgroundcanvas {
  position: absolute;
  left: 0;
  top: 0;
}

.paintcanvas, .paintcanvas_2, .paintcanvas_3, .paintcanvas_4 {
  position: absolute;
  left: 0px;
  top: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<div class="parent">
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
  <div class="backgroundcanvas">
    <canvas id="backgroundcanvas"  width="800" height="800"></canvas>  
  </div>
  <div class="paintcanvas">
    <canvas id="paintcanvas" width="800" height="800" ></canvas>  
  </div>
  <div class="paintcanvas_2">
    <canvas id="paintcanvas_2" width="800" height="800" ></canvas>  
  </div>
  <div class="paintcanvas_3">
    <canvas id="paintcanvas_3" width="800" height="800" ></canvas>  
  </div>
  <div class="paintcanvas_4">
    <canvas id="paintcanvas_4" width="800" height="800" ></canvas>  
  </div>
</div>

Мне удалось создать несколько замаскированных элементов холста в сложенном стеганом полотне. Каждый из них хранится в обработанной маске globalCompositeOperation, в которую пользователь должен иметь возможность загрузить фотографию.

Теперь каждый загруженный элемент изображения должен быть перемещаемым / масштабируемым на каждом холсте. Я пытаюсь сделать это с помощью всплывающих событий указателя.

Я сделал это, потому что вы не можете маскировать несколько перекрывающихся элементов на одном холсте независимо (маскировка влияет на все пиксели), а svg невозможны из-за базового дизайна и производительности. Поскольку в этой комбинации не работает пункт назначения поверх, фон был исключен на статическом холсте.

С двумя слоями / полотнами это можно решить следующим образом:

var $con_1 = $('.paintcanvas');
var $con_2 = $('.paintcanvas_2');

canvas_1.on({
    'mouse:move': function(e) {
      if (e.target) {
        $con_1.css('pointer-events',/*!*/'all');
      } else {
        $con_1.css('pointer-events',/*!*/'none');
      }
    }
});

canvas_2.on({
    'mouse:move': function(e) {
      if (e.target) {
        $con_2.css('pointer-events',/*!*/'none');
      } else {
        $con_2.css('pointer-events',/*!*/'all');
      }
    }
});

Однако мне нужны четыре слоя, и я не понимаю, как всплыть события.

Я создал скрипку для этого здесь (с содержанием Canvas 3 + 4, редактируемым): https://jsfiddle.net/Metamagikum/2Lpwchzd/199/

Answer 1

Я решил это так.Это работает, но все еще ищет лучшее решение.

var $con_1 = $('.paintcanvas');
var $con_2 = $('.paintcanvas_2');
var $con_3 = $('.paintcanvas_3');
var $con_4 = $('.paintcanvas_4');

canvas.on({
    'mouse:move': function(e) {
      if (e.target) {
        $con_1.css('pointer-events',/*!*/'all');
      } else {
        $con_2.css('pointer-events',/*!*/'all');
        $con_3.css('pointer-events',/*!*/'all');
        $con_4.css('pointer-events',/*!*/'all');
      }
    },
});

canvas_2.on({
    'mouse:move': function(e) {
      if (e.target) {
        $con_2.css('pointer-events',/*!*/'all');
      } else {
        $con_2.css('pointer-events',/*!*/'none');
      }
    }
});

canvas_3.on({
    'mouse:move': function(e) {
      if (e.target) {
        $con_3.css('pointer-events',/*!*/'all');
      } else {
        $con_3.css('pointer-events',/*!*/'none');
      }
    }
});

canvas_4.on({
    'mouse:move': function(e) {
      if (e.target) {
        $con_4.css('pointer-events',/*!*/'all');
      } else {
        $con_4.css('pointer-events',/*!*/'none');
      }
    }
});