I have made a simple jsbin to draw a line between 2 points. ( no drawing libraries. just js/jq).
I have already have the code which calculates the angle ( I took it from this library).
so it looks like this :
When I drag the right bottom circle ( I added jquery draggable) it all looks good.
Why it looks good ?
becuase the code of origin-transform is : top left
$("#line") .width(...)
.css('-webkit-transform', 'rotate(' + angle + 'deg)')
.css('-webkit-transform-origin','top left').
So the div's (red line actually) rotation axis is the top left point.
Great.
So where is the problem ?
It starts when I mess with the left top circle... here - I dont know how to deal with the red line position...
How can I fix my code in -webkit-transform-origin in order to support both changes ?
You just forgot to set the left offset for the line:
Add
.css('left',x2+10)
(and change .css('top',$('#box2').offset().top+10) to .css('left',y2+10))
and everything will work fine:
Your modified example - now with correct start;)
Related
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);
I'm animating the height of a drawRoundedRect instance, however, because it starts drawing from the upper left corner, it's animating from top to bottom, and I need it to start from the bottom.
Is it possible to flip my graphics instance (I tried by setting the scale to inverse, but this doesn't render anything, perhaps it only works on sprites), or to start drawing a rounded rectangle from the bottom?
EDIT:
Okay so I found out it's possible to animate my height going in to the other direction by just multiplying my interpolated value by -1:
graphics.drawRoundedRect(
x,
y,
barsWidth,
interpolatedHeight * -1,
10
);
However, now the radius isn't working anymore, it's just drawing square rectangles..
TIA!
I am not entirely sure that I did understand the question but if a got it right, all you need to do is to change the pivot of the rectangle you are animating. In your case, pivot.y should be equal to the rectangle's height rectangle.pivot.y = rectangle.height. After you change the pivot you also need to position it /the rectangle/ accordingly, so it could retain its visual position rectangle.y += rectangle.pivot.y
a simple demo https://jsfiddle.net/4L1od09n/23/
I'm trying to get the style.left and style.top of a rectangular div, after it has been rotated using style.transform=rotate(90deg).
I understand how the div is being rotated, with it being rotated around a 'transform point'. And I also understand that a div could be rotated by 45 degrees, so giving the new top/left of that would be awkward (In effect giving the bounding box left/top).
But back to the original question, rotating the rectangular div by 90 degrees, is there a way to get the 'new' left/top?
The reason I need this, is for a project im working on to upload images, allow the user to zoom, rotate etc, but currently having to do it with PHP to keep all the dimensions correct for the final image (Which is obviously bad, because I'm having to keep loading a new image once PHP has done the rotating/zooming etc)
I've also made a little jsfiddle showing that the top/left position doesn't change when it is rotated
Okay, thanks to the comment left above, I managed to throw together an answer.
Basically using:
newleft = parseInt(div.style.top) + Math.cos(90) * parseInt(div.style.height);
newtop = parseInt(div.style.left) + Math.sin(90) * parseInt(div.style.height);
after the div had been rotated.
I've updated my jsfiddle aswell, because the one in the comment above uses jQuery, but this way uses only javascript.
I try to calculate the collision of the edges of an rotated Rectangle.
Here is an example on jsFiddle : http://jsfiddle.net/XgHxx/
Something like this:
if( mask.x < img.x * rotate_Factor ) mask.x = img.x * rotate_Factor ;
As you see my Collision is only for the not rotated Image.
And i want the Rectangle to be inside of the image even when its rotated.
Thanks, Mottenmann.
ps.: I made an example of how i think it could be calculated :
It looks like it already has been answered: see this question How to check intersection between 2 rotated rectangles?, there's also an answer that provides a JS implementation.
Thinking from my weak mathematical mind, you can check that by finding out if any of the corner points of the mask is contained by the boundary lines of your image.
You can do that by calculating the line equations of your image (based on its position), then check to see if any of the corner points of the mask lie on any of the boundaries and then stop the movement of the box in that direction in which the corner point is hitting the boundary.
Just a couple of mathematical formulas.
There is probably a better way to do this in jquery but you don't need any library for the above solution :)