ズームのスライダの動作を変更するCSS/javascript

Question

JavaScriptを使用してサークルスライダを作成しましたが、ズームインまたはズームアウトすると正しく動作する必要があります。

私の問題は、円のスライダが拡大されたときです。 （ズーム：0.5）、スライダーのマウスイベントリスナーはおそらく動作しません。

この問題は、ズームプロパティを1より小さくまたは大きく設定した場合にのみ発生します。

あなたがしようとすると違いがわかります。https://jsfiddle.net/mqgfxkjf/8/

変更：

<div style="zoom: 1.0"> 

へ：

<div style="zoom: 0.5"> 

をそして、あなたはすべてにスライダーを移動し、右ながら演技ていないことがわかります-行き方。

Chromeでテスト済み

Answer 1

ズーム値に合わせてマウスの位置を調整する必要があります。

ズーム値を0.5に設定したとします。マウスの位置（xとy）を同じ値に調整する必要があります。したがって、この正確な問題を解決するには、スケール値で除算するだけの簡単な処理を行うことができます：var mPos = {x: (e.clientX/0.5) - elPos.x, y: (e.clientY/0.5) - elPos.y };。

スクリプトでスケール/ズーム値を処理できるようにして、スクリプトの変数として設定できるようにすることを強くお勧めします。私。このような何か：

(function() { 
      var scaleValue = 0.5; 

    addZoom(scaleValue); 

    var $container = $('#container'); 
    var $slider = $('#slider'); 
    var sliderW2 = $slider.width()/2; 
    var sliderH2 = $slider.height()/2;  
    var radius = 200; 
    var deg = 0;  
    var elP = $('#container').offset(); 
    var elPos = { x: elP.left, y: elP.top}; 
    var X = 0, Y = 0; 
    var mdown = false; 
    $('#container') 
    .mousedown(function (e) { mdown = true; }) 
    .mouseup(function (e) { mdown = false; }) 
    .mousemove(function (e) { 
     if (mdown) { 
      var mPos = {x: (e.clientX/scaleValue) - elPos.x, y: (e.clientY/scaleValue) - elPos.y }; 
      var atan = Math.atan2(mPos.x-radius, mPos.y-radius); 
      deg = -atan/(Math.PI/180) + 180; // final (0-360 positive) degrees from mouse position 

      X = Math.round(radius* Math.sin(deg*Math.PI/180));  
      Y = Math.round(radius* -Math.cos(deg*Math.PI/180)); 
      $slider.css({ left: X+radius-sliderW2, top: Y+radius-sliderH2 });    
      // AND FINALLY apply exact degrees to ball rotation 
      $slider.css({ WebkitTransform: 'rotate(' + deg + 'deg)'}); 
      $slider.css({ '-moz-transform': 'rotate(' + deg + 'deg)'}); 
      // 
      // PRINT DEGREES    
      $('#value').html('angle deg= '+deg); 
     } 
    }); 
})(); 

function addZoom(scaleValue) { 
    $('#zoom-container').css('zoom', scaleValue); 
} 

フィドル： https://jsfiddle.net/mqgfxkjf/10/