HTML 5は、見た目が美しいだけではありません(第3弾:萌えるトポロジーグループ)

前言
この間は皆さんに愛されて、私にかなりのコードワードの動力を与えて、節前にもう一回弾くことにしました.最近まとめを振り返る良い習慣を身につけて、sfは本当に良いところです.
最近、お客様に複雑な多層ネスト関係を振り回すのに忙しいです.お客様は「きれいにしなさい」と言いました.兄は忙しくて頭が真っ白になって、幸いにも節の前に解決して、さもなくば本当に広範な株民と並んで江に並んで端午の節句を祝うことになります.
需要説明
まず、今回のお客様のニーズを簡単に説明します.
現実的な応用では,ネットワークトポロジー構造は簡単であるかもしれないし,非常に複雑であるかもしれない.
たとえば、このノードの多い単層トポロジ:
少し複雑なもの:
もっと複雑なもの:
これらのトポロジーマップで一般的なシーンは、多くのネットワークノードが「ネットワークメタグループ」と呼ばれるグループを構成する必要があることです.一般に、メッシュグループにはシェイプがあり、ダブルクリックすると展開/閉じることができます.例えば、次の図のようになります.
今回のお客様のニーズの中で、最大の難点は5層のネットメタグループのネストが必要で、5層が同時に展開する時、はっきりした美観を要求することです.通常のグループ形状は円形、矩形、平行四角形などがあり、いずれの形状でもグループが多くなると審美疲労が生じる.例えば、デザイナーmmに5層のネストを簡単に図を描かせて、それはこのように見えます.
私がこの図をお客様に見せた後、お客様は「構造がもっとはっきりしている」ことを望んでいます.その日、魔はすべて大雨が降って、私は耳をつかんで頬を掻いて午後、やっといくつかのインスピレーションがありました.
色
構造効果をより明確にするにはどうすればいいですか?私が思いついたのは色です.色は常にグラフィックデザインの第一要素です.グループ分けの色が千編一律であれば、含まれている関係はよく見えません.しかし、色が多すぎて色とりどりで、明らかに電気通信UIシステムのスタイルに合わない.では、色はどのように設定しますか?ネストされたグループを重ねて、層を重ねて......チリン!野菜を考えたことがありますか.
(ここで口ずさむ「もしあなたが私の心を一つ一つ剥いてくれれば......」百回......)
この大きな玉ねぎは階層がはっきりしているように見えます.その色が内から外に一定の規則的な変化があるからです.グラデーションです.グラデーションといえば、最近GFがお勧めしているゲームを思い出します.大体の内容は色のグラデーションの法則に従ってブロックを並べています.△つまらないですね.
しかし、フロントエンドデザインでは、配色が重要な一環です.
要するに、グラデーションの配色でネストグループをより明確にすることを考えたら、思い切って試してみましょう.

var group = new twaver.Group();
group.setStyle('group.fill.color', style[3]);
group.setStyle('group.deep', 0);
group.setStyle('group.outline.width', style[1]);
group.setStyle('group.outline.color', style[0]);
group.setStyle('group.shape', 'roundrect');         
group.setStyle('select.style', 'none');
group.setStyle('vector.outline.pattern', style[2]);
group.setStyle('label.font', '14px "Microsoft Yahei"');
group.setStyle('whole.alpha', 0.8);
group.setStyle('group.padding', -10);
group.setStyle('label.position', 'topright.topleft');
group.setName(name);
group.setLocation(100+150*level, 300);

box.add(group);         

データ量がもっと大きいときは、グループがもっとはっきりしているかどうか見てみましょう.
その他の色
この図を作った後、周りの何人かの同僚に見せて、みんなは次々と悪くないと言ったが、いくつかの堅苦しいようで、生き生きしていない.生き生き.それは生き生きとしているので、私は耳をつかんで頬をかき続け、果物や野菜を思い出しました.
やっぱり色合いが派手じゃないですね.私はまたデザイナーmmにいくつかの色値を探して調整させました.
折り曲げ角
花びらを重ねて書く感じがしましたが、だいぶ楽になったのではないでしょうか.しかし、方正なグループの形は、あまりにも堅苦しく、立体感に欠けている.机の上の角を折った白い紙を見て、急にインスピレーションを受けた.
四角いグループに角を折る効果を作って、効果はどうなのか分かりません.この効果を行うにはgroupの描画を書き換え、2 dの描画を自分で引き継ぐ必要があります.Groupの形状は矩形ではなく、角を切った矩形になります.
//draw round rect body.

