3

私は JavaScript を理解しようと懸命に努力しており、Jay Weekes の次のコードに触発されました 。

ユーザーに strokeStyle の色を選択させる方法を見つけようとしています。これについてどうすればいいのかよくわかりません。試してみたところ、不透明度が機能しなくなり、色が黒くなりました...

IDと機能を持つボタンを使用しました。動作していません。助けに来ることにしました。

自分をうまく表現できているかどうかはわかりません。そうでない場合はお知らせください。

よろしくお願いします！:)

4

1 に答える 1

1

この質問に対する考えられる解決策の 1 つとして、大まかな出発点があります。結果はこの jsFiddle にあります。

私のアイデアは、最初に色を選択するための単純な UI 要素を追加することでした。私が考えることができる最も簡単なことは、リンクのリストでした.

<div id="sketch-color">
    <ul class="colorList">
        <li><a href="#" data-color="black">Black</a></li>
        <li><a href="#" data-color="red">Red</a></li>
        <li><a href="#" data-color="green">Green</a></li>
        <li><a href="#" data-color="blue">Blue</a></li>
    </ul>
</div>

HTML5 データの使用を検討し始めましたが、必要な手順を実行できていませんでした。リンクをもう少しわかりやすくするために、CSS ファイルを編集しました。

#sketch-color li:first-of-type a { color:black; }
...

次に、元のロジックに従うために、基本的な UI の読み出しに次の行を追加しました。

    <li>pen color: <span id="current-color"></span></li>

その時点から、それはただのjavascriptでした。「現在の」要素のリストに別の変数を追加し、そのデフォルトを「黒」に設定しました。

var currOpacity = document.getElementById( 'current-opacity' ),
    currDensity = document.getElementById( 'current-density' ),
    currCache = document.getElementById( 'current-cache' ),
    currColor = document.getElementById( 'current-color' );
    currCache.innerHTML = '0';
    currColor.innerHTML = "Black";

次に、すべての新しいリンクを取得し、デフォルトのクリック イベント ハンドラをオフにして、独自のリンクを追加する必要がありました。私は jQuery に慣れているので、おそらく最も効率的な方法でこれを行っていません。

// Color Events
var colorListItems = document.getElementById( 'sketch-color' ).getElementsByTagName('ul')[0].children;

var colorLinks = [];
for(var i = 0; i < colorListItems.length; i++)
{
    colorLinks.push(colorListItems[i].children[0]);
}

for(var i = 0; i < colorLinks.length; i++)
{
    colorLinks[i].removeEventListener("click");
    colorLinks[i].addEventListener("click", onClickColorChange, false);
}

次に、イベント ハンドラーを定義しました。

//event handlers    
function onClickColorChange( e ) {
    e.preventDefault();
    currColor.innerHTML = e.target.innerHTML;
    return false;
}

わかりました、それは素晴らしいことです。でテキストを変更できますspan。あまり面白くありません。これを何とかするには、Jay の描画コードをハックする必要があります。色を設定する決定は、関数が呼び出されるまで行われないことに気付いたPoint.connect()ので、その関数の重要な行を変更して、線のスタイルを設定する新しい関数を呼び出すようにしました。

if( totDist < maxDist*5 && drawDist < maxDist ){
  ctx.strokeStyle = currentStrokeStyle();
  ctx.line( this.x, this.y, p.x, p.y );
} else { break; }

そして、この新しい関数を定義しました:

function currentStrokeStyle() {
    var curr_color = currColor.innerHTML;
    var red = 0, green = 0, blue = 0;
    switch(curr_color) {
        case "Red": red = 255; break;
        case "Green": green = 255; break;
        case "Blue": blue = 255; break;
    };
    return 'rgba( ' + red + ',' + green + ',' + blue + ','+ uiOpacity.opacity +' )';
}

そして、魔法が起こりました。

ここには改善の余地がたくさんあることに気づきました。RGB スライダーか何かが必要で、キーをオフにする代わりに HTML5 データ属性を使用する必要がありますinnerHTML。そうは言っても、私は仕事に取り掛かった最初のバージョンを提出しています。jsfiddleをフォークして改善することをお勧めします。

アップデート

この配置で新しい色を追加する方法を明確にしておらず申し訳ありません。基本的に、UI の色のリストに新しいリンクを追加してから、currentStrokeStyle() 関数の switch ステートメントに新しいケースを追加する必要があります。したがって、オレンジ色のオプションを追加するには:

<div id="sketch-color">
    <ul class="colorList">
       <li><a href="#" data-color="black">Black</a></li>
       <li><a href="#" data-color="red">Red</a></li>
       <li><a href="#" data-color="green">Green</a></li>
       <li><a href="#" data-color="blue">Blue</a></li>
       <li><a href="#" data-color="orange">Orange</a></li>
    </ul>
</div>

と：

function currentStrokeStyle() {
    var curr_color = currColor.innerHTML;
    var red = 0, green = 0, blue = 0;
    switch(curr_color) {
        case "Red": red = 255; break;
        case "Green": green = 255; break;
        case "Blue": blue = 255; break;
        case "Orange": red = 255; green = 128; break;
    };
    return 'rgba( ' + red + ',' + green + ',' + blue + ','+ uiOpacity.opacity +' )';
}

リンクもオレンジ色に表示したい場合は、CSS を再度変更する必要があります。

#sketch-color li:nth-child(4) a { color:blue; }
#sketch-color li:nth-child(5) a { color:orange; }

そして、それは今のところうまくいくはずです。繰り返しますが、HTML5 の data 属性を使用して rgb 値を に直接渡せば、これを簡単に変更できますがcurrentStrokeStyle()、怠けていて遅くなってしまいました。

そして、新しい色がjsFiddleに追加されました。

于 2013-02-27T23:14:35.557 に答える