CSSクリップパスプロパティのショーケースであるTryshapeの背後にあるストーリー

私はあらゆる種類の形、特に明るい色の形が大好きです！ウェブサイトの形状は、背景の色、写真、バナー、セパレーター、アートワークなどと同じくらい重要です。それらは、私たちがコンテキストを理解し、利益を通して私たちを導くのに役立ちます。

数ヶ月前、私は7歳の娘のための数学学習アプリケーションを開発しました。基本的な追加と減算に加えて、私は問題を形状に提示したいと思います。当時、私はCSS clip-pathプロパティに精通しました。これは、Webページで形状を作成する信頼できる方法です。その後、 clip-pathの力を使用してTryshapeという別のアプリケーションを構築することになりました。

Tryshapeの背後にあるストーリーと、それが形状の作成、管理、共有、エクスポートにどのように役立つかを説明します。その過程で、CSS clip-pathと、アプリケーションの迅速な構築にどのように役立つかについて説明します。

ここにいくつかの重要なリンクがあります：

• Tryshape Webサイト
• GitHubコードライブラリ
• ビデオデモ
• 反応用のclip-pathカプセル化NPMパッケージ

CSS clip-path属性と形状

通常の紙と鉛筆があると想像してみてください。あなたは何をしますか？おそらく、ある時点から始めてから、別のポイントに線を引き、最初のポイントに戻る前に3回繰り返します。また、平行と同じ長さの反対側があることを確認する必要があります。

したがって、形状の基本要素には、ポイント、線、方向、曲線、角度、長さなどが含まれます。 CSS clip-pathこれらの特性の多くを指定して、特定の領域を表示するためにHTML要素の面積をトリミングするのに役立ちます。クロップドエリア内の部分が表示され、残りが隠されます。開発者にclip-pathプロパティを使用してさまざまな形状を作成する多くの機会を提供します。

作物の詳細と、それがマスキングとどのように異なるかをご覧ください。

形状作成のためのclip-path値

clip-pathプロパティは、次の値を受け入れて形状を作成します。

• circle()
• ellipse()
• inset()
• polygon()
• url()関数を使用してクリップソース
• path()

これらの値を使用するには、基本的な座標系を少し理解する必要があります。要素にclip-path属性を適用して形状を作成する場合、要素の左上隅のx軸、y軸、および初期座標（0,0）を考慮する必要があります。

これは、x軸、y軸、および初期座標（0,0）を備えたDIV要素です。

次に、 circle()値を使用して円形を作成しましょう。この値を使用して、円の位置と半径を指定できます。たとえば、座標位置（70、70）で半径70pxの円形形状を作成するには、 clip-path属性値を次のように指定できます。

クリップパス：円（70px 70pxで70px）

したがって、円の中心は座標（70、70）にあり、半径は70pxです。現在、この円形領域のみがトリミングされ、要素に表示されています。要素の残りの部分は、円形の印象を作成するために隠されています。

次に、（0,0）として位置を指定したい場合はどうなりますか？この場合、円の中心は、半径70pxの（0,0）位置にあります。これにより、要素内の円の一部のみが表示されます。

先に進み、他の2つの基本値inset()とpolygon()を使用しましょう。 insetを使用して、長方形の形状を定義します。 4つのエッジが要素から領域をトリミングする必要がある場合があるギャップを指定できます。例えば：

クリップパス：挿入図（30px）

上記のclip-path値は、要素の端から30px値を除外することにより、領域をクリップします。これは下の写真で見ることができます。また、各エッジの異なるinset値を指定することもできます。

次はpolygon()値です。一連の頂点を使用して、ポリゴン形状を作成できます。この例をご覧ください：

クリップパス：ポリゴン（10％10％、90％10％、90％90％、10％80％）

ここでは、トリミング用の領域を作成する頂点のセットを指定します。次の図は、各頂点の位置を示しており、ポリゴン形状を作成します。必要な限り多くの頂点を指定できます。

次に、 ellipse()とurl()値を見てみましょう。 ellipse()値は、2つの半径値と1つの位置を指定することにより、形状を作成するのに役立ちます。下の図では、半径（50％、50％）の位置に楕円が、形状幅が70px、高さは100pxの位置にあります。

url()は、SVG形状をレンダリングするためにclip-path要素のID値を指定するCSS関数です。下の写真をご覧ください。 clipPathとpath Elementsを使用してSVG形状を定義します。 clipPath要素のID値を使用してurl()関数の引数としてこの形状をレンダリングできます。

さらに、 path()関数内のpath値を直接使用して形状を描画できます。

大丈夫。さまざまなclip-path属性値をすでに理解していることを願っています。この理解で、いくつかの実装を見て、それを試してみましょう。例を示します。それを使用して追加して、値を変更して新しい形状を作成します。

Tryshapeの紹介

今度は、トリシェープとそのバックストーリーについて話す時が来ました。 Tryshapeは、選択した形状の作成、エクスポート、共有、使用に役立つオープンソースアプリケーションです。バナー、サークル、アートワーク、ポリゴンを作成し、SVG、PNG、およびJPEGファイルとしてエクスポートできます。また、CSSコードスニペットを作成して、アプリケーションでコピーして使用することもできます。

Tryshapeは、次のフレームワークとライブラリ（そしてもちろんclip-path ）を使用して構築されています。

