JavaScriptとCSSクリップパス属性を使用してポリゴンを描画します

私は自分の望む効果を与えるコードとして次のものを持っています。私は私がするたびに、私はハードコードにそれを持っていないように、座標の配列を取り込み、同じことを行うための関数を書くことができているかどうかを知りたいJavaScriptとCSSクリップパス属性を使用してポリゴンを描画します

#overlay { 
 
    background-color: rgba(0, 0, 0, 0.66); 
 
    position: absolute; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    clip-path: polygon(0% 0%, /*exterior top left*/ 
 
    0% 100%, /*exterior bottom left*/ 
 
    220px 100%, /*overlapping point exterior 1*/ 
 
    220px 50%, /*overlapping point interior 1*/ 
 
    220px 310px, /*interior top left*/ 
 
    683px 310px, /*interior top right*/ 
 
    683px 450px, /*interior bottom right*/ 
 
    220px 450px, /*overlapping point interior 2*/ 
 
    220px 100%, /*overlapping point exterior 2*/ 
 
    100% 100%, /*exterior bottom right*/ 
 
    100% 0%); 
 
    /*exterior top right*/ 
 
}

<body> 
 
    <div>Some background</div> 
 
    <div id="overlay"> 
 

 
    </div> 
 
    <div id="closeButton"> 
 
    <p> 
 
     Close 
 
    </p> 
 
    </div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script> 
 
    function main() { 
 
     $("#overlay").hide(); 
 
     $("#overlay").fadeIn(500); 
 

 
     $("#closeButton").on("click", function() { 
 
     $("#overlay").toggle(); 
 
     }); 
 
    } 
 
    $(document).ready(main); 
 
    </script> 
 
</body>

ウィンドウを移動したい。 closeButtonを押すとトリガーとなります。

出典

2017-12-13 tsubi-rin

？閉じるボタンをクリックするとクリップのパスが変わることがありますか？もう一度新しい値を書きたくないのですか？ –

@MarouenMhiriはい閉じるボタンをクリックした後にクリップのパスを変更したい。正確ではありません。私は、配列内に異なるポリゴン座標の束を格納し、それらを使用して1つのクリップパスのパスを変更することができます。私はたくさんのクリップパスを持つdivを作ったり、クラス/ idの束を作ったり、CSSでそれを変更したりしないようにしたいと思います。 –

しかし、新しい値は古いものに依存していますか？ –

JavaScriptでポリゴンストリングを計算してから、そのスタイルをエレメントに設定できます。ここでは2ピクセルを取ることができます例の機能が類似したポリゴンを作成する座標です：あなたが意味

#overlay { 
 
    background-color: rgba(0, 0, 0, 0.66); 
 
    position: absolute; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<body> 
 
    <div>Some background</div> 
 
    <div id="overlay"> 
 

 
    </div> 
 
    <div id="closeButton"> 
 
    <p> 
 
     Close 
 
    </p> 
 
    </div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script> 
 

 
    // Copy this function: 
 
    function generatePoly(p1, p2) { 
 
     var a = p1[0] + 'px'; 
 
     var b = p1[1] + 'px'; 
 
     var c = p2[0] + 'px'; 
 
     var d = p2[1] + 'px'; 
 
     return 'polygon(' + [ 
 
      '0% 0%', 
 
      '0% 100%', 
 
      a + ' 100%', 
 
      a + ' 50%', 
 
      a + ' ' + b, 
 
      c + ' ' + b, 
 
      c + ' ' + d, 
 
      a + ' ' + d, 
 
      a + ' 100%', 
 
      '100% 100%', 
 
      '100% 0%' 
 
     ].join(', ') + ')'; 
 
    } 
 

 
    function main() { 
 

 
     // Run this when you want to set the polygon: 
 
     $("#overlay").css('clip-path', generatePoly([40, 80], [120, 200])); 
 

 
     $("#overlay").hide(); 
 
     $("#overlay").fadeIn(500); 
 

 
     $("#closeButton").on("click", function() { 
 
     $("#overlay").toggle(); 
 
     }); 
 
    } 
 
    $(document).ready(main); 
 
    </script> 
 
</body>

出典

2017-12-13 20:49:47

それはまさに私が望んだようだが、私はそれを実装する方法がわからないのですか？ –

@ tsubi-rinコメントをいくつか追加しました。 css（ 'clip-path'、generatePoly（[40,80]、[120、200]））; '（ '）」を呼び出すだけで、' generatePoly'関数をコピーして '$（"＃overlay "あなた自身の座標で）あなたがそれを使いたいとき。 –

私はそれらを見て、すべてがうまくいきます、ありがとう。パラメータが配列であることに気がつかなかったので、試したときに動作しませんでした。すべてが今素晴らしいです。 –

JavaScriptとCSSクリップパス属性を使用してポリゴンを描画します

答えて

関連する問題