0

我正在尝试让网站工作，用户可以在这里画一些东西。除此之外，用户可以在三个屏幕之间滑动。但不知何故，滑动容器的 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 时就可以工作，就像你在这里看到的那样： 工作示例

但是使用第一个 div 和 class="siwper-container" 绘图区域将无法正常工作，就像您在这里看到的那样： Not working example

我的猜测是swiper容器的css挡住了draw area的功能：

.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 文件。另外我必须补充一点，只有页面上的黄色部分用作绘图区域。

4

1 回答 1

1

orange-slide（绘图区域）隐藏在后面swiper-container。

要查看它，您可以：

添加这个

.orange-slide {
    position: absolute;
}

或删除此

.swiper-container {
    overflow: hidden;
}

顺便说一句：在areaDraw你有 3 个canvas并且可能 javascript 创建了 2canvas个。你canvas在同一个地方需要这么多吗？嗯，不完全在同一个地方。似乎我在一个画布上绘制，脚本在另一个画布上重新绘制它，而不是在同一个地方，所以图片向左移动。

我不得不补充：

canvas {
    left: 0;
}
于 2013-07-18T09:11:40.973 回答