var roundRadius=10;
ctx.save();
ctx.beginPath();
ctx.moveTo(rect.x+roundRadius, rect.y);
ctx.lineTo(rect.x+rect.width-60, rect.y);
ctx.lineTo(rect.x+rect.width, rect.y+28);
ctx.lineTo(rect.x+rect.width, rect.y+rect.height-roundRadius);
ctx.quadraticCurveTo(rect.x+rect.width, rect.y+rect.height, rect.x+rect.width-roundRadius, rect.y+rect.height);
ctx.lineTo(rect.x+roundRadius, rect.y+rect.height);
ctx.quadraticCurveTo(rect.x, rect.y+rect.height, rect.x, rect.y+rect.height-roundRadius);
ctx.lineTo(rect.x, rect.y+roundRadius);
ctx.quadraticCurveTo(rect.x, rect.y, rect.x+roundRadius, rect.y);
ctx.save();
ctx.shadowOffsetX = 4;
ctx.shadowOffsetY = 4;
ctx.shadowBlur = 4;
ctx.shadowColor ="#555555";
ctx.fill();
ctx.restore();
ctx.lineWidth=node.getStyle('group.outline.width');
ctx.strokeStyle=node.getStyle('group.outline.color');
ctx.stroke();       
ctx.restore();

角を丸くした長方形を描き、角を切ることで、strokeをキャンバスに渡します.効果を確認:
さらに、フィレット、面取り、シャドウの増加、異なる枠線の幅の設定により、グループ化がさらに「階層的に進む」感じになります.今は折り曲げ角の細部が残っています.
ここでは、折り曲げられた直角三角形を描く必要があります.三角形の色は、「紙」の裏面の色であるはずです.ここでは、三角形の形状を注意深く定義し、塗りつぶします.
//draw corlor.

ctx.fillStyle=node.getStyle('group.outline.color');             
ctx.lineWidth=node.getStyle('group.outline.width');
ctx.lineJoin='bevel';
ctx.beginPath();
ctx.moveTo(rect.x+rect.width-60, rect.y);
ctx.lineTo(rect.x+rect.width-23-10, rect.y+47-10);
ctx.quadraticCurveTo(rect.x+rect.width-23, rect.y+46, rect.x+rect.width-23+10, rect.y+47-10);
ctx.lineTo(rect.x+rect.width, rect.y+28);
ctx.closePath();
ctx.save();
ctx.shadowOffsetX = 4;
ctx.shadowOffsetY = 4;
ctx.shadowBlur = 4;
ctx.shadowColor ="#777777";
ctx.fill();                         
ctx.restore();
ctx.strokeStyle=node.getStyle('group.outline.color');
ctx.stroke();   

効果は以下の通りで、立体感が出てから、ずいぶん生き生きしたのではないでしょうか.
ここで注意したいのは、折り目の影も設定し、枠と同じ色を塗り、折り紙の立体感を高めることです.
細部
折り紙の効果はありましたが、左側の上が少し空いていたので、canvasの2 dを利用して手を練習し、pathを描いてみました.

ctx.save();
ctx.strokeStyle='#27A3DA';
ctx.lineWidth=2;
ctx.beginPath();
ctx.moveTo(rect.x+31, rect.y+5);
ctx.lineTo(rect.x+25, rect.y+20);
ctx.bezierCurveTo(rect.x+25, rect.y+26, rect.x+28, rect.y+28, rect.x+32, rect.y+23);
ctx.lineTo(rect.x+42, rect.y-2);
ctx.bezierCurveTo(rect.x+42, rect.y-12, rect.x+32, rect.y-10, rect.x+32, rect.y-5);
ctx.lineTo(rect.x+29, rect.y-1);

ctx.shadowOffsetX = 1;
ctx.shadowOffsetY = 1;
ctx.shadowBlur = 1;
ctx.shadowColor ="#aaaaaa";
ctx.stroke();
ctx.restore();

運行して、あなたは神馬だと思いますか?
ははは、小さな針が一瞬にして紙の上に躍り出て、萌えているような気がします!立体感を高めるには、クリップもシャドウを設定しますが、オフセットが大きすぎず、色が薄くするようにします.
適度に明るい色に、折り目、影、小さな針を加えて、今度はこのネストがやっとはっきりしていてきれいになったのではないでしょうか.
実行して、ドラッグ&ドロップして、前にすでに多くのアイコン、線のスタイルをしたので、全体の効果はやはりとても良いです!
後記
最後にHTML 5のcanvasをくどくど言いたいのですが、もう新鮮な技術ではありませんが、プラグインをインストールする必要がなく、ブラウザに直接ネットワークトポロジの論理関係を描くのは、世代交代中のOSSシステムの多くにとって魅力的です.技術自体に障壁がなくなった場合、このような組織構造関係が非常に複雑なトポロジー図を描く場合、どのように図形をより明確で分かりやすくし、技術を本当に実地に落とすかを重視しなければならない.