六角形のグループの概要

Question

私は六角形のグリッドに六角形のグループを持っています。

所望の出力：：これは、これまでにどのように見えるかです

私はそのグループからそれぞれの六角形の全てcotrnerポイントを格納しています。私は、これらのポイントが後でグループの周りの境界を計算するために使用できると思います。

[[{"x":123.39745962155612,"y":260},{"x":101.74682452694516,"y":272.5},{"x":80.0961894323342,"y":260},{"x":80.0961894323342,"y":235},{"x":101.74682452694516,"y":222.5},{"x":123.39745962155612,"y":235}],[{"x":145.0480947161671,"y":222.5},{"x":123.39745962155614,"y":235},{"x":101.74682452694518,"y":222.5},{"x":101.74682452694518,"y":197.5},{"x":123.39745962155614,"y":185},{"x":145.0480947161671,"y":197.5}],[{"x":166.69872981077808,"y":260},{"x":145.0480947161671,"y":272.5},{"x":123.39745962155612,"y":260},{"x":123.39745962155612,"y":235},{"x":145.0480947161671,"y":222.5},{"x":166.69872981077805,"y":235}],[{"x":188.34936490538905,"y":297.5},{"x":166.69872981077808,"y":310},{"x":145.0480947161671,"y":297.5},{"x":145.0480947161671,"y":272.5},{"x":166.69872981077808,"y":260},{"x":188.34936490538902,"y":272.5}],[{"x":188.34936490538905,"y":222.5},{"x":166.69872981077808,"y":235},{"x":145.0480947161671,"y":222.5},{"x":145.0480947161671,"y":197.5},{"x":166.69872981077808,"y":185},{"x":188.34936490538902,"y":197.5}],[{"x":210,"y":260},{"x":188.34936490538902,"y":272.5},{"x":166.69872981077805,"y":260},{"x":166.69872981077805,"y":235},{"x":188.34936490538902,"y":222.5},{"x":209.99999999999997,"y":235}],[{"x":231.65063509461098,"y":297.5},{"x":210,"y":310},{"x":188.34936490538902,"y":297.5},{"x":188.34936490538902,"y":272.5},{"x":210,"y":260},{"x":231.65063509461095,"y":272.5}]] 

また、グリッドがどのように動作するかを見るためにライブexampleを追加しました。

そして今、私は境界線が生成される方法を決定します正確にどのように把握しようとしています。

今どのように私は正確に境界線を生成していますか？ は、私はこのグループの中心を見つけ、その後、より長い距離でのすべてのポイントを 見つけ、 はその後、それらを接続する必要がありますか？

以下の議論の誰かの助言として、私は彼らの[X、Y]でポイントをソートする座標ともすべての重複座標を削除しようとしたが、それは、この災害になって：/。

それともこれを実現するための他の技術がありますか？

Answer 1

はここで単純なアルゴリズムです：あなたの茶色の領域の各六角Hの場合

1. 、6つの方向0≤dir < 6のそれぞれを反復し、hex_neighbor(H, dir)ようにDを設定します。
2. Dが緑の場合、2つの間に境界線を描きます。

注意：境界線のエッジを単一のポリラインに接続しません。

私はa live demoに、任意の数の領域で機能するアルゴリズムと、曲線を描く拡張機能を持っています。

Answer 2

おかげでアミット、私達とのあなたの知識を共有するため。あなたのアルゴリズムは効率的で高速です。私は上の私の例でそれを動作させるために、ほとんど修正を加える必要がありませんでした。

• 第1ヘクスは、その方向のいずれかに隣人を持っていなかった場合は、nullと方向をマーク。エッジを生成しながら

• 秒、考慮にnull値を持つネイバーを取ります。

そうでなければ、そのヘックスがその側面の1つに隣接していなければギャップを残していました。

この私が、エッジを描画するために使用しています修正機能：それはすべてが今完璧に動作

generateEdges: function(ctx){ 
    var edges = []; 
    var self = this; 
    var neighbor = null; 
    self.obs_arr.forEach(function(hex){ 
     for(var dir = 0, nb_l = hex.neighbors.length; dir < nb_l; dir++){ 
      neighbor = hex.neighbors[dir]; 
      if(neighbor == null || hex.content != neighbor.content){ 
       var p1 = self.point_add(hex.center, self.hex_corner_offset(dir)); 
       var p2 = self.point_add(hex.center, self.hex_corner_offset((dir+1)%6)); 
       edges.push(p1, p2); 
      } 
     } 
    }); 
    return edges; 
}, 

。すべてのあなたの助けを大変ありがとうございます！