I'm creating a website with a rotating wheel. The user should be able to rotate this wheel with dragging it with mouse. I implemented this in jQuery and it works(rotates). But it behaves as expected just between 90 degrees and 180 degrees. When it rotates more or less than this range, I see some unexpected bounces.
This is my code:
$(document).ready(function(){
var isDragging = false;
$("#box").mousemove(function(e){
if(isDragging){
e.preventDefault();
var rx = $(this).width() / 2;
var ry = $(this).height() / 2;
var px = e.clientX - $(this).offset().left - rx;
var py = e.clientY - $(this).offset().top - ry;
var a = Math.atan2(py,px) * 180 / Math.PI + 90;
if(py <= 0 && px < 0){a = 360 + a;}
$(this).css("-webkit-transform","rotate(" + a + "deg)");
}
});
$("#box").mousedown(function(){
isDragging = true;
});
$("*").mouseup(function(){
isDragging = false;
});
});
What is the problem? How to solve it?
You should check out the answer posted here.
How to make object rotate with drag, how to get a rotate point around the origin use sin or cos?
Here is the working fiddle from their answer
http://jsfiddle.net/mgibsonbr/tBgLh/11/
it involves making your html look similar to this.
<div class="draggable_wp">
<div class="el"></div>
<div class="handle"></div>
</div>
Within your if(isDragging) clause:
var element = document.getElementById("rotatable");
var mouseX = e.pageX || e.clientX + document.documentElement.scrollLeft;
var mouseY = e.pageY || e.clientY + document.documentElement.scrollTop;
var rect = element.getBoundingClientRect();
var s_rad = Math.atan2(
mouseY - rect.top - rect.height / 2,
mouseX - rect.left - rect.width / 2
);
var degree = Math.round(90 + (s_rad * (180 / (Math.PI))) / 15) * 15;
element.style.transform = 'rotate(' + degree + 'deg)';
Related
I have made a circle that follows the cursor using jquery which works fine but i want to give it a smoother effect, i have tried using timeout but that wont work which is kinda obvious so is there any other way to achieve this ?
Also whenever the cursor is close to the border of the webpage or crosses it the circle also goes outside the webpage creating a scrollbar can this be avoided by any way ?
My code -
var mouseX = 0, mouseY = 0;
var xp = 0, yp = 0;
let mouseMovementStoppedTimer;
const mouseMovementStopped = function() {
$("#circlecc").css({ opacity: 0});
}
$(document).mousemove(function(e){
$("#circlecc").css({opacity: 1})
mouseX = e.clientX - 12;
mouseY = e.clientY - 12;
setTimeout(() => {
$("#circlecc").css({left: mouseX +'px', top: mouseY +'px'});
}, 50)
clearTimeout(mouseMovementStoppedTimer);
mouseMovementStoppedTimer = setTimeout(mouseMovementStopped, 120);
});
My Website
Yes, you can avoid it, by detecting whether it would be outside the edge and making corrections:
let radius = 5; //you can have your own value here
function getX(x) {
if (x - radius < 0) return radius;
if (x + radius >= $(window).width()) return $(window).width() - radius - 1;
return x;
}
function getY(y) {
if (y - radius < 0) return radius;
if (y + radius >= $(window).height()) return $(window).height() - radius - 1;
return y;
}
$(document).mousemove(function(e){
$("#circlecc").css({opacity: 1})
mouseX = e.clientX - 12;
mouseY = e.clientY - 12;
setTimeout(() => {
$("#circlecc").css({left: getX(mouseX) +'px', top: getY(mousey) +'px'});
}, 50)
clearTimeout(mouseMovementStoppedTimer);
mouseMovementStoppedTimer = setTimeout(mouseMovementStopped, 120);
});
What I want:
I have a div and I want to move it around the canvas but limit it to canvas width and height
What I have:
I'm using p5.dom.js library
P5js code:
let dragging = false;
let offsetX, offsetY, onsetX, onsetY;
let canvasWidth, canvasHeight;
let currentDragDiv;
function setup() {
canvasWidth = windowWidth < 400 ? 400 : windowWidth;
canvasHeight = windowHeight < 400 ? 400 : windowHeight;
canvas = createCanvas(canvasWidth, canvasHeight)
.mousePressed(createDiv);
}
function draw() {
background(200);
if(dragging){
if(mouseX + onsetX < canvasWidth && mouseX + offsetX > 0){
currentDragDiv.position(mouseX + offsetX, currentDragDiv.y);
}
if(mouseY + onsetY < canvasHeight && mouseY + offsetY > 0 ){
currentDragDiv.position(currentDragDiv.x, mouseY + offsetY);
}
}
}
function createDiv(){
let div = createDiv("")
.mousePressed(function(){ dragDiv(div); })
.mouseReleased(function(){ dropDiv(div); })
.position(mouseX, mouseY);
}
function dropDiv(){
dragging = false;
currentDragDiv = null;
}
function dragDiv(d){
currentDragDiv = d;
dragging = true;
offsetX = currentDragDiv.x - mouseX;
offsetY = currentDragDiv.y - mouseY;
onsetX = currentDragDiv.width + offsetX;
onsetY = currentDragDiv.height + offsetY;
}
The Problem:
This code is working great but if the user moves the mouse too quickly, the div doesn't go until the border of the canvas things like this happens (I dragged and moved the div very fast to the right and it stoped in the middle of screen). This problem makes the variable onsetX and onsetY goes wrong and mess up a lit bit deppending on how much the div is away from the canvas border.
Is it possible to remove this "error" and make the div go until the border of canvas?
Observations:
I removed some of the code that I think it's not necessary for this question.
The variables onsetX and onsetY are the oposite of offsetX and offsetY, it's the position of the border from the mouse position, but because english isn't my native language, I didn't know how to name the variable. Recommendations would be good.
In your current code the dragging is completely omitted, if the border of the canvas is exceeded:
if(mouseX + onsetX < canvasWidth && mouseX + offsetX > 0){
currentDragDiv.position(mouseX + offsetX, currentDragDiv.y);
}
if (mouseY + onsetY < canvasHeight && mouseY + offsetY > 0 ){
currentDragDiv.position(currentDragDiv.x, mouseY + offsetY);
}
Instead of that you have to limit the dragging to the range from 0 to canvasWidth respectively 0 to canvasHeight. This means you have to "clamp" the dragging to this range:
function draw() {
let newX, newY;
background(200);
if(dragging){
newX = mouseX + offsetX;
if ( newX > canvasWidth ) {
newX = canvasWidth - currentPostIt.width;
}
if ( newX < 0 ) {
newX = 0;
}
newY = mouseY + offsetY;
if ( newY > canvasHeight ) {
newY = canvasHeight - currentPostIt.height;
}
if ( newY < 0 ) {
newY = 0;
}
currentDragDiv.position(newX, newY);
}
}
I'm currently working on a googly eye that follows your mouse movements. I've been able to center the googly and listen for mouse movements, but I'm having trouble finding the center of the page after I've resized it.
var DrawEye = function(eyecontainer, pupil, eyeposx, eyeposy){
// Initialise core variables
var r = $(pupil).width()/2;
var center = {
x: $(eyecontainer).width()/2 - r,
y: $(eyecontainer).height()/2 - r
};
var distanceThreshold = $(eyecontainer).width()/2.2 - r;
var mouseX = 0, mouseY = 0;
// Listen for mouse movement
$(window).mousemove(function(e){
var d = {
x: e.pageX - r - eyeposx - center.x,
y: e.pageY - r - eyeposy - center.y
};
var distance = Math.sqrt(d.x*d.x + d.y*d.y);
if (distance < distanceThreshold) {
mouseX = e.pageX - eyeposx - r;
mouseY = e.pageY - eyeposy - r;
} else {
mouseX = d.x / distance * distanceThreshold + center.x;
mouseY = d.y / distance * distanceThreshold + center.y;
}
});
// Update pupil location
var pupil = $(pupil);
var xp = 0, yp = 0;
var loop = setInterval(function(){
// change 1 to alter damping/momentum - higher is slower
xp += (mouseX - xp) / 5;
yp += (mouseY - yp) / 5;
pupil.css({left:xp, top:yp});
}, 1);
};
var pariseye1 = new DrawEye("#eyeleft", "#pupilleft", 650, 300);
I'm trying to get it to follow the mouse no matter how big or small the window size is, I'm just having trouble figuring that out.
As of right now, if you resize the page the googly eye still follows the mouse, but it becomes slight ajar and doesn't quite follow the mouse exactly. It seems like where it's actually tracking the mouse stays the same.
I'm fairly new to javascript, so if anyone could help that would be great!
Thanks, James
I'm using svg shapes and I want to rotate those shapes. Here is the javascript code I'm using:
$scope.onobjectRotate = function (e)
{
$scope.isSaved = false;
var draggable = e.currentTarget;
e.clientX = e.clientX + 20;
e.clientY = e.clientY + 30;
var index = parseInt(draggable.attr('data-index'));
$scope.shapeobjects[index].isactive = true;
var R2D = 180 * 7 / 22;//radian to degree value(180/pie)
var center_x = $scope.shapeobjects[index].left + ($scope.shapeobjects[index].width / 2);
var center_y = $scope.shapeobjects[index].top + ($scope.shapeobjects[index].height / 2);
x = e.clientX - center_x;
y = e.clientY - center_y;
var radians = y / x;//slope in radians
var degree = radians * R2D;
$scope.shapeobjects[index].rotation = degree;
$scope.$apply();
}
It is working to some extent, in that it is rotating in a clockwise direction only. But how can I rotate both clockwise and anti-clockwise directions ?
I want to create a drag and scroll effect:
-> mouse down
-> drag and mouse move
-> the window will scroll according to the amount of mouse move
-> mouse up
-> scroll stops
Now, the problem I have is when I drag and move, the window DOM elements will shake.
I added a offset check, it mitigates the shaking problem, however not solved.
Can anyone help me?
below is the main code and the full working jsFiddle is at: http://jsfiddle.net/mifeng/sGvA4/1/
container.mousedown(function(e) {
mouseX = e.pageX;
mouseY = e.pageY;
console.log("CON: " + conX + "," + conY);
console.log("DOWN: " + mouseX + "," + mouseY);
container.mousemove(function(e) {
//console.log("INNER-DOWN: " + mouseX + "," + mouseY);
offsetX = e.pageX - mouseX;
offsetY = e.pageY - mouseY;
// offset check
if (offsetX > 10 || offsetX < -10 || offsetY > 10 || offsetY < -10) {
conX -= offsetX;
conY -= offsetY;
window.scrollTo(conX, conY); // scrollTo
mouseX = e.pageX;
mouseY = e.pageY;
}
});
});
Here are 2 plugins that do what you're after.
http://archive.plugins.jquery.com/project/Dragscrollable
http://azoff.github.io/overscroll/