切り捨て計算の微妙なズレ

Question

前提・実現したいこと

カラーピッカーを作成してまして、切り捨て計算の微妙なズレをなんとかしたいです。

発生している問題・エラーメッセージ

rangeバーの位置に合わせてSVGアイコンを移動させたいが、その位置が微妙にズレてしまう

該当のソースコード

こちらコードになります。
https://jsfiddle.net/yLv3zgab/

特に質問部分はjsfiddleの74行目にある「moveIcon( hue, lig )」という関数です。

これがSVGアイコンの位置を正しく取得できません。

例えば下のrangeバーを右いっぱいにした場合、バーのトグルとSGVアイコンが微妙にずれてしまうのがお分かり頂けるかると思います。

この微妙なズレは「moveIcon( hue, lig )」に起因するものだとは思いますが、その計算が困難です。

<input class="inputColor" type="text">

<div class="wrapper">
  <div class="selectColor">
    <div class="selectingColor"></div>
    <div class="selectingLig">
      <input class="border" type="range" max="100" data-hsl_type="lig" orient="vertical">
      <svg class="icon">
        <circle cx="5" cy="5" r="5"></circle>
      </svg>        
    </div>
    <div class="selectingHue">			
      <input class="border" type="range" max="350" data-hsl_type="hue"> 
      <svg class="icon">
        <circle cx="5" cy="5" r="5"></circle>
      </svg>        
    </div> 
  </div>	
</div>

.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;
}

/*
* アクション
*****************/

// 初期値
$(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/ツールのバージョンなど）

バージョンによる違いなと特筆すべきことはございません。

Comments

[think49]

color pickerということですが、svg.iconで選択したカラーをinput.inputColorに出力する処理になっているでしょうか。ざっくり、読んだ限りでは正反対の処理に見えるのですが…。
→スライダーでカラーを選択するのですね。この指摘は忘れて下さい。

[m.ts10806]

タイトル「絶妙」だと全く意味が変わってくると思うので調整してください。

Answer 1

パッと見でわかることはつまみの大きさが考慮されていないことなので、引いてみたらどうでしょうか？

  const w = Math.floor( $('.selectingColor').outerWidth() - 10 );
  const h = Math.floor( $('.selectingColor').outerHeight() - 10 );

Comments

[atsukuteshinu]

ありがとうございます！