0

私はかなり検索しましたが、これは存在しないとかなり確信しています。主にそれを確認しようとしています。私がやりたいのは、その背後にあるすべてを透明にするdivを用意することです。これは、canvasのdestination-out合成オプションと同様です。

もう少しコンテキストについては、ここに状況があります。QtWebKitオーバーレイの背後にOpenGLウィンドウを描画しています。OpenGLウィンドウには、オーバーラップできる複数の「サブウィンドウ」があり、WebKitオーバーレイを使用して装飾されています。ただし、重なり合う場合は、この2層システムのため、重なり合う窓の装飾が遮られることはありません。

バックアップオプションは、これにフルウィンドウキャンバスを使用することです（ウィンドウのトリミングはかなり単純です）が、使用しない方がよいでしょう。これは埋め込みWebKitインスタンスであるため、クロスブラウザーである必要はなく、WebKit（またはQtWebKit）固有のもので問題ないことに注意してください。

編集

私は24時間以内に自分の質問に答えることができないので、@KevinPenoのおかげでこれが私の解決策です

以下は私が探していたものの簡略版です。「可視」と「不可視」の2つの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);
}
4

1 に答える 1

0

これは、css を使用してイメージ マスクを要素に適用することに関するブログ投稿です。探しているものにかなり近いか、少なくともいくつかのアイデアには適しています。それがどのように機能するか教えてください。

CSS マスク

于 2011-04-21T14:55:14.357 に答える