Пожалуйста, помогите мне решить эту проблему.
У меня 2 ткани.Холст с одинаковым размером и перекрытием вместе с именем: «editorCanvas-вышеуказанный» и «ditorCanvas-выше».
Мой вопрос заключается в том, как передать событие мыши нижнему холсту, когда мышь не находится внутри прямоугольника над клипом выше холста.Поэтому пользователь позволяет выбирать и взаимодействовать с объектами на нижнем холсте.
Спасибо!
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>