3

我用 html 和 jquery 编写了一个设计编辑器，它允许人们添加文本框、图像等并构建设计。为此，我有一个带有边框的 div 作为画布，用户可以通过单击动态创建可拖动、可调整大小的 div 等的按钮来添加文本或图像，就像在顶部添加图像或任何东西一样Photoshop 或 Illustrator 中的画布，或者喜欢在 MS Word 中添加文本框和图像。

我的问题是，如何在画布边缘附近添加边距指南？我说的是能够看到类似于我们如何在其他编辑软件中选择“显示网格”的线条。（虽然我不想要一个网格，只是边缘线距离边缘半厘米）。

我考虑使用除了边缘附近的边缘线之外完全透明的 PNG 图像，然后在画布上拉伸该图像，$('#content'). 但是，放置在其顶部的每个文本或图像都会覆盖这些线条。我真的不介意这一点，但有没有办法随时显示线条？我不能给它比画布上的项目更高的 z-index，因为它们将无法点击或编辑，因为 PNG 图像会覆盖所有内容。如果我在里面使用一个带边框的 div 也是一样的$('content')，因为它会再次使它后面的东西无法点击。

请记住，边缘线只是一种视觉辅助，用户仍然可以放置超出此线的东西。有任何想法吗？

有没有这样的事情可以做：

#content{ border:1px dotted gray; border-position: -5px; }

这样它就可以将内容 DIV 的边界推到 DIV内部，而不是在边缘？

或者还有其他方法可以添加边距吗？

4

1 回答 1

1

一个简单的想法：你能在画布内放置 4 个 div，一个在顶部，一个在底部，一个在每一侧吗？

每个 div 的宽度（或高度）可能为几个像素（您的边距），并且只有一个朝向画布中心的虚线边框。这样，您可以在这些 div 上使用 z-index 而无需隐藏其下的内容（至少在边距内......）

于 2012-11-04T07:10:48.103 回答