Q&A
spectrum.jsと、
spectrum.css
を掲示してくれないと、他者は再現できません。
ダウンロードできるURLの記載でもいいので、お願いします。
質問は修正できるので、質問本文に記載してください。
javascriptの初心者です。
カラーピッカーから色成分（Hex値、RGB値、透明指数）を抽出して画面へ表示することは何とかできました。
次に配列palette のデータ（Hex値、RGB値、透明指数）を画面へ表示するのにあわせて、カラーピッカーの色をpaletteのデータ通りに表示する方法がわかりません。そもそも可能なのかどうかも分からず困っております。
<html lang="ja"> <head> <title>Test of Fractal Colorpicker</title> <script type="text/javascript" src="jquery-2.1.0.js"></script> <script type="text/javascript" src="spectrum.js"></script> <link rel="stylesheet" href="spectrum.css"> <script type="text/javascript"> //------------------------------------------- $(function(){ var alpha; let option = { chooseText: "選択", // 選択ボタンのテキスト cancelText: "キャンセル", // キャンセルボタンのテキスト allowEmpty: true, // 「指定なし」を許可する color: "#ff0", // 初期値 showInput: true, // コードの入力欄を表示する containerClassName: "full-spectrum", // ピッカーの部品を囲うタグ(要素)のクラス名 showInitial: true, // 初期の色と選択した色を見比べるエリアを表示する showPalette: true, // パレットを表示する showSelectionPalette: true, // ユーザーが前に選択した色をパレットに表示する showAlpha: true, // 不透明度の選択バーを表示する maxSelectionSize: 22, // 選択した色を記憶する数の上限 preferredFormat: "hex", // カラーコードの形式を指定したものに変更する (可能な限り。hex, hex3等) localStorageKey: "spectrum.demo", // localStorageに選択色を記憶する際のキー move: function (color) { }, show: function () { }, beforeShow: function () { }, hide: function (color) { }, change: function(color) { alpha = color.getAlpha(); }, palette: [ ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", "rgb(204, 204, 204)", "rgb(217, 217, 217)", "rgb(255, 255, 255)"], ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)", "rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"], ["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)", "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)", "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)", "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)", "rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)", "rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)", "rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)", "rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)", "rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)", "rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"] ] }; $("#colpick").spectrum(option); $("#colpick").on("change", function(){ var colHex = $('#colpick').val(); colHex = colHex.substr(1,6); var rHex = colHex.substr(0,2); var gHex = colHex.substr(2,2); var bHex = colHex.substr(4,2); var rDeci = parseInt(rHex,16); var gDeci = parseInt(gHex,16); var bDeci = parseInt(bHex,16); document.form1.hex.value = colHex; document.form1.red.value = rDeci; document.form1.green.value = gDeci; document.form1.blue.value = bDeci; document.form1.trans.value = alpha; }); }); //------------------------------------------- function setPalette(){ var palette = [1, "0000ff", 0, 0, 255, 0.6]; document.form1.n.value = palette[0]; document.form1.hex.value = palette[1]; document.form1.red.value = palette[2]; document.form1.green.value = palette[3]; document.form1.blue.value = palette[4]; document.form1.trans.value = palette[5]; var sss = "#" + palette[1]; document.form1.n.style.backgroundColor = "#" + palette[1]; // カラーピッカーの色も青にしたい } </script> </head> <body> <form name="form1" id="form1"> 色番号<input width="50px" type=text name="n" size="2" value="0"><br> Hex #<input type=text name="hex" size="3"><br> 赤<input type=text name="red" size="2"><br> 緑<input type=text name="green" size="2"><br> 青<input type=text name="blue" size="2"><br> 透明<input type=text name="trans" size="2"><br> カラー<input id="colpick" type="color" value="" /> </form> <input type="button" value="パレット選択" onclick="setPalette();" /> </body> </html> コード
当方の環境では、現状のコードで『カラーピッカーの色をパレットのデータ通りに表示』することができていますが、tulipさんの環境では動作していないのですね？
「カラーピッカー」を表示することはできているのですか？
miyabi_takatsuk様
大変失礼しました。
spectrum.jsとspectrum.cssは下記サイトからダウンロードしました。
ページ上の青い「Download Zip」ボタンをクリックするとダウンロードできます。
http://bgrins.github.io/spectrum/
-----
Lhankor_Mhy様
カラーピッカーは表示できますし、正常に作動しています。
質問の趣旨は、
①「パレット選択ボタン」をクリック
②setPalette()関数が実行
③配列 paletteで示される数値をテキストボックスへ表示
ここまではできるのですが、この次にカラーピッカーの色も配列指定の色（#0000ff）に変更したいのです。
『パレットのデータ通りに表示』という質問は、とりあえず保留する、ということですか？
ん？ 用語の行き違いがあるのかな？
「カラーピッカー」とは、#colpickをクリックしたときに表示されるもの
「パレット」とは、option.palette
という認識でしたが、相違ありますか？
言葉足らずで失礼しました。
「パレット」は誤解を招くので、質問の表現を「配列palette」へ変更しました。
→ 配列palette のデータ（Hex値、RGB値、透明指数）を画面へ表示するのにあわせて、カラーピッカーの色をpaletteのデータ通りに表示する方法がわかりません。
行いたいことは、#colpickをクリックすることなく、画面最下部の「パレット選択ボタン」をクリックするだけで、赤い色を#0000ffへ変更したいということです。
回答1件
0
ベストアンサー
以下をsetPalette()内に追加してみてください。
動作確認済み。
js
1 $("#colpick").spectrum('set', palette[1]);
投稿2019/12/19 07:38
編集2019/12/19 07:48総合スコア36115
あなたの回答
tips
プレビュー
