Эквивалент назначения холста для обычного элемента html?

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

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

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

ИЗМЕНИТЬ

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

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

canvas html qtwebkit webkit
person jfaust    schedule 20.04.2011    source источник
comment
Надеюсь, это поможет?   -  person Kevin Peno    schedule 21.04.2011
comment
@Kevin Peno - я думаю, что могу использовать это с маской, созданной на основе холста, для достижения желаемого эффекта. Теперь пошли попробовать... спасибо.   -  person jfaust    schedule 21.04.2011

Ответы (1)


arrow_upward
0
arrow_downward

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

Маски CSS

person Kevin Peno    schedule 21.04.2011
comment
Это было именно так - полное решение отредактировано в моем посте. Еще раз спасибо. - person jfaust; 22.04.2011