使用Jquery的圆形滑块 [英] Circular Slider using Jquery

问题描述

如何将鼠标滑入圆形？
在画布中绘制圆弧和鼠标指针。鼠标应该是圆形路径上的拖拽山墙吗？

How to slide mouse in circular ? Draw an arc and a mouse pointer in a canvas. Mouse should be drag gable on the circular path?

//function to create mouse event to drag the mouse hover the arc

function mousedrag() {
    var canvasoffset = $(this.canvas).offset();
    var offsetX = canvasoffset.left;
    var offsetY = canvasoffset.top;     
    var mouseX = parseInt(e.offsetX || e.clientX - offsetX);
    var mouseY = parseInt(e.offsetY || e.clientY - offsetY);

    var radius = this.width / 2;
    var twoPI = 2 * Math.PI;
    var toRad =  twoPI / 360;
    var r_width =  this.width * 0.8;

    var radial_Angle = Math.atan2(mouseY - radius,mouseX - radius);

    var p_side_x =  radius + r_width * Math.cos(radial_Angle);        
    var p_side_y =  radius + r_width * Math.sin(radial_Angle);
    var p_mouse_x =  radius + ((r_width+10) * Math.sin(radial_Angle));
    var p_mouse_y =  radius + ((r_width+ 10) * Math.sin(radial_Angle));

    var imgData = this.ctx.getImageData(p_side_x, p_side_y, 1, 1).data;
    var selectedColor = new Color(imgData[0], imgData[1], imgData[2]);
            clearDraw();
    renderSpectrum();
    renderMouse(p_side_x, p_side_y, p_mouse_x, p_mouse_y);          
}

鼠标手柄无法正常滑动。

mouse handle does not slide properly.

推荐答案

你实际上不能强制将鼠标限制在一个圆圈内。

You can't actually force the mouse to be constrained into a circle.

但是你可以计算相对于中心点的鼠标位置。

But you can calculate the mouse position relative to a centerpoint.

// define a centerpoint

var cx=150;  
var cy=150;
var angleVersusCenter=0;

// listen for mouse moves 

function handleMouseMove(e){

  // get the mouse position

  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  // set the current radian angle of the mouse
  // versus the centerpoint

  var angleVersusCenter = Math.atan2( mouseY-cy, mouseX-cx );
}

演示： http://jsfiddle.net/m1erickson/z6cQB/

这篇关于使用Jquery的圆形滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！