フロントエンド開発の 効率を向上させるために 、著者は何百ものフロントエンドツールを作成しました。一部は社内で使用するためのものであり、一部は単にコードを書くのが「怠惰」であるため、「強制」されるためです。cssトライアングルジェネレーターのツールも、以前はデザイナーの生産性を解放したかったcssので、写真をカットしたりコードを書いたりするのが面倒だったので、考えてからcssトライアングルコードを自動生成できるツールを作る必要があります。
次に、このツールの目的と実装を紹介し、将来的に「怠惰なツール」をさらに拡張できるようにします。
オンラインcssトライアングルジェネレータプレビュー
プレビューアニメーションから、オンラインツールを使用して、必要なすべての種類の三角形を簡単に構成でき、cssコードをリアルタイムで表示できることがわかります。このツールを開発した後は、三角形コードの記述について心配する必要はありません。可能性はありますが、多くの場合、コードを書きたくなくてお金を稼ぎたいだけです）記事の最後に、作成者がcssツールのオンラインアドレスを添付します。次に、特定の実装プロセスを見てみましょう。
cssトライアングルジェネレーターを実装する
このツールの需要が正面から来たので、それは上になければならないcssとjs、このようなCSS3など、いくつかの基本的なプログラミング、持っている transform、 transitionレイアウト、ボックスモデル、 border境界特性を。
著者が以前に作成した他のオープンソースツールと同様に、プロジェクトを開発する前に要件と目標を明確にする必要があります。ここで、著者は要件を簡単に整理します。
任意のサイズ（サイズ）の三角形を生成します
異なる位置（方向）に三角形を生成する
異なる角度の三角形を生成する（回転）
異なる背景色の三角形を生成します（実際、これが実際に実装されているかどうかは関係ありません。主に、作成者がこのコードを書くのが面倒だからです）。
要件を理解したら、css次のように、ジェネレータインターフェイスを表す簡単なプロトタイプ図を大まかに描くことができます。
プロトタイプ図を使用すると、次のタスク内訳図を取得できます。
ここで触れておきたいのは、上記のプロセスは、直面する困難な問題を含め、どのプロジェクトにも実際に適用できるということです。アイデアを段階的に明確にし、大きな目標を小さな目標に分解してから、1つずつ分解することができます。それを破れば、大きな問題は解決されます。
次に、css三角形の使用原理を分析してみましょう。
1.css描画三角形の原理
実際、記事の著者がcss三角形を達成するために3つ以上の使用プログラムと共有する前に、著者が三角形を達成するために使用される一般的な方法を説明する前borderに、次の図を見てみましょう。
これらは、ボックスの幅がゼロであり、グラフィカルな分析でゼロにする方法ではない場合に、ボックスの要素widthがborder外観よりも小さい場合のショーborder-widthです。顔を三角形にすることはできますか？
それは確かにこのように達成されます。この原則を知った後、私たちはWYSIWYGの「三角形」を実装し続けます。
2.エディターの実装
エディターの実装もフロントエンドトークの古いトピックです。著者はH5-Dooringプロジェクトで非常に複雑なエディターを作成しましたが、ここでは静的で単純なエディターのみが必要です。インターフェイスは次の図に示すとおりです。
当社は、*として、我々は得意な実現するために、任意のフレームワークやコンポーネントライブラリを使用することができvue3+ element plus、 react + antd4.0ここで著者は採用reactカラーピッカーのコミュニティがより有名に使用して、達成するためのプログラムをreact-color。
作者はエディターインターフェースのコードを一つずつ紹介するつもりはありません、私は誰もがそれを理解できると信じています、スタイルデータ共有ロジックについて話しましょう：
私たちは、プレビュー領域とCSSコードのプレビュー領域は、フォーム値の変化をリアルタイムに変更できるようにしたい。ここでは、フォームデータを共有しなければならない。我々が使用できるreactコンポーネントstateまたは（データはvuexなしでアップグレードすることができますが）状態を共有します。vuevuex
3.プレビューエリアの実現
プレビュー領域は、実際には上記の分析で実装されています。共有formデータを使用して三角形要素のスタイルにバインドするだけで済みます。キャンバスの背景も、css以下に示すように、作成者によってここで実装されます。
興味があればcvできます。コードは次のとおりです。
.previewArea {
display: inline-block;
width: 360px;
height: 360px;
background: #eee;
background-image: linear-gradient(45deg,rgba(0,0,0,.2) 25%, transparent 0, transparent 75%, rgba(0,0,0,.2) 0),
linear-gradient(45deg,rgba(0,0,0,.2) 25%, transparent 0, transparent 75%, rgba(0,0,0,.2) 0);
background-size: 30px 30px;
background-position: 0 0,15px 15px;
}
。もう一つの重要なポイントは、三角形の向きを切り替える方法であることを私たちは皆知っているいくつかの方向属性が変更された後、方向が切り替えられる。三角形の向きが上向きであるとき、例えば、私たちは、次のとおりです。cssbordercss
{
border-width: 0 60px 60px 100px;
border-color: transparent transparent #06c transparent;
}
三角形の方向が下向きの場合、css次のようになります。
{
border-width: 100px 60px 0 60px;
border-color: #06c transparent transparent transparent;
}
同じ左と右が似ているので、4つのスタイルを維持する必要があります。後で左上、右上、左下、右下を追加する場合、コードを維持するのif elseは非常に困難になります（switch正直言って、switch8つの条件の判断にのみ適しています）、したがって、ここで作成者はオブジェクトメソッドを使用してそれを解決し、関数にカプセル化します。
const getBorderWidthAndColor = (direction:string, w:number, h:number, color:string) => {
const borderWidthAndColor:any = {
'1': {
borderWidth: `0 ${w/2}px ${h}px ${w/2}px`,
borderColor:`transparent transparent ${color} transparent`
},
'2': {
borderWidth: `${h}px ${w/2}px 0 ${w/2}px`,
borderColor:`${color} transparent transparent transparent`
},
'3': {
borderWidth: `${h/2}px ${w}px ${h/2}px 0`,
borderColor:`transparent ${color} transparent transparent`
},
'4': {
borderWidth: `${h/2}px 0 ${h/2}px ${w}px`,
borderColor:`transparent transparent transparent ${color}`
}
}
return borderWidthAndColor[direction]
}
実際、幅、高さ、背景色などの属性プレビューは扱いやすいので、ここでは1つずつ紹介しません。プレビューは次のとおりです。
4.コードのリアルタイム表示
テキストボックス内のコードのリアルタイム表示についても、これは非常に簡単に実装でき、取得したデータをテキストボックスにリアルタイムで表示するだけで済みます。作成者はCSSモジュールとreactメソッドを採用しているため、CSSを追加する必要があります。オブジェクト形式をcss仕様形式に変換するなどの処理。したがって、次の手順を追加する必要があります。
JSON.stringify(triangleCss, null, 4).replaceAll(/"/g, '').replaceAll(/,/g, ';')
このようにして、css三角形ジェネレーターの準備が整い、これに基づいて、ポリゴン、六角形、五角形などをサポートするなど、拡張を続けることができます。これはまったく問題ありません。
オンライン体験アドレス：オンラインcssトライアングルジェネレーター
最近、H5エディターのH5-Dooringも多くの更新と最適化を行い、興味のある人も学び、研究することができます。
リラックス
便利だと思いますか？ちなみに、気に入ったら集めてください。あなたのサポートが私の最大の励ましです！Wechatは、「興味深いフロントエンド」を検索して、H5ゲーム、Webパック、ノード、gulp、css3、javascript、nodeJS、キャンバスデータの視覚化に関するより興味深いフロントエンドの知識と実際の戦闘を見つけました。