I'm building a grphical editor that allows moving objects, resizing etc.
In the picture you can see the upper rectangle. When I move the anchors it resizes just fine. However, when it has a rotation like in the lower image (ie. transform: rotate(20deg)) and I move the anchors, the rectangele starts floating in different directions depending on the rotation. I'm guessing it's because the the x and y axis get rotated as well. I'm looking to do some sort of calculation to keep the rectangle in place just as if it weren't rotated. transform-origin doesn't cut it as it has other transforms applied to it.
Could anyone help me find what x and y offset I have to apply to the position when it gets resized. Thank you very much!
Related
In JavaScript, when we increase or decrease the value entered into the width of a rectangle, do the changes in the output rectangle happens only from the right side?
If I explain my doubt more precisely, I saw that when I increase the width, the rectangle stretches out in the right direction. The size of the rectangle change, and it happens from the right side only. When reduced, it stretches in. Which means the width of the rectangle becomes small. but it also happens from the right side of the rectangle. so I want to know if this's always this way for the 'width'?
And also when I change the height, the changes only happen from the below part of the rectangle. the upper part never stretches. so is it always the below part?
Can I please know what's the reason for this? and if it's the same everywhere when I code in JS.
In my experience the GUI always regards top-left point as default position.
That's why you get kinda result on changing width or height.
It's same in MFC, API, WPF, Canvas and major platforms.
Hi I have a problem with getting the x and y coordinates for the corner after rotation. When I transfer the image, it always gets the correct coordinates, but as soon as the image is rotated, it receives the coordinates from the corner of the viewport, not the image :/
Is this with the viewport rotated or the image rotated? If it's the image rotated, I believe this should work:
viewer.world.getItemAt(0).getBounds().getTopLeft()
Actually, that might work properly with the viewport rotated as well. The result is in viewport coordinates... I assume that's what you want? If not, you can convert to the other coordinate systems as needed.
I'm trying to make a vertical draggable thermometer type component. You hold on the circle thing with the arrows and drag up and down and it moves with the cursor. With normal HTML/JS this is easy but I can't seem to figure out how to get the svg piece to move with the mouse. Right now it moves in the right direction but it's way off from the cursor.
I've read about a dozen answers of this on Stackoverflow and they all seem to use the same code which i have at my link, but it's still off. I'm not sure what I'm doing wrong at all.
Demo: http://jsbin.com/qoyozej/3/edit?html,js,output
p.s. the width and height in the <style> tag works fine in Safari and Chrome, but not in Firefox. I'm not sure how to fix that yet so the color bars wont show up in Firefox right now.
You are using evt.clientX and evt.clientY, which gives you the coordinates of the mouse event on the page.
You need to subtract the (top left) position of the SVG from the coords before you do the transform.
apart from calculating the relative position of your element on the page (as paul's answer suggest), you also need to consider how viewbox affects your graphic;
for calculating the correct position relative to page you can use getBoundingRect() method on the svg elem,
for calculating the correct scaling you could do some math dividing height with viewbox height and multiply that by cursor.y (or you could use scale inside the transformation).
I want to implement similar thing (page flip) and was wondering how turn.js created it's effect. It use css transformation: translation and rotation to create the effect. I was checking in inspector that there are two wrappers with rotation (as pointed in this answer) but rotation are
outer wrapper positive number like rotation(30deg) and
inner wrapper negative rotation with the same angle rotation(-30deg) (if dragging bottom left corner).
I try to use the same thing in test page (only rotation) but the only thing that work is removing the corner, and it don't rotate the page (I use image) in demo is upside down when angle is 45, why this don't work? If I set
-webkit-transform: rotate(180deg) translate(102px, -326px);
on the image it's right but why turn.js don't apply any transformation to original element of the page?
Here is jsfiddle.
I found that rotation the page that is below is in different div, the current page with positive and negative rotation is only for clipping the current page.
Scenario:
I have an area on the browser screen n x n in size (500px x 500px for example, ie 250,000 pixels).
As the mouse rolls over the area, it "paints" the pixels it passes.
Percentage of filled/unfilled pixels are displayed
Optional advanced scenario: As the mouse rolls over already painted pixels will "unpaint" those pixels, or paints those pixels in a different colour.
Solutions/Issues
What would be the most efficient way of detecting, logging and displaying the scenario?
The defined area could be a div, spacer image, image map, table, canvas?
How would the pixels be drawn?
image or div created for every mouse movement
server-side image created based on pixel co-ordinates?
Is it too inefficient to pass the mouse position(s) every time the position changes?
What would be an efficient way of displaying 250,000+ dynamic pixels/objects/data?
Check out my recent question for the drawing on canvas part, I got a number of good answers.