Эквивалент canvas "destination-out" для обычного html-элемента?

#html #canvas #webkit #qtwebkit

#HTML #canvas #webkit #qtwebkit

Вопрос:

Я довольно долго искал, и я совершенно уверен, что этого не существует, я в основном хочу это подтвердить. Что я хотел бы сделать, так это иметь div, который делает все, что за ним, прозрачным — аналогично тому, что делает опция компоновки canvas «destination-out».

Для немного большего контекста, вот ситуация. У меня есть окно OpenGL, нарисованное за наложением QtWebKit. Окно OpenGL имеет несколько «подокон», которые могут перекрываться, которые оформлены с использованием наложения WebKit. Однако, когда они перекрываются, из-за этой двухслойной системы оформление перекрывающихся окон не закрывается.

Вариант резервного копирования — просто использовать для этого полноэкранный canvas (оформление окна довольно простое), но было бы лучше этого не делать. Обратите внимание, что, поскольку это встроенный экземпляр WebKit, он не обязательно должен быть кроссбраузерным, и подойдет что-то специфичное для WebKit (или QtWebKit).

Редактировать

Я не могу ответить на свой собственный вопрос в течение 24 часов, поэтому вот мое решение, благодаря @Kevin Peno

Ниже приведена упрощенная версия того, что я искал. Он создает два divs «видимый» и «невидимый». «невидимый» маскирует «видимый», так что за ним отображается фоновое изображение вместо «видимого» 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);
}

Ответ №1:

Вот сообщение в блоге об использовании css для применения маски изображения к элементу. Это звучит довольно близко к тому, что вы ищете, или, по крайней мере, будет полезно для некоторых идей. Дайте мне знать, как это работает.

CSS-маски