Perspective transform doesn't scale when the width scales? - javascript

If I resize the browser so that the height is smaller, the picture stays perfectly scaled and in the right place. However, if I resize the browser so that the width is smaller, the pictures move and it doesn't not scale properly.
I'm using the perspective transform on the second container that will contain the image:
transform: translate(-50%, -50%) perspective(1000px) rotateY(50deg);
Example: https://jsfiddle.net/a7kw47pg/1/
If I create an html file with that code and run it on my browser, I can't see the first "t" on the watermark. However, when I resize the width of the browser so that it's smaller, I am able to see the "t". I want it so that no matter what size the browser is, I will not be able to see the "t" (basically the rotated picture with the perspective to stay locked on that exact spot).

The reason why it scales differently is because all the original div positions are scaling on a proportional basis while the transform perspective changes on an absolute basis. The perspective value can be thought of as the number of pixels of distance from the viewer's eye to the screen. Any 3D rotation will of course make your image smaller (in this case it's only horizontal because you've only rotated about the vertical axis). When your imaginary eye is a fixed distance from the screen (in this case 1000px), then you see a smaller relative perspective-effect when the image is small and a larger relative perspective effect when the image is large. (Imagine standing 1 meter away from a huge building - the perspective effect is crazy. But now imagine standing 1 meter away from a little 1-cm cube - it basically looks the same as it does from 1km away)
In order to keep the horizontal size of the image constant, you need to dynamically modify the perspective distance as the window size changes, such that you keep it proportional to the horizontal size of the containing div.

Related

raphael js font-size auto adjust

I have a drawing that is edited in one screen - all paths drawn are saved in DB as percentage coordinates (as I know the width and height of the paper).
This is like this because I then display the same drawing in different sizes on other pages (so the percentages can easily be calculated back to real coordinates for each size).
The problem I have is I need to add text to the drawing, and as far as I know there is no way of setting the font size as a percentage it has to be in pixels.
Of course this doesn't work if I edit the drawing in a 900x500 paper then it is displayed in a 450x250 paper - I need it to automatically decrease the font size in proportion to everything else.
Difficult issue to explain - hopefully this is clear to someone
Can anyone help? any ideas for a different approach?

Make HTML canvas bigger while scaling the website

Do you have any idea how it could be possible not to scale a HTML canvas element while scaling the whole website (ctrl+"+" in most browsers) but to make its dimensions bigger? I have got an application where you can view large images, zoom and pan them in the canvas element. Now I think it would be cool to scale the website with ctrl+"+" to have more space for viewing the image. As it is by default the canvas scales, too and you gain nothing.
You can use technique described in this article http://novemberborn.net/2007/12/javascriptpage-zoom-ff3-128.
The main idea is to place any two elements and set for the first element css value in pixels like top\left\width etc and for the second element percentage value. When you scale the page the percentage value stays unchanged, but the value in pixels changes depending on zoom factor.
Based on these changes you can calculate the scale factor and multiple it with canvas dimensions to scale it.
How to calculate scale factor you can find in the demo link from article in the script block.
Something like Zoomooz.js could work - http://janne.aukia.com/zoomooz/

How to properly scale a webpage, according to zoom, resolution and windowsize?

I'm busy developing a web-app but I can't seem to find the correct way to scale all items so it fits the screen.
As you can see on the picture, the grey bars are menu and need to stay in position. The content in the middle (blue block including the white background) needs to move left and right, but also up and down. Resizing the window, zoom and whatever else should be taken into account. My current technique fails lots of times, so I was hoping if any of you knew some good technique.
So as I said, the content needs to move up and down, left and right. The parent div of all pages is the same width as all pages are together. So one page should have the correct window width. Same goes for height, but there are just 2 pages on the horizontal axis. Currently I'm adjusting size using JavaScript/JQuery.
Just as a sidenote, it might be possible to scroll vertically when the current content page is bigger than the screen can display. Horizontal scrolling is not possible.
Very hard to explain, I'm doing my best, but I hope someone can help me.
That's a lot fun! Perhaps working with em units will assist you. It's a neat little trick.
1 - Set the font-size to 100% on your parent container.
2 - In all of the children elements, use ems for all of your dimensions, padding, margin, borders, font sizes, etc.
3 - In Javascript, when the page loads, capture the browser dimensions and save these to variables for later use.
4 - Setup a window resize event. When the window resizes, get the new browser dimensions. Now, some basic math will allow you to compare the new browser dimensions to the original browser dimensions - and get a percentage.
5 - Still in the resize event, set that new percentage to the font-size of the parent element.
You can set this up with just your center container - or whatever. Any children elements of the main container that has the font-size property (and are defined in ems) will automatically scale with the browser window.
Text will scale
Border size will scale
Border radius will scale
Dimensions, padding, margins will scale
It's neato.

