Javascriptで独自のカラーピッカーを作成する方法は？

ネットワークには、さまざまな好みや色の似たようなスクリプトがたくさんあることを知っています。 しかし、私は自分自身をゼロから書きたかったので、最初にしたことはグーグルで作成アルゴリズム（カラーピッカー）を検索することでした。 その結果、既製のスクリプト以外に何も見つからなかったのでがっかりしました。そのため、カラーピッカーを見つけて書いた後、それを書いた経験を共有することにしました。



この投稿では、ライブラリを使用せずに純粋なjs（私が自分で作成したものを除く）で記述しているため、 筋金入りの純粋なjavascriptしかありません。

cp（短縮カラーピッカー）を記述するために知っておくべきこと：

• ドラッグアンドドロップの基本
• Canvasを少し理解する（Hueカラースケールが描画されます）

1.CSS＆html

<div class="picker" id="primary_block" > <div id="line"> <div id="arrows"> <div class="left_arrow"></div> <div class="right_arrow"></div> </div> </div> <div id="block_picker"> <img src="img/bgGradient.png" class="bk_img"><div id="circle"></div> </div> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでのコメントには、最も単純な構造は必要ないと思います。

今CSS

 .right_arrow { width:0; height:0; left:23px; position:absolute; border-bottom:6px solid transparent; border-left:10px solid transparent; border-top:6px solid transparent; border-right:10px solid black; }//    .circle { width:8px; height:8px; border:1px solid black; border-radius:50%; position:absolute; left:0; top:0; cursor: default; -moz-user-select: none; -khtml-user-select: none; user-select: none; -webkit-user-select: none; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これはもちろんすべてのcssコードではありませんが、これ以上興味深いものはありません（要素の配置のみ）。

2.Javascript

さて、今は楽しい部分であるJavascriptです。

まず、構造を完成する必要があります（つまり、 Hueスケールの描画から）。これをキャンバスで行います（画像の数を減らすため）。

 gradient: function(canva,w,h){ /* canva-  canvas h -   w-  */ var context, gradient, hue; context = canva.getContext("2d"); gradient = context.createLinearGradient(w/2,h,w/2,0); hue = [[255,0,0],[255,255,0],[0,255,0],[0,255,255],[0,0,255],[255,0,255],[255,0,0]]; //   hue  rgb for (var i=0; i <= 6;i++){ color = 'rgb('+hue[i][0]+','+hue[i][1]+','+hue[i][2]+')'; gradient.addColorStop(i*1/6, color); }; context.fillStyle = gradient; context.fillRect(0,0, w ,h); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで何が起こったかを見て触れることができます 。 次に、些細なイベントフックがあります（したがって、このコードはスキップします）。

では、使用するカラーモデルを見てみましょう。HSVになります

HSVは、色座標が次のカラーモデルです。



色相-色調（赤、緑、青、青など）。 0〜360°の間で変化しますが、0〜100または0〜1の範囲に縮小されることもあります。



彩度-彩度。 0-100または0-1の間で変化します。 このパラメータが大きいほど、色が「きれい」になるため、このパラメータは色純度と呼ばれることもあります。 そして、このパラメーターがゼロに近いほど、色はニュートラルグレーに近くなります。



値（色の値）または明るさ-明るさ。 0-100から0-1の間で設定することもできます。

cpでこれを実装する方法を以下に明確に示します（図1）

色相スケールがあります。彩度と値（色の値）に変更を加える必要があります。

SとVの値は0〜100であるため、疑問が生じる場合があります。

ブロックの幅と高さが100を超える場合はどうすればよいですか？

-

 var px_X = elem.clientWidth / 100; /*   px    . :   180 180/100 ,    1       1,8; */ var S = left / px_X;//   left   "" (div c id = "circle")  Math.round(S);//   
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

「円」がシフトされると、SとVの変化を追跡します（色の変化の視覚効果のために、写真の下の背景を変更します（写真は半透明です））。

しかし、背景をHSVからRGBに変換する必要があるように変更するために、 ここに式があり、下のコードと比較するとすべてが明確になるので、この段階をあまりペイントしません。

  hsv_rgb: function (H,S,V){ var f , p, q , t, lH; S /=100; V /=100; lH = Math.floor(H / 60); f = H/60 - lH; p = V * (1 - S); q = V *(1 - S*f); t = V* (1 - (1-f)* S); switch (lH){ case 0: R = V; G = t; B = p; break; case 1: R = q; G = V; B = p; break; case 2: R = p; G = V; B = t; break; case 3: R = p; G = q; B = V; break; case 4: R = t; G = p; B = V; break; case 5: R = V; G = p; B = q; break; } return [parseInt(R*255), parseInt(G*255), parseInt(B*255)]; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ネットワーク上で見つけたものが正しく機能しなかったため、自分で作成しました。

この投稿でcpを作成するための基本的な知識を与えてほしいと思います。機能を増やし、さまざまな色形式への変換を長期間追加できるため、ここで終了します。

3.要約する

それは私がデモを得たものです。

この投稿では、コードを掘り下げずにcpを作成する方法を説明しようとしました。これは、Drag`n`Dropには複雑なものがないという点が見当たらないためです。

CyBer_UAにご注目いただきありがとうございます。これはjavascriptに関する最初の投稿です（最後ではありません）。

P.s.