javascript - Css block 绘制区域

Question

我正在尝试让一个网站正常运行，用户可以在这里画一些东西。除此之外，用户可以在三个屏幕之间滑动。但是不知何故，滑动容器的 css 阻止了我的绘制功能。 html 结构如下所示:

<div class="swiper-container">
<div class="swiper-wrapper" style="lalal">

<div class="swiper-slide red-slide"> </div>

<div class="swiper-slide blue-slide" style="width: 1366px;"> </div>

<div class="swiper-slide orange-slide">

    <div id="areaDraw"><canvas width="450" height="187"></canvas><canvas width="450"  height="187" style="display: block;"></canvas><canvas width="450" height="187"></canvas>        </div>

<input type="text" name="canvascontent" id="canvascontent">
 <input type="button" onclick="sketch.redrawAnimate()" style="" value="Animate">
 <input type="button" onclick="alert(sketch.toDataURL())" style="" value="Redraw">
.....
</div>
</div>
</div>

所以实际上，当我简单地删除带有 class="swiper-container"的第一个 div 时，我的网站就可以正常工作，就像您在这里看到的那样: Working example

但是对于第一个 div 和 class="siwper-container"绘制区域将不起作用，就像您在这里看到的那样: Not working example

我的猜测是swiper容器的css挡住了绘制区域的功能:

.swiper-container {
margin:0 auto;
position:relative;
overflow:hidden;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
 backface-visibility:hidden;
 /* Fix of Webkit flickering */
z-index:1;
}

.swiper-container {
width: 100%;
height: 100%;
color: #fff;
text-align: center;
}

我真的不知道如何解决这个问题!

我在这篇文章前面给你的两个链接包含了整个 css 文件。此外，我还必须补充一点，只有页面上的黄色部分可以用作绘制区域。

Answer 1

orange-slide(绘图区)隐藏在swiper-container后面。

要查看它，您可以:

添加这个

.orange-slide {
    position: absolute;
}

或者删除这个

.swiper-container {
    overflow: hidden;
}

顺便说一句:在 areaDraw 中你有 3 个 canvas 并且可能 javascript 创建了 2 个 canvas。你需要在同一个地方放这么多 canvas 吗？好吧，不完全在同一个地方。似乎我在一个 Canvas 上绘制，然后脚本在另一个 Canvas 上重新绘制它，但不完全位于同一位置，因此图片向左移动。

我必须补充:

canvas {
    left: 0;
}