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.
Related
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!
Per the GIF below, as you can see as I increase/decrease the window size the image on the left grows and shrinks as it 's supposed to. What I've done is include the line inside of the "image wrapper" that I have set up. My goal here is when the image shrinks I have the line line up with its respected block of text you see on the right. Right now I have the line positioned as absolute with percentage values for left and top. Is there a way to adjust the rotation of the line for what I'm trying to accomplish? How can I get that line to line up with the title no matter what? Are percentages possible for rotation? (I don't think so)
This raises one concern of mine. Sure, a CSS only solution would be great, but the concern is compatibility with browsers. If the solution can be in JavaScript that would be just as perfect, but I wouldn't know where to start with something like this for JS.
Any other suggestions are welcome.
GIF Example:
Code example used: https://jsfiddle.net/01sxrjkr/ *Make sure the preview window is <768px
You are rotating from the wrong end of the line. Try this instead, then just use media queries to alter the number of rotation degrees in relation to the text on the right for each of the most common media widths. Remember, people don't go around re-sizing their screens, so having it perfect at every single pixel of width is unnecessary and really not possible with what you have going on there. You're image is responsive and your text, of course, is not. therefor as the width of the screen is reduced, your left column decreases in height as your image gets smaller while your right column increases in height as more text wraps.
.line.line-1 {
left: 62%;
top: 39%;
transform: rotate(14deg);
width: 40%;
}
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'm manipulating divs with javascript all the time.
Sometimes I need to make those divs fit inside a container who's size is contantly changing.
One way to make that happen is to use css scaling.
The problem with scaling is that it simply schrinks the picture of the element.
The system continues to see the element the same way. So all location etc. become skewed. For instance, if I position the div to become top:0%, then if the element has been scaled down it will not go to zero percent but a bit below that, because the system thinks the div is bigger than its visuals show.
This change in behavior causes a lot of complications as the system is now making assumptions about the elements that simply dont hold true.
It's bad programming.
I looked at the 'zoom' but the articles warned against using it.
Is there any way to scale elements and also keep the system updated on whats actually going on?
The default transform-origin is 50% 50% (the middle of the element), so when you reduce the size of an element with scale, the edges are "retracted" from all sides towards the middle.
so the top left corner appears to move down and to the right. But if you set the transform-origin to 0% 0% (top left) only the right and bottom sides move.
Hope this helps!
I recently asked a question about scaling an SVG / Raphael JS layout to fit an entire screen using percentages and transformations. What I didn't fully realize, is that SVG (or, at least, Raphael) scales from the center, which is no good. This makes it look a little odd when trying to align various elements.
My design goal is to create a base layout at 1280 x 720 and have it automatically detect the screen resolution to fit the height and keep its aspect ratio. The important content fits right in the middle, and two panels can slide in or out if the width is too small, or whatever (need to work on that later).
The solution I was thinking about (which I haven't really tested), was to pretty much ignore element.transform(), and create a custom scaling function. Each element would, somewhere, require an additional attribute where it is to be scaled to (for example, bottom-right corner, top, etc). And, the, the element would just be redrawn with the new dimensions. An element that has its 'anchor' set to top, would shift one pixel to the top and left, and expand one pixel to the right at a time. Or, something like that. As for text, I was just thinking about using percentages for the font size.
So, my question before I start tinkering, is- are there any SVG-based javascript libraries out there they have this functionality built in already? I was looking at Snap, svg.js and D3 (which I did not understand at all), but I couldn't find anything related. Or, are there some things I am missing with Raphael?
Or, maybe I am thinking about this too much and going about it wrong?