Эквивалент холста "destination-out" для обычного HTML-элемента? - PullRequest
Новая
       5

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

0 голосов
/ 21 апреля 2011

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

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

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

EDIT

Я не могу ответить на свой вопрос в течение 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);
}

1 Ответ

0 голосов
/ 21 апреля 2011

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

Маски CSS

...