I would appreciate your help with the following issue: I want to use CSS3 transforms in order to center the view-port of the browser around the position of a mouse click.
Please have a look at my commented example at http://jsfiddle.net/XjpdU/.
The problem that I have is that the translation works fine only on the first click. After the first click the distance between the center of the view-port and the mouse click position seems to be computed correctly, but the translation seems to jump just anywhere.
I have tried to explicitly set 'transform-origin' (-webkit-translate-origin in my example) to the position of the last click (i.e., the current center of the view-port) but it seems that with 'translate' the 'transform-origin' directive simply gets ignored.
Thanks for helping out!y
Yep, transform-origin has no effect on the translation. It works like this:
Start with the identity matrix.
Translate by the computed X, Y and Z values of ‘transform-origin’
Multiply by each of the transform functions in ‘transform’ property in turn
Translate by the negated computed X, Y and Z values of ‘transform-origin’
http://www.w3.org/TR/css3-transforms/#transform-rendering
What you could do is remember the translate, and add the newly calculated one to it, this will cause a relative translation starting from the previous point.
x = prevX = prevX + newX
y = prevY = prevY + newY
http://jsfiddle.net/XjpdU/1/
Related
How can I calculate offsetX and offsetY of the mouse cursor, relative to an element being transformed, even though the mouse is not moving?
https://jsfiddle.net/kevin_dorion/usrLd1x3/34/
// this is the value I need to update, even when the mouse is not moving
offsetEl.innerHTML = `x: ${evt.offsetX} y: ${evt.offsetY}`;
As you can see, on mousemove, I get the offsetX and offsetY values, which are exactly what I need. But I also need to be aware of these values changing when the mouse is not moving.
requestAnimationFrame(animate);
// how do I manually calculate offsetX and offsetY of the mouse cursor relative to the "el" element when the mouse is not moving?
I was thinking of keeping the last mouse event, use the pageX/pageY to position an element, then calculate its offset, but I can't get it working properly.
Thank you!
EDIT: I was thinking of storing the last known matrix / mouse coordinates combinaison, use the current matrix and make some interpolation, but I can't get it right either...
I have a question that is math and also JavaScript related. I'm trying to come up with a function to get me the true coordinate within an element that was clicked. The difficulty here is that the element could be rotated.
Otherwise, we could easily get the coordinate within the element on a click by doing using jQuery:
const ELEMENT_X = event.pageX - object.offset().left;
const ELEMENT_Y = event.pageY - object.offset().top;
Not too sure if these JavaScript objects can help calculate the true coordinate of the element:
DOMPoint
DOMMatrix
We know the coordinate of the click on the viewport, the width and height of the element, its offset left/top and we know the rotation angle (could be negative or positive [-180, 180]). So the function I'm trying to get to return the true coordinate of of any four-sided shape would look something like this:
function getClickedCoordinateOfElement(event, elementDOM, rotationAngleInDegrees) {
let coordinate[];
let x, y;
...
return(coordinate[x, y]);
}
I think the solution requires some manipulation of the Sin or Cos of a triangle, but I'm not too sure.
I forgot to mention that the element is not anchored to the origin and could be anywhere.
How would we get the coordinate of the green dot in relative to the inside of the element? The top left corner (ax) of the element would be (0, 0).
I'm working on a script that will move a layer, right, left, up, or down. This depends upon which edge of the layer is inside the canvas.
I've managed to get the layer moving left and right (x-axis) using bounds[0] and bounds[2].
But when I try to get it to move up or down, it still moves left/right. Is it the bounds number I've got wrong?
var Y1 = bounds[3].as('px');
var Height = app.activeDocument.height.as('px');
//move down
if (Y1 < Height) {
activeDocument.activeLayer.translate(Height-Y1);
}
The first thing you probably want to do in a situation like this is to check the documentation. For .translate() we can find the following:
so to move horizontally we would use deltaX and to move vertically deltaY, in your code you're giving to .translate() only deltaX, so as expected your layer is being moved horizontally. To fix this pass 0 as a first argument and your Height-Y1 as a second one:
activeDocument.activeLayer.translate(0, Height - Y1);
I'm working on a script that will move a layer, right, left, up, or down. This depends upon which edge of the layer is inside the canvas.
I've managed to get the layer moving left and right (x-axis) using bounds[0] and bounds[2].
But when I try to get it to move up or down, it still moves left/right. Is it the bounds number I've got wrong?
var Y1 = bounds[3].as('px');
var Height = app.activeDocument.height.as('px');
//move down
if (Y1 < Height) {
activeDocument.activeLayer.translate(Height-Y1);
}
The first thing you probably want to do in a situation like this is to check the documentation. For .translate() we can find the following:
so to move horizontally we would use deltaX and to move vertically deltaY, in your code you're giving to .translate() only deltaX, so as expected your layer is being moved horizontally. To fix this pass 0 as a first argument and your Height-Y1 as a second one:
activeDocument.activeLayer.translate(0, Height - Y1);
browser.actions().dragAndDrop(elem, target).perform();
I can clearly understand the above code but I cannot get how to specify this element and target.
Take this example
browser.actions().dragAndDrop(slider,{x:100, y:0}).perform();
In the website in which I'm working on, I cannot find any x, y or anything I can match with that and develop.
So it will be helpful if someone explains with some example for x and y so that I can relate to it and make I work.
The dragAndDrop() has two ways to work.
One starts with the element to drag. Here elem works as normal ElementFinder, so something like dragAndDrop(element(by.css('div.my-class')), target).perform();.
Now the target works in two ways: Either as another ElementFinder like in elem or as coordinates to move, starting from the position of elem, moving x pixels horizontally and y pixels vertically (plus to the right or top, minus to the left or bottom). So {x:100, y:0} will move your slider 100 pixels to the right from the starting position.
dragAndDrop(element(by.css('div.my-class')), {x:100, y:0}).perform(); will therefore move the element(by.css('div.my-class')) 100 pixels to the right.