### 前提・実現したいことカラーピッカーを作成してまして、切り捨て計算の微妙なズレをなんとかしたいです。 ### 発生している問題・エラーメッセージ ``` rangeバーの位置に合わせてSVGアイコンを移動させたいが、その位置が微妙にズレてしまう ``` ### 該当のソースコードこちらコードになります。 https://jsfiddle.net/yLv3zgab/ 特に質問部分はjsfiddleの74行目にある「moveIcon( hue, lig )」という関数です。これがSVGアイコンの位置を正しく取得できません。例えば下のrangeバーを右いっぱいにした場合、バーのトグルとSGVアイコンが微妙にずれてしまうのがお分かり頂けるかると思います。この微妙なズレは「moveIcon( hue, lig )」に起因するものだとは思いますが、その計算が困難です。 ```html

``` ```CSS .wrapper { padding: 25px 25px 35px 35px; background: #eee; margin: 20px 0 0 0; } .selectColor { position: relative; } .selectingColor { background: gray; height: 200px; position: relative; border: 1px solid #888; } .selectingLig { position: absolute; width: 20px; left: -25px; top: 0px; bottom: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: center; } .selectingLig .border { width: 10px; background: #aaa; height: 100%; padding: 0; margin: 0; } .selectingHue { position: absolute; bottom: -25px; height: 20px; display: flex; align-items: center; justify-content: space-between; left: 0px; right: 0px; } .selectingHue .border { height: 10px; background: #aaa; width:100%; padding: 0; margin: 0; } input[type=range][orient=vertical] { writing-mode: bt-lr; /* IE */ -webkit-appearance: slider-vertical; /* WebKit */ } .icon { position: absolute; left: 0; top: 0; width: 10px; height: 10px; } ``` ```JavaScript /* * アクション *****************/ // 初期値 $(document).ready(function(){ const hex = '#ffda61'; $('.inputColor').val(hex).trigger('change'); }); // バーの操作 $(document).on('input','.border',function(e){ console.log('バーの操作'); // 値を取得 const area = $(this).offset(); const x = $('.border[data-hsl_type="hue"]').val(); const hue = Math.floor( x ); const y = $('.border[data-hsl_type="lig"]').val(); const lig = Math.floor( y ); console.log('hue:'+hue); console.log('lig:'+lig); // 現在色をエリアに表示 selectingColor( hue, lig ); // 現在色のHEXを表示 inputColor(); // iconを移動 moveIcon( hue, lig ); }); // HEXの入力 $(document).on('input change','.inputColor',function(e){ console.log('HEXの入力'); // 色を取得 const hex = $('.inputColor').val(); const rgb = hex2rgb( hex ); const hsl = rgb2hsl( rgb ); console.log('rgb'); console.log(rgb); console.log('hsl'); console.log(hsl); // 位置を計算 const hue = hsl['0']; const x = Math.floor( hue ); const lig = hsl['2']; const y = Math.floor( lig ); console.log('x:'+x); console.log('y:'+y); // rangeを移動 $('.border[data-hsl_type="hue"]').val(x); $('.border[data-hsl_type="lig"]').val(y); // 現在色をエリアに表示 selectingColor( hue, lig ); // iconを移動 moveIcon( hue, lig ); }); /* * 表示の関数 *****************/ // 現在色をエリアに表示 function selectingColor( hue, lig ){ const hsl = 'hsl( '+hue+', 100%, '+lig+'% )'; const $area = $('.selectingColor'); $area.css( 'background', hsl ); } // 現在のHEXを表示 function inputColor(){ const rgb = $('.selectingColor').css("background-color"); const hex = rgb2hex(rgb); $('.inputColor').val(hex); } // iconを移動 function moveIcon( hue, lig ){ const w = Math.floor( $('.selectingColor').outerWidth()); const h = Math.floor( $('.selectingColor').outerHeight()); const icon_lig_top = Math.floor( (h/100) * (100-lig) ); const icon_hue_left = Math.floor( (w/350) * hue ); $('.selectingLig .icon').css('top',icon_lig_top); $('.selectingHue .icon').css('left',icon_hue_left); console.log('icon_lig_top:'+icon_lig_top); console.log('icon_hue_left:'+icon_hue_left); } /* * 色変換の関数 *****************/ // RGBをHEXに変換 function rgb2hex(orig){ var rgb = orig.replace(/\s/g,'').match(/^rgba?((\d+),(\d+),(\d+)/i); return (rgb && rgb.length === 4) ? "#" + ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) + ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) + ("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : orig; } // HEXをRGBに変換 function hex2rgb ( hex ) { if ( hex.slice(0, 1) == "#" ) hex = hex.slice(1) ; if ( hex.length == 3 ) hex = hex.slice(0,1) + hex.slice(0,1) + hex.slice(1,2) + hex.slice(1,2) + hex.slice(2,3) + hex.slice(2,3) ; return [ hex.slice( 0, 2 ), hex.slice( 2, 4 ), hex.slice( 4, 6 ) ].map( function ( str ) { return parseInt( str, 16 ) ; } ) ; } // RGBをHSLに変換 function rgb2hsl ( rgb ) { var r = rgb[0] / 255 ; var g = rgb[1] / 255 ; var b = rgb[2] / 255 ; var max = Math.max( r, g, b ) ; var min = Math.min( r, g, b ) ; var diff = max - min ; var h = 0 ; var l = ( (max + min) / 2 ) * 100 ; var s = diff / ( 1 - ( Math.abs( max + min - 1 ) ) ) ; switch( min ) { case max : h = 0 ; break ; case r : h = (60 * ((b - g) / diff)) + 180 ; break ; case g : h = (60 * ((r - b) / diff)) + 300 ; break ; case b : h = (60 * ((g - r) / diff)) + 60 ; break ; } return [ h, s, l ] ; } ``` ### 試したこと『rangeバーと、SVGアイコン』をやめて『mousemoveイベントを付けたdivと、SVGアイコン』で作ってもみました。質問のような、rangeバーの値とSVGアイコンの位置についての整合を考えずに済むためです。しかしその場合、mousemoveイベントがスマホで効かないことと、PCでは操作性がカクカクしてしまうことから断念し、やはりrangeバーでてきないかと改めて思い質問させて頂きました。 ### 補足情報（FW/ツールのバージョンなど）バージョンによる違いなと特筆すべきことはございません。

	@@ -1 +1 @@
1	- 切り捨て計算の絶妙なズレ
1	+ 切り捨て計算の微妙なズレ

質問編集履歴