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?
Related
I'm creating my portfolio, I drew some layout but now I've problem with code. As You can see on the image.
Visualisation:
the black area will be a photo
the white area will be a normal bacround color / maybe also image i'll see.
Full width scalable
I want to use background image that will be scalable and the problem is that I've no idea how to resolve problem with the links (grey field). Because I want link gaps to start at the end of the screen and end before the white background (at the boarder).
I was thinking about the image maps but it is not a good solution... Maybe You've got an idea.
I've found similiar problem (about positioning link gaps according to background position - scaleable) - Link is here - stackoverflow
Now I have the same problem like in the question above - it is working if I won't use proportional background scaling.
It's a tricky layout.. BUT! (I assume full-width scaleable and fixed aspect ratio)
Since you know the angle of the intersection of the areas will be the same. If you put your links at known y-axis percentages from top corner you will have a fixed precentage in the x-axis.
Then if you choose to go full browser width you could use 'position: fixed'(CSS) for the links together with scaling and top/bottom/left/right(CSS).
Otherwise i believe you could use relative positioning with the same principle.
Hope that will get you on your way!
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/
I have an element of given dimensions (say, 100x300 px) living in a container of the same height and variable width that I want to transform using rotateX around -webkit-transform-origin: top center; while picking the -webkit-perspective of the container so that it appears that the bottom line of the image stays where it is but only expands to fill the entire container.
Wow, that sounds confusing. Here's a picture:
So basically, I want to create a trapezoid with a fixed upper width and a variable lower width. I can't however quite figure out the math behind the relations... Javascript welcome. Following example works IF the body is 600px wide: http://jsfiddle.net/24qrQ/
Now the task is to change the perspective and rotation continuously with the body width. Any Ideas?
Okay, after a glass of wine the maths came back to me:
First, let's look at the perspective / rotation ratio. Viewed from the side, it looks like this:
The red element is rotated around its upper edge, if we project its lower edge to the lower edge of the container, the intersection between the projection line and the line perpendicular to the container at its upper edge is the required viewpoint. We get this by simple trigonometry (notice phi here is in radians, not in degree).
If we apply this, the lower edge of the element will always appear on the lower edge of the container. Now the free parameter is rotation. This seems to have the relation
rad = pi/2 - element.width / container.width
for sufficiently large widths, however I can't quite wrap my head around the actual relationship. Here is a fiddle: http://jsfiddle.net/24qrQ/6/
Basically, you are trying to figure out how to put an object in 3D space, so it lines up with a 2D viewport. That's always a tricky thing.
I don't know what the math is, and most other probably don't either. This is hardly a common problem. But here's how I would go about figuring it out.
The only variable here is width. And the 2 values that would need to change based on the width is -webkit-perspective on the container and -webkit-transformon the inner element. So I would manually edit the values for a few different widths and record the 3D values that you had to enter to make things look right. (I'd use the web inspector to edit the values in realtime so you get immediate feedback)
One you have a few data points, plot them out on a graph and then try to figure out how they change. I have a hunch it's a parabolic curve, but it may but hyperbolic or sinusoidal too, my 3D math isn't good enough to know for sure.
Then you can try figure out an equation where when you input the widths you've sampled, you get back the manual 3D values you set previously. Then use JS to read the width of the container and set the CSS values to make it look right.
I've done that with 3 widths 300, 450, 600:
http://jsfiddle.net/24qrQ/3/
Some trends are obvious. As width increases, perspective goes up at an increasing reate, and rotation goes down at an increasing rate.
Figuring out the exact formula, is now up to you.
As a simpler alternative, if figuring out a formula becomes too difficult, you could manually curate a handful of widths and 3D values that look nice and store them in JS somewhere. Then you could just linearly interpolate between them. It wouldn't be exact, but it might be close enough.
It would also be less fun!
I'm sure this problem isn't one you guys aren't unfamiliar with.
For example, if I had a picture, which I displayed at the size 32 by 32 px, and then enlarged with JavaScript to 64 by 64 px, the picture quality goes terrible for about 1 to 2 seconds, and then gets better.
So is there a way to prevent the quality of the picture from going down when it is resized using JavaScript?
You could swap the images for preloaded imaged, instead of resizing.
well it depends on the size of the image first of all, if the image size is greater than what you have set in your code, it is obvious that it will show you with little more clarity if you zoom with javascript.
if the image itself is less size and you want to zoom, the image will be distorted and pixelated.
also when ever you are trying to zoom or make it bigger try with equal proposition, or you can use css zoom attribute to zoom
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.