Please have a look at this page
Try to click one of big buttons on the panel and to move your mouse on the y axis. The buttons start rotating as they should. Now, leave your mouse and click them again: why the heck do they insist into getting back in their original position?!
Here's the code snippet related to the button rotation. Please note that the code executed in the draw loop is called every 30ms.
// method
Button.prototype.Rotate = function(yDrag){
this.rotation = - (yDrag - this.rotationYClick) / 80
}
// draw loop
function drawLoop() {
if (buttons[n].roating == true && mousePressed == true)
buttons[n].Rotate(mousePosition_y)
else
buttons[n].roating = false
} // end draw loop
// fired ONLY ONCE when mouse is clicked
function mouseDown() {
buttons[n].roating = true
buttons[n].rotationYClick = mousePosition_y
}
I've intentionally avoided to post most of the code as I'm sure the problem lies in these lines.
Code explanation: when you click on a button, the position of the mouse is stored in the variable rotationYClick of the class Button. While you drag your mouse, the mouse position is constantly compared to the stored value: the distance of your current mouse position from the point which you clicked will determine how much the button rotate. Problem is, as you click it again the rotation is set back to zero. How to solve?!
Here's one of my failed tries by changing the method
// method
Button.prototype.Rotate = function(yDrag){
this.rotation += - (yDrag - this.rotationYClick) / 80
}
Thanks a lot!
Where you are setting this.rotation. Use += instead of =
The problem is that you reevaluate the rotation on each drag without taking into consideration the present rotation angle of the button.
EDIT
Ok, so its not that simple :)
Basically you'll have to keep two variables. One for the original rotation angle, and one that represents the current rotation. So, it becomes something like this:
this.rotation = this._originalRotation - ((yDrag-this.rotationYClick)/80);
and mouseDown becomes:
// fired ONLY ONCE when mouse is clicked
function mouseDown() {
buttons[n].roating = true
buttons[n].rotationYClick = mousePosition_y
buttons[n]._originalRotation = this.rotation;
}
Related
I need to track mouse position relative to a <canvas> element in my app. Currently, I have a mousemove event listener attached to the <canvas> that updates my mouse position whenever it fires, using offsetX/offsetY when available, or layerX/layerY when the offsetX/Y is not available. Using offsetX/Y or layerX/Y gives me mouse coordinates relative to my <canvas>, which is exactly what I want. As my app works its magic, various CSS 3d transformations get applied to the <canvas>, and even when <canvas> is very transformed, offsetX/Y still gives me accurate coordinates within the <canvas>'s local, transformed coordinate-space.
That's kind of confusing, so I'll try stating an example. If my <canvas> is 100px in both width and height, and is located at (0,0) relative to the browser viewport, and I click at (50,50) (in viewport coords), that corresponds to (50,50) in my <canvas>, and 50 is the value that is (correctly) returned via offsetX and offsetY. If I then apply transform: translate3d(20px,20px,0px) to my <canvas> and click at (50,50) (in viewport coords), since my canvas has been shifted 20px down and 20px to the right, that actually corresponds to (30,30) relative to the <canvas>, and 30 is the value that is (correctly) returned via offsetX and offsetY.
The problem I'm facing is what to do when the user is not physically moving the mouse, yet the <canvas> is being transformed. I'm only updating the position of the mouse on mousemove events, so what do I do when there is no mousemove?
For example. My mouse is positioned at (50,50) and no transformations are applied to the <canvas>. My this.mouseX and this.mouseY are both equal to 50; they were saved at the final mousemove event when I moved the mouse to (50,50). Without moving the mouse at all, I apply the above transformation (transform: translate3d(20px,20px,0px)) to my <canvas>. Now, I need this.mouseX and this.mouseY to each be equal to 30, as that is my mouse's new position relative to the current transformation of <canvas>. But this.mouseX and this.mouseY are still equal to 50. Since I never moved the mouse, there was no mousemove event fired, and those saved coords never got updated.
How can I deal with this? I thought about creating a new jQuery event, manually assigning some properties (pageX and pageY?) based on my old/previous mouse position, and then triggering that event, but I don't think that's going to cause the browser to recalculate the offsetX and offsetY properties. I've also been thinking about taking the known old/previous mouse position and multiplying it by my transformation matrix, but that's going to get real complicated since my mouse coordinates are in 2d-space, but the transformations I'm applying to <canvas> are all 3d transformations.
I guess really, what I want to do is take my known 2d page position and raycast it into the 3d space and find out where I'm hitting the transformed <canvas>, all in javascript (jQuery is available).
Is this possible? Does this even make sense?
Works in all browsers
var mouseX=0;
var mouseY=0;
var canvas = document.querySelector('#canvas');
var rect = canvas.getBoundingClientRect();
document.onmousemove = function(e) {
mouseX=e.clientX-rect.left;
mouseY=e.clientY-rect.top;
};
function updateCoords() {
mouseX=e.clientX-mouseX;
mouseY=e.clientY-mouseY;
setTimeout(updatecoords,10);
}
Now we can call updateCoords() function once to repeatedly check for new position.
updateCoords();
You can add your code inside the updateCoords() function and it will be executed each 10 milliseconds
Concept: mouseX and mouseY variables get updated on mousemove event, and also get updated when there is any change in the canvas position.
It looks like you want to refresh your mouseposition-values even if you don't move your mouse. You should try something like this:
var event = '';
var counter = 1;
$(function(e){
event = e;
window.setInterval(refresh, 10);
});
$(document).mousemove(function(e){
event = e;
refresh;
});
function refresh(){
counter++;
$('#mousepos').val("event.pageX: " + event.pageX + ", event.pageY: " + event.pageY + ", counter: " + counter)
}
The counter is just for visualisation of the refresh. You can set the interval to everything you want (10 = 10ms = 0.01s) Just move everything from your .mousemove() event into this refresh() function and call it properly and your mouse position should update even if you don't move your mouse.
Look at this fiddle for a life example: http://jsfiddle.net/82cmxw8L/1
EDIT:
Because my fiddle didn't work for the asker, i updated it: http://jsfiddle.net/82cmxw8L/8/
New is, that the mouseposition is now set every 0.1 Second, no matter what, rather than being updated only when the mouse moves.
I am working on some image viewing tools in KineticJS. I have a rotate tool. When you move the mouse over an image, a line appears from the centre of the image to the mouse position, and then when you click and move, the line follows and the image rotates around that point, in sync with the line. This works great.
My issue is, I have the following set up:
Canvas->
Stage->
Layer->
GroupA->
GroupB->
Image
This is because I draw tabs for options on GroupA and regard it as a container for the image. GroupB is used because I flip GroupB to flip the image ( and down the track, any objects like Text and Paths that I add to the image ), so that it flips but stays in place. This all works well. I am also hoping when I offer zoom, to zoom groupb and thus zoom anything drawn on the image, but for groupA to create clipping and continue to support drag buttons, etc.
The object I am rotating, is GroupA. Here is the method I call to set up rotation:
this.init = function(control)
{
console.log("Initing rotate for : " + control.id());
RotateTool.isMouseDown = false;
RotateTool.startRot = isNaN(control.getRotationDeg()) ? 0 : control.getRotationDeg();
RotateTool.lastAngle = control.parent.rotation() / RotateTool.factor;
RotateTool.startAngle = control.parent.rotation();
this.image = control.parent;
var center = this.getCentrePoint();
RotateTool.middleX = this.image.getAbsolutePosition().x + center.x;
RotateTool.middleY = this.image.getAbsolutePosition().y + center.y;
this.image.x(this.image.x() + center.x - this.image.offsetX());
this.image.y(this.image.y() + center.y - this.image.offsetY());
this.image.offsetX(center.x);
this.image.offsetY(center.y);
}
getCentrePoint is a method that uses trig to get the size of the image, based on the rotation. As I draw a line to the centre of the image, I can tell it's working well, to start with. I've also stepped in to it and it always returns values only slightly higher than the actual width and height, they always look like they should be about what I'd expect, for the angle of the image.
Here is the code I use on mouse move to rotate the image:
this.layerMouseMove = function (evt, layer)
{
if (RotateTool.isRotating == false)
return;
if (!Util.isNull(this.image) && !Util.isNull(this.line))
{
if (Item.moving && !RotateTool.isRotating)
{
console.log("layer mousemove item moving");
RotateTool.layerMouseUp(evt, layer);
}
else
{
var pt = this.translatePoint(evt.x, evt.y);
var x = pt.x;
var y = pt.y;
var end = this.getPoint(x, y, .8);
RotateTool.line.points([this.middleX, this.middleY, end.x, end.y]);
RotateTool.line.parent.draw();
RotateTool.sign.x(x - 20);
RotateTool.sign.y(y - 20);
var angle = Util.findAngle({ x: RotateTool.startX, y: RotateTool.startY }, { x: x, y: y }, { x: RotateTool.middleX, y: RotateTool.middleY });
var newRot = (angle) + RotateTool.startAngle;
RotateTool.image.rotation(newRot);
console.log(newRot);
}
}
}
Much of this code is ephemeral, it's maintaining the line ( which is 80% of the length from the centre to my mouse, as I also show a rotate icon, over the mouse.
Sorry for the long windedness, I'm trying to make sure I am clear, and that it's obvious that I've done a lot of work before asking for help.
So, here is my issue. After I've rotated a few times, when I click again, the 'centre' point that the line draws to, is way off the bottom right of my screen, and if I set a break point, sure enough, the absolute position of my groups are no longer in sync. This seems to me like my rotation has moved the image in the manner I hoped, but moved my group off screen. When I set offsetX and offsetY, do I need to also set it on all the children ? But, it's the bottom child I can see, and the top group I set those things on, so I don't really understand how this is happening.
I do notice my image jumps a few pixels when I move the mouse over it ( which is when the init method is called ) so I feel like perhaps I am just out slightly somewhere, and it's causing this flow on effect. I've done some more testing, and my image always jumps slightly up and to the right when I move the mouse over it, and the rotate tool continues to work reliably, so long as I don't move the mouse over the image again, causing my init method to call. It seems like every time this is called, is when it breaks. So, I could just call it once, but I'd have to associate the data with the image then, for the simple reason that once I have many images, I'll need to change my data as my selected image changes. Either way, I'd prefer to understand and resolve the issue, than just hide it.
Any help appreciated.
(i correct the mousedown thing..)
What i want to realize is to drag a ball on the canvas and then the ball will follow the mouse and change its color.
Once the mouse releases it, its color turns back to original.
i use "break" because only one ball could be dragged at one time.
Now the problem is,
"drag" seems weird, it seems "dragging" the first ball, but only mousemove(no mouse press) is ok right after the first ball.
the color doesn't change
main function below (complete code here http://jsfiddle.net/nyTkU/1/):
var mousePress = false;
var mouseEvent = function(){
$(canvas).mousedown(function(e){
mousePress = true;
$(canvas).mousemove(function(e){
for(var i=0;i<figureNum;i++){
var distX=e.pageX-balls[i].x;
var distY=e.pageY-balls[i].y;
var distance = Math.sqrt((distX*distX)+(distY*distY));
if(distance<=20){
balls[i].x=e.pageX;
balls[i].y=e.pageY;
if(mousePress){
balls[i].c="#F05133";
}
break;
}
//else{balls[i].c="#FFED79";}
}
});
});
$(canvas).mouseup(function(e){
mousePress=false;
//for(var i=0;i<figureNum;i++){
// balls[i].c="#FFED79";
//}
})
setTimeout(animate,speedMouse);
}
Many many thanks.
You have two mouseDown events...maybe the second one should be mouseUp?
I'm still a little confused on your desired functionality. Do you want the ball to move only if mouseDown=true or a ball should move if it is clicked once? Because you should be using click() handler in the second case.
Your mouseMove seems odd as well...are you trying to get any ball within a certain distance D to bind to the mouse coordinates? That will create some odd behavior.
Best way to do this would be:
1) On mouseDown, detect if a ball has been selected and save that ID. (set mousePressed=true)
2) On mouseMove, if mousePressed=true && ball is selected, bind that ball to the mouse coordinates. Do not update() this ball with any velocity.
3) On mouseUp, set mousePressed=false and clear any selected Ball
Firstly I don't even know if what I'm trying to do is even possible so please forgive me on that front.
I have created a program that allows graphics to be displayed in SVG. As part of this I want the user to be able to sketch notes with their mouse.
Is there a way to capture a mouse coordinates using javascript (or jQuery) if the left mouse button is pressed and held? What I'm struggling to get my head around is how to capture the series of positions to generate a path. As far as I understand I would need to grab a coordinate at a set timestep if the position has changed (psudo code below).
if (leftClicked)
{
var positionArray[];
var MC = getMouseCoordinates();
positionArray[0] = MC;
var i = 1;
while(leftClicked)
{
if getMouseCoordinates() != MC
{
MC = getMouseCoordinates();
positionArray[i] = MC;
}
i++;
}
}
But despite a few hours reading I can't find a way to implement this in JavaScript.
Also my SVG is embedded in a HTML page. I don't know how to localise the coordinate reporting just to that SVG and not the entire page?
Sorry, I know this is quite a vague question but I don't even know where to start with this one...
You should do it the other way round, rather than look for a button press and then try to track the mouse, track the mouse and check if the mouse moves whether the button is pressed.
I.e. attach a mousemove event handler and check for button = 0
This example tracks mousemove events, although it doesn't check for buttons being pressed, you'll have to add that yourself using the information from here
Say you have an image that is 200px wide. Is there a way to determine how far from the left of the image you clicked? For example if you clicked in the dead center you would get 100. I tried using something like ui.position.left but couldn't get that to work. Any ideas?
First, get the X position of the image. Next, use the event information to get the X position of the click event.
Once you have those two, it's simple math to get the result:
$('#yourImg').click(function(e){
var imageLeft = $(this).offset().left;
var clickLeft = e.pageX;
var howFarFromLeft = clickLeft - imageLeft;
});
You need to find the mouse coordinates at the time of the click (by using the event of the click, event.pageX, event.pageY). Then find the location of the image in the body. and subtract it from the mouseposition..
The result would be the coordinates inside the image.. Demo