CSSペイントAPIの探索：ポリゴンボーダー-CSSチュートリアル-php.cn

CSSペイントAPIの探索：ポリゴンボーダー

Joseph Gordon-Levitt

リリース： 2025-03-20 09:47:10

オリジナル

541 人が閲覧しました

CSSペイントAPIの探索：ポリゴンボーダー

clip-pathで複雑な形状を作成するのは簡単ですが、境界線を追加することは永続的な課題です。 CSSには堅牢なソリューションがなく、多くの場合、面倒な回避策が必要です。この記事では、CSSペイントAPIを使用したソリューションを示しています。

このCSSペイントAPI探索シリーズは続きます：

パート1：画像断片化効果
パート2： BLOBアニメーション
パート3：ポリゴンボーダー（現在の記事）
パート4：丸めの形

この記事では、ポリゴンの境界線の作成について詳しく説明しています。この手法は現在、Chromiumベースのブラウザ（Chrome、Edge、Opera）でのみサポートされていることを忘れないでください。最新の互換性情報については、Caniuseを確認してください。

コードは簡潔で順応性のあるままであり、形状を変更するためにマイナーな変数調整のみが必要です。

コアコンセプト

ポリゴンの境界線は、ペイントAPIと生成されたclip-pathとカスタムマスクを組み合わせることで達成されます。

標準の長方形から始めます。
clip-pathを適用して、それをポリゴンに形作ります。
カスタムマスクを適用して、ポリゴンボーダーを作成します。

CSS構造

clip-pathステップのCSSは次のとおりです。

 。箱 {
   - パス：50％0,100％100％、0 100％;

  幅：200px;
  高さ：200px;
  背景：赤;
  ディスプレイ：インラインブロック。
  クリップパス：ポリゴン（var（ - パス））;
}

ログイン後にコピー

重要なのは、CSS変数--pathです。 clip-pathとマスクの両方が、一貫したパラメーターにこの変数を使用します。

完全なCSSコードは次のとおりです。

 。箱 {
   - パス：50％0,100％100％、0 100％;
   - ボーダー：5px;

  幅：200px;
  高さ：200px;
  背景：赤;
  ディスプレイ：インラインブロック。
  クリップパス：ポリゴン（var（ - パス））;
  -webkit-mask：ペイント（ポリゴンボーダー）;
}

ログイン後にコピー

clip-pathに加えて、カスタムマスクが適用され、 --border境界の厚さを制御します。 CSSはシンプルで一般的なままであり、ペイントAPIの使いやすさを強調しています。

JavaScriptの実装

ペイントAPI構造をよりよく理解するために、このシリーズのパート1を参照してください。

paint()関数のJavaScriptコード：

 COSTS POINT = PROPERTIES.GET（ ' -  PATH'）。toString（）。split（ '、'）;
const b = parsefloat（properties.get（ ' -  border'）。値）;
const w = size.width;
const h = size.height;

const cc = function（x、y）{
  // ...
}

var p = points [0] .trim（）。split（ ""）;
p = cc（p [0]、p [1]）;

ctx.beginpath（）;
ctx.moveto（p [0]、p [1]）;
for（var i = 1; i <points.length i p="points" .trim ctx.lineto ctx.closepath ctx.linewidth="2" b ctx.strokestyle="'black';" ctx.stroke><p>コードは<code>--path</code>変数を読み取り、ポイント配列に変換し、 <code>moveTo</code>と<code>lineTo</code>を使用してポリゴンを描画します。このポリゴンは<code>clip-path</code>ポリゴンを反映しています。ストロークは境界線を作成します。形状の塗りつぶしは透明です。</p><p>経路と厚さを変更すると、多様なポリゴンの境界線が可能になります。勾配と画像は、CSS <code>background</code>プロパティの使用により、固体を置き換えることができます。</p><p>コンテンツを組み込むには、クリッピングを防ぐために擬似要素が必要です。マスクプロパティは擬似要素に移動しますが、 <code>clip-path</code>メイン要素に残ります。</p><h3>よくある質問</h3><p>提供されたスクリプトに関するいくつかの一般的な質問を以下に説明します。</p><h4> <code>cc()</code>関数とは何ですか？</h4><p>この関数は、キャンバス要素内で使用可能なポイント座標（パーセンテージ値またはピクセル値）をピクセル値に変換します。</p><pre class="brush:php;toolbar:false"> const cc = function（x、y）{
  var fx = 0、fy = 0;
  if（x.indexof（ '％'）> -1）{
    fx =（parsefloat（x）/100）*w;
  } else if（x.indexof（ 'px'）> -1）{
    fx = parsefloat（x）;
  }
  if（y.indexof（ '％'）> -1）{
     fy =（parsefloat（y）/100）*h;
  } else if（y.indexof（ 'px'）> -1）{
    fy = parsefloat（y）;
  }
  return [fx、fy];
}

ログイン後にコピー