JavaScriptでのベクターエディターの開発（パート2、ソース付き）

JavaScriptで独自のベクターエディターを作成することにした方法については、 以前に書きました 。 残念ながら、いくつかの理由で本格的なエディターをレイアウトすることは不可能です。そこで、アウトラインを作成して編集し、ページ上の任意の単一の画像にリンクできる小さなプラグインを作成することにしました。 もちろん、エディターの主要な「トリック」は、Photoshopの魔法の杖ツールの原則に従って、輪郭の半自動作成の可能性のままです。つまり、画像をクリックして完成した輪郭を取得し、それを調整できます。



プラグインはJavaScript + jQueryで記述されており、画像の処理はCANVAS要素で行われます。



それでも、私はエディターを書く過程で私が抱えていた問題を詳細に説明したくありません。そのいくつかは以前の記事ですでに述べたので、すぐにポイントになります：





プラグインの初期化は、ビューを呼び出すことにより行われます

$().mapContourEditor();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

変数のリストは次のとおりです。

• contour-x0、y0、x1、y1、...、xn、ynの形式の変数の配列、デフォルトでは空
• 許容値-魔法の杖ツールの色の半径（または感度）。初期値は20です。一般に、輪郭は色の境界線に従って検索され、このパラメーターはこの境界線の幅を決定します。
• cback-完成したパスの背景色。デフォルト値はrgba（120,0,0,0.3）
• cborder-輪郭線の色、デフォルトrgba（255,0,0,0.3）
• msize-マーカー（輪郭点）のサイズ。デフォルトでは、辺2の正方形（ピクセル単位）
• mback-内部マーカーの色、デフォルトrgba（255,255,255,0.5）
• mborder-rgbaマーカーの境界線の色（255,0,0,0.5）
• magicStick-「魔法の杖」のモード。デフォルトは1（オン）で、パスの作成後、自動的に0-オンに切り替わります。 magicStick = 0の場合-アウトラインマーカーを編集、作成、移動、削除できます。

いくつかの方法

この段階で、私は最小限の数のメソッドを作成することにし、自分自身を次のように制限しました。

• getData-変数を取得します。たとえば、magicStickモードがオンになっていることを確認するには、呼び出す必要があります

   $().mapContourEditor('getData','magicStick');
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

• setData-必要な変数を設定します。例：

   $().mapContourEditor('setData',{magicStick:1});
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

• destroy-特定の要素からエディターを削除します。

   $().mapContourEditor('destroy');
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

そしてイベントについて

イベントは1つだけです。

magicStickChange-エディターモードが変更されたときに呼び出されます。

 $().on('magicStickChange',function(){   Magic Stick});
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

実際には、プラグインのすべて、デモ、および簡単な説明をここで見ることができます： evalexdy.github.io/MapContourEditor 。このプラグインを開発または完成させるためのアイデアがあれば、コメントしてください。