• CSS clip-path ：この強力なCSSプロパティの機能について説明しました。
• Next.js：最もクールな反応ベースのフレームワーク。バックエンドデータベースに接続するために、ページ、コンポーネント、インタラクション、APIを作成するのに役立ちます。
• HARPERDB：データを保存し、SQLとNOSQLの相互作用を使用してそれらをクエリするための柔軟なデータベース。 Tryshapeは、HarperDBクラウドにスキーマとテーブルを作成します。 Next.js APIはスキーマとテーブルと対話して、ユーザーインターフェイスに必要なCRUD操作を実行します。
• FireBase：Googleからの認証サービス。 Tryshapeは、Google、Github、Twitter、およびその他のアカウントを使用してソーシャルログインを有効にするために使用します。
• React-Icons：Reactアプリケーション用のすべてのアイコン用のストア
• 日付FNS：日付のフォーマットのための最新の軽量ライブラリ
• Axios：ReactコンポーネントのAPI呼び出しを簡素化します
• スタイルのコンポーネント：ReactコンポーネントからCSSルールを作成する構造化された方法
• React-Clip-Path：Reactアプリケーションでclip-pathプロパティを処理するための自家製モジュール
• React-Draggable：HTML要素をReactアプリケーションでドラッグ可能にします。 Tryshapeはそれを使用して、形状の頂点の位置を調整します。
• DownloadJS：JavaScriptのトリガーダウンロード
• HTML-to-image：HTML要素を画像に変換します（SVG、JPEG、PNGを含む）
• Vercel：next.jsアプリケーションをホストするのに最適です

CSS clip-pathを使用して、Tryshapeで形状を作成します

CSS clip-pathプロパティを使用して形状を作成するのに役立つソースコードを強調しましょう。次のコードスニペットは、300pxの正方形のコンテナ要素（ボックス）のユーザーインターフェイス構造を定義します。ボックス要素には、影とコンポーネントの2つの子要素があります。

<box height="300px" onclick="{(e)"> props.handlechange（e）} width = "300px">
  {
    props.shapeinformation.showshadow &&
    <shadow backgroundcolor="{props.shapeInformation.backgroundColor}"></shadow>
  }
  <component backgroundcolor="{props.shapeInformation.backgroundColor}" formula="{props.shapeInformation.formula}"></component>
</box>

シャドウコンポーネントはclip-pathクリップによって隠された領域を定義します。エンドユーザーがこの領域を部分的に見ることができるように、軽い背景を表示するように作成します。コンポーネントは、 clip-path値を割り当てるために使用され、クリップ領域を表示します。

以下のボックス、影、コンポーネントのスタイルのコンポーネントの定義を参照してください。

 // CSSプロパティを使用したUIコンポーネント用のスタイルのコンポーネントコードを作成//コンテナDiv
const box = styled.div`
  width：$ {props => propidth ||。
  高さ：$ {props => props.height ||。
  マージン：0 Auto;
  位置：相対;
`;

//シャドウは「クリップパス」のトリミングで隠された領域を定義します//この領域を部分的に見えるように軽い背景を表示します。
const shadow = styled.div`
  background-color：$ {props => props.backgroundcolor ||。
  不透明度：0.25;
  位置：絶対;
  トップ：10px;
  左：10px;
  右：10px;
  下：10px;
`;

//「クリップパス」値（式）を取得し、「クリップパス」プロパティの実際のコンポーネントに設定します。
const Component = styled.div`
  クリップパス：$ {props => props.formula};
  位置：絶対;
  トップ：10px;
  左：10px;
  右：10px;
  下：10px;
`;

GitHubコードベースの完全なコードベースを自由に表示してください。

Tryshapeの将来の開発方向

Tryshapeは、バックグラウンドCSS clip-pathを使用して基本的な形状の作成と管理を処理します。 Webアプリケーションで使用するために、形状とCSSコードスニペットのエクスポートに役立ちます。より価値のある機能を開発する可能性があります。主な機能は、湾曲したエッジで形状を作成する機能です。

曲線形状をサポートするには、Tryshapeで次の値をサポートする必要があります。

• url()を使用してクリップソース
• path() 。

これらの値を使用すると、SVGを使用してシェイプを作成し、上記の値のいずれかを使用できます。これは、SVGサポートを使用して形状を作成するurl() CSS関数の例です。

<div>心臓</div>
<svg><clippath clippathunits="objectBoundingBox"><path d="M0.5,1
      C 0.5,1,0,0.7,0,0.3
      A 0.25,0.25,1,1,1,0.5,0.3
      A 0.25,0.25,1,1,1,1,0.3
      C 1,0.7,0.5,1,0.5,1 Z"></path></clippath></svg>

次に、CSSがあります：

 。心臓 {
  クリップパス：url（＃heart-path）;
}

次に、 path()値を使用して形状を作成しましょう。 HTMLには、divのような要素が必要です。

<div>曲線</div>

CSSで：

 .Curve {
  クリップパス：PATH（ "M 10 80 C 40 10、65 10、95 80 S 150 150、180 80"）;
}

結論

私のトリシュシェープアプリケーションを楽しんで、その背後にある哲学、私が考慮する戦略、基礎となる技術、そして将来の可能性を理解してください。試してみて、ソースコードを確認してください。もちろん、質問、機能のリクエスト、コードを通じて、いつでも貢献できます。

最後に、Hashnode Hackathonの短いビデオを見せたいと思います。Tryshapeがエントリであり、最終的に勝者に選ばれました。楽しんだことを願っています。

お問い合わせください。 Twitterで@me（@tapasadhikary）にコメントしたり、いつでもフォローしたりできます。

以上がCSSクリップパスプロパティのショーケースであるTryshapeの背後にあるストーリーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。