How to get this scaling boxes image and text in proportion when you resize the window to any size?

See this example http://jsfiddle.net/37aMB/15/
If you resize the area at some points image will have have space at bottom and some time right side container will have space at bottom.
I want to make everything in proportion and with equality. Red backgeound should never be seen
You may try to set fixed size for this banner, and then manipulate zoom style attribute.
Here is modified example. It's not pixel perfect yet, but I have the impression it scales better.

Mode7-like perspective transform in canvas?

I'm making a canvas-based game engine and am wondering if anyone has any good info on how to achieve an overhead view perspective. What I'm looking for is somewhere halfway between the traditional birds eye view and the old SNES mode7 view. Just a slight angle to give the illusion of 3D.
I'm trying to figure out what is going to be the best way to deal with the perspective skewing. I'm not doing rotations so 3D matrix stuff would be going overboard, but I need to be able to deal with rendering the map layers at a consistent angle and it'd be nice if the angle was adjustable. I also need to deal with the depth warp. Basically, the bottom row of pixels should be 1:1 pixel width and height, then for each row it'd get, for example, 5% smaller or something like that. What I'd like is to be able to supply a large canvas as a texture and then supply a camera angle between 0 and 90 where 0 is perfectly horizontal and 90 is birds eye view.
Anyone have any related tutorials or sample code? I've searched online a bit, but everything I've found seems to either be unsuitable for use in this particular application or overly complex, doing all sorts of crazy 3D skewing and rotation stuff. All I want is to take the normal tiled grid and lean it back a bit, no rotations or complicated stuff like that.
Here's an example of what I want;
Here's an example. http://img801.imageshack.us/img801/2176/perspectivesample.jpg
The bottom pixel row is 1:1 pixel ratio, and each row above that progressively gets shorter horizontally and vertically. The source texture of the top center region is normally about half the height of the bottom center region, but it has been shrunk vertically and horizontally to fit the perspective.
What I'm thinking might work best is to render the current viewport state to another canvas in flat, birds eye view, with approximately 50% extra space on the top and sides, then slice an upside triangular region from that and draw that to the actual visible canvas.
Only problem is, I suck at math when it comes to calculating angles and such.
if i understand you right, you just want a simple trapeze transformation. if so, maybe this or this link helps you out. for images that aren't centered it would just be an additional rhomboid tranformation, wich is easily possible with canvas, as far as i know.
What you're talking about is something that can be done simply with any 3D api. However since you've decided to try to stick to 2D canvas, you have to do everything in the 2D world which means working with rectangles, rotation, scaling, skewing, etc. Also know as affine transformations as mentioned the other answer.
What you want to do is possible, but since you want to use 2D you have to think in terms of 2D functions.
Generate your initial image.
Add a slice from the bottom of the original image to the bottom of the canvas, very slightly positioned to the left so the center of the image matches up with the center of the current canvas.
Very slightly increase the scale of the entire image
Repeat until you get to the top of the image.
The Pseudo code would look like this...
imgA = document.getElementById('source');
// grab image slices from bottom to top of image
for (var ix=height-slice_height;ix>=0;ix-=slice_height)
{
// move a section of the source image to the target canvas
ctx.drawImage(imgA, 0,ix,width,slice_height,
0-half_slice_width_increase,width,slice_height);
// stretch the whole canvas
ctx.scale(scale_ratio, 1);
}
This will take lots of tweaking, but that is the general solution.
scale_ratio will be a number slightly larger, but very close to 1.
ctx is the standard canvas 2D context
half_slice_width_increase is the 1/2 the amount the canvas will grow when scaled by the scale ratio. This keeps the scaled image centered.
To look correct you would want to transform the background tiles first before you add the icon overlays.

Categories

Resources