画布“目的地输出”的等效项对于普通的 html 元素？

发布于 2024-11-02 10:26:07 字数 2271 浏览 0 评论 0原文

我已经搜索了很多，我相当确定这不存在，我主要是想确认这一点。我想做的是有一个 div 使其后面的所有内容都透明 - 类似于画布的目的地输出合成选项的作用。

为了了解更多背景信息，情况如下。我在 QtWebKit 覆盖层后面绘制了一个 OpenGL 窗口。 OpenGL 窗口有多个可以重叠的“子窗口”，这些“子窗口”使用 WebKit 覆盖层进行装饰。但是，当它们重叠时，由于存在两层系统，重叠窗口的装饰不会被遮挡。

备份选项只是为此使用全窗口画布（窗口修剪相当简单），但最好不要这样做。请注意，因为这是一个嵌入式 WebKit 实例，所以它不需要跨浏览器，并且特定于 WebKit（或 QtWebKit）的东西就可以了。

编辑

我无法在 24 小时内回答我自己的问题，所以这是我的解决方案，感谢 @Kevin Peno

以下是我正在寻找的简化版本。它创建了两个“可见”和“不可见”的 div。 “invisible”掩盖了“visible”，以便它显示其后面的背景图像而不是“visible”div。

真正的键是 -webkit-mask-image (http://www.webkit.org /blog/181/css-masks/）和-webkit-canvas（http://www.webkit.org/blog/176/css-canvas-drawing/），因此这只适用于基于 webkit 的浏览器。

HTML:


<html>
<body>
  <div id="visible"/>
  <div id="invisible"/>
</body>
</html>

JavaScript:


function updateMask()
{
    var w = $("#visible").width();
    var h = $("#visible").height();
    var context = document.getCSSCanvasContext("2d", "mask", w, h);
    context.fillStyle = "rgba(255, 255, 255, 1.0)";
    context.fillRect(0, 0, w, h);

    var my_off = $("#visible").offset();
    var inv_off = $("#invisible").offset();
    var rel_left = inv_off.left - my_off.left;
    var rel_top = inv_off.top - my_off.top;
    context.clearRect(rel_left, rel_top, $("#invisible").width(), $("#invisible").height());
}

$(window).ready(function()
{
   updateMask();


   $("#invisible").draggable();
   $("#invisible").bind("drag", function(e, ui)
       {
           console.log("drag");
           updateMask();
           e.preventDefault();
       });
});

CSS:


body
{
  background-image: url(http://www.google.com/images/logos/ps_logo2.png);
}

#visible
{
  position: absolute;
  background-color: red;
  z-index: 0;
  width: 1000px;
  height: 1000px;
  top: 0;
  left: 0;
  -webkit-mask-image: -webkit-canvas(mask);
}

#invisible
{
  position: absolute;
  z-index: 1;
  width: 100px;
  height: 100px;
  top: 50px;
  left: 50px;
  cursor: move;
  background-color: rgba(0, 255, 0, 0.5);
}

原文

I've searched around quite a bit and I'm fairly certain this doesn't exist, I'm mainly looking to confirm that. What I'd like to do is have a div that makes everything behind it transparent -- similar to what canvas' destination-out compositing option does.

For a little more context, here's the situation. I have an OpenGL window drawing behind a QtWebKit overlay. The OpenGL window has multiple "subwindows" that can be overlapping, which are decorated using the WebKit overlay. When they overlap though, because of this two layer system, the decorations for the overlapped windows do not get occluded.

The backup option is just to use a full-window canvas for this (the window trimmings are fairly simple), but it would be nicer not to. Note that because this is an embedded WebKit instance, it doesn't need to be cross-browser, and something WebKit (or QtWebKit) specific is fine.

EDIT

I can't answer my own question within 24 hours, so here's my solution, with thanks to @Kevin Peno

The following is a simplified version of what I was looking for. It creates two divs "visible" and "invisible". "invisible" masks off "visible" so that it displays the background image behind it instead of the "visible" div.

The real keys are -webkit-mask-image (http://www.webkit.org/blog/181/css-masks/) and -webkit-canvas (http://www.webkit.org/blog/176/css-canvas-drawing/), so this will only work with webkit-based browsers.

HTML:


<html>
<body>
  <div id="visible"/>
  <div id="invisible"/>
</body>
</html>

JavaScript:


function updateMask()
{
    var w = $("#visible").width();
    var h = $("#visible").height();
    var context = document.getCSSCanvasContext("2d", "mask", w, h);
    context.fillStyle = "rgba(255, 255, 255, 1.0)";
    context.fillRect(0, 0, w, h);

    var my_off = $("#visible").offset();
    var inv_off = $("#invisible").offset();
    var rel_left = inv_off.left - my_off.left;
    var rel_top = inv_off.top - my_off.top;
    context.clearRect(rel_left, rel_top, $("#invisible").width(), $("#invisible").height());
}

$(window).ready(function()
{
   updateMask();


   $("#invisible").draggable();
   $("#invisible").bind("drag", function(e, ui)
       {
           console.log("drag");
           updateMask();
           e.preventDefault();
       });
});

CSS:


body
{
  background-image: url(http://www.google.com/images/logos/ps_logo2.png);
}

#visible
{
  position: absolute;
  background-color: red;
  z-index: 0;
  width: 1000px;
  height: 1000px;
  top: 0;
  left: 0;
  -webkit-mask-image: -webkit-canvas(mask);
}

#invisible
{
  position: absolute;
  z-index: 1;
  width: 100px;
  height: 100px;
  top: 50px;
  left: 50px;
  cursor: move;
  background-color: rgba(0, 255, 0, 0.5);
}

分享到QQ

分享到微博