Keeping rectangle in place after rotating - javascript

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

width and height of a rectangle in JavaScript

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.

How to get image corner position after rotate in OpenSeadragon

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.

How to get svg and mouse cursor position correct

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).

How page turn effect work in turn.js

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.

Drawing pixels based on mouse position

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.

Categories