Как передать событие мыши на нижний холст в FabricJS - PullRequest
0 голосов
/ 07 октября 2018

Пожалуйста, помогите мне решить эту проблему.

У меня 2 ткани.Холст с одинаковым размером и перекрытием вместе с именем: «editorCanvas-вышеуказанный» и «ditorCanvas-выше».

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

Спасибо!

Multiple Fabric Canvas

var canvasWidth = $(".editor-area").width();
var canvasHeight = $(".editor-area").height();

// set canvas equal size with div
var belowObject = document.getElementById("editorCanvas-below");
$(belowObject).width(canvasWidth);
$(belowObject).height(canvasHeight);

belowCanvas = new fabric.Canvas('editorCanvas-below', {
    backgroundColor: 'white',
    selectionLineWidth: 2,
    width: canvasWidth,
		height: canvasHeight
});

var clipPath = new fabric.Rect({ left: 50, top: 10, width: 400, height: 50 });
belowCanvas.clipPath = clipPath;

 var textBelow = new fabric.Text('Below Object', { left: 50, top: 10 });
belowCanvas.add(textBelow);

// setup above canvas
var aboveObject = document.getElementById("editorCanvas-above");
$(aboveObject).width(canvasWidth);
$(aboveObject).height(canvasHeight);

aboveCanvas = new fabric.Canvas('editorCanvas-above', {
    backgroundColor: 'green',
    selectionLineWidth: 2,
    width: canvasWidth,
		height: canvasHeight
});

var clipPath2 = new fabric.Rect({ left: 50, top: 100, width: 400, height: 50 });
aboveCanvas.clipPath = clipPath2;

 var textAbove = new fabric.Text('Above Object', { left: 50, top: 100 });
aboveCanvas.add(textAbove);
.editor-area {
  position: relative;
    width: 100%;
    height: 100vh;
    background-color: gray;
}

.canvasContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: transparent;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.0/fabric.js"></script>


<div class="editor-area">
  <div id="canvasContainer">
    <canvas id="editorCanvas-below"></canvas>
  </div>
  
  <div class="canvasContainer">
    <canvas id="editorCanvas-above"></canvas>
  </div>
  
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...