HTML/CSS 在 CSS 掩码中绘制方形窗口答案

【问题标题】：HTML/CSS drawing a square window in a css maskHTML/CSS 在 CSS 掩码中绘制方形窗口
【发布时间】：2010-09-17 18:43:43
【问题描述】：

所以我有一个图像网格（地图图块），并使用绝对定位的 div 在其上绘制了一个半透明蒙版，宽度和高度设置为 100%。

我现在希望用户能够在蒙版上绘制一个矩形，鼠标使用鼠标向下、拖动、鼠标向上。该矩形将随着鼠标的移动而动态绘制，并且该矩形就像一个窗口，通过掩码显示下方的地图图块，没有半透明。

我目前正在考虑使用 5 个 div - 一个用于窗口，4 个用于在我拖动鼠标时使用 javascript 调整大小的蒙版。有谁知道更简单的方法来做到这一点？我正在使用 jquery，我需要向上支持 IE7，因此只有 html5 的技术已经淘汰。

干杯，

科尔姆

【问题讨论】：

【解决方案1】：

我认为jQuery Crop plugin 完全符合您的需求（演示here）。

也许可以从中分出那部分。

【讨论】：

【解决方案2】：

您应该改用 SVG 画布。有一个 SVG js 库，适合初学者： http://raphaeljs.com/，看看吧

请注意这与 HTML5 无关（请不要与 HTML5 画布混用，这是 SVG）

【讨论】：

+1 是个好建议，但请注意 SVG 和 Canvas 不是一回事。
这些是 HTML5 技术，很难让它在 IE 上快速工作。 Quote: “我正在使用jquery，我需要向上支持IE7，所以只有html5的技术已经出来了。”
我很想使用 SVG，但不幸的是，正如 elusive 所提到的，必须支持 IE 才能实现这个想法......
说真的，在你取消这个建议之前尝试一下，它确实支持 IE（甚至 IE6）因为我正在使用它....它与 HTML5 无关
IE6 不支持 SVG。您可能正在使用在 IE 浏览器中使用 VML 并在其他支持它的浏览器中使用 SVG 的库。