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>

所以实际上我的网站工作时，我只是删除第一个div与class =“swiper-container”，就像你在这里看到的： 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 {
    left: 0;
}

Css块绘制区域

1 个答案: