| H5-Dooringは継続的に更新と反復を行っています。次に、著者はH5-Dooringの新機能を紹介し、グリッド参照線の実装を紹介します。内容は非常に短く、実装は非常に簡単です。より良いソリューションと実現のアイデア。 |
最近忙しいので、H5-Dooringも継続的に更新・反復しています。次に、H5-Dooringの新機能とグリッドリファレンスラインの実装を紹介します。内容は非常に短く、実装計画も非常に短いです。シンプルで、誰もがより良いソリューションと実装のアイデアを提案することを歓迎します。
H5-ドア開放更新ログ
- キャンバスグリッド参照線とショートカット切り替え方法を追加します
- テキストマーキーコンポーネントを追加する
- キャンバス操作コントロールはドラッグアンドドロップをサポートします
- ドア使用ビデオチュートリアル
- 複数ページのリンクの自動関連付け
ビジュアルエディターのグリッド参照線が
設計されている理由は、H5メーカーが設計支援として、コンポーネントの位置とサイズをより正確に制御できるようにするためです。キーボードショートカットctrl + h（ウィンドウシステム）またはPSソフトウェアと同様に、コマンド+ hを使用して、参照グリッドを表示または非表示にします。詳細を見てみましょう。
この機能は、2つの重要なポイントにすぎません。
グリッド線を描画
するキーボードイベントを聞くグリッド線を表示/非表示にするグリッド線を
描画する
背景画像の繰り返し、キャンバスの描画、cssの実装など、グリッド線を描画するための多くのスキームがあります。ここでは、3番目のスキームを採用します。
cssを使用して作成者を達成するという作成者のアイデアは、背景の勾配を介してそれを行うことです、原則は次のとおりです：
css3は複数の背景をサポートしているため、背景のグラデーションを使用して垂直方向の長方形と水平方向の長方形を描画し、幅と高さを設定して繰り返し描画できるようにします。コードは次のとおりです。
{
backgroundImage：
linear-gradient（90deg、＃ccc 5％、transparent 0）、
linear-gradient（#ccc 5％、transparent 0）;
backgroundSize：15px 15px;
backgroundRepeat：繰り返し
}
css3の詳細については、私の記事を参照してください。ここでは詳しく紹介しません。最終的な結果は次のとおりです。
キーボードイベントを監視して、グリッド線を表示/非表示にします
キーボードイベントを聞くここでは、比較的使いやすいライブラリキーマスターをお勧めします。これは、強力なオンラインエディターに欠かせないキーボードショートカットプラグインです。シングルキーとキーの組み合わせの監視、および監視リストをサポートしています。 。ctrl+ hとcommand + hを定義し、次のように監視機能内で論理操作を実行するだけで済みます。
// dvaモーダル
showGrid（state）{
overSave（ 'showGrid'、！state.showGrid）
return {
... state、
showGrid：！state.showGrid
}
}、
//再表現ワイヤー
キー（ '⌘+ h、ctrl + h '、（）=> {
dispatch（{
type：' editorModal / showGrid '
}）;
}）