2011-04-20 9 views
0

私はかなり調べてきましたが、私はこれが存在しないと確信しています。私は主にそのことを確認しています。私がしたいのは、その背後にあるすべてのものを透明にするdivを持つことです。これは、キャンバスの宛先指定合成オプションと同様です。通常のhtml要素のcanvas "destination-out"に相当しますか?

もう少し詳しくは、次のとおりです。 QtWebKitオーバーレイの背後に描画されたOpenGLウィンドウがあります。 OpenGLウィンドウには、複数の「サブウィンドウ」があり、重なり合う可能性があります。これらは、WebKitオーバーレイを使用して装飾されています。重なり合っている場合、この2つのレイヤーシステムのために、重なったウィンドウの装飾は遮られません。

バックアップオプションは、このためにフルウィンドウキャンバスを使用するだけです(ウィンドウトリミングはかなりシンプルですが)。これは組み込みのWebKitインスタンスなので、クロスブラウザである必要はなく、何かWebKit(またはQtWebKit)固有のものであれば問題ありません。

私は

次は私が探していたものの簡易版があるので、ここで私の解決策は@Kevin Penoのおかげで、だ、24時間以内に自分の質問に答えることができない

EDIT 。これは2つのdivを "visible"と "invisible"に作成します。 "目に見えない"マスクは、 "目に見える"ものを隠すので、 "目に見える" 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); 
} 
 
+0

[うまくいけば、このことができます?](http://www.webkit.org/blog/181/css-masks/) –

+0

@Kevin Peno - 私はcanvas-でそれを使用することができると思います私が望む影響を達成するためにマスクを生成しました。それを試しに今オフ...ありがとう。 – jfaust

答えて

0

ここで要素に画像マスクを適用するためにCSSを使用する方法についてのブログ記事です。あなたが探しているものにかなり近いと思うし、少なくともいくつかのアイデアには良いと思う。それがどのように機能するか教えてください。

CSS Masks

+0

これは完全に私のポストに編集されたソリューションでした。再度、感謝します。 – jfaust

関連する問題