Currently using the aspect ratio of a background image to size the Div containing it.
I'm using padding-bottom (imgwidth / imgheight * w) to give it it's "responsive height".
It lines up perfectly until I start zooming in and out for different screen sizes. 100% width and above is perfect (only because I lock the max size at 1500 or I guess I'd have the same issue otherwise).
But zooming in at for example 90% I start getting gaps between the two as I have two background divs one on top of the other.
It's being caused because, for example:
padding-bottom: calc(100% * 600 / 1500);
Is returning a decimal point when zoomed in and the value is being rounded up for pixels.
Is there a solution to this? Or some javascript that can correct it?
Related
I'm trying to get GraphicsMagick to resize my various images into a standard square. The input is always variable - vertical, horizontal images, different sizes etc.
I want to basically have:
- A white background canvas # 600px x 600px
- The image sits in the center of that canvas # 500px x 500px
I've tried so many from the docs but I can't get it working correctly.
This is what I have working so far (JavaScript):
gm(content)
.autoOrient()
.resize(600, 600)
.gravity('Center')
.extent([600, 600])
.background('#FFFFFF')
.flatten();
And it just comes out the correct width, but keeps the ratio so for a rectangle, it comes out at 600px wide and 240px high (as it kept the ratio).
Any help appreciated!
The solution to my issue was simply that I set extent as an array. Final solution:
gm(content)
.autoOrient()
.resize(550, 550)
.gravity('Center')
.background('#FFFFFF')
.extent(600, 600)
.flatten();
I'm trying to show images with different aspect ratios on 1080x1920 canvas. So when I try to show 9:16 images, it scales perfectly, but if aspect ratio is 4:3 or 3:4, scaled image stretches.
What I want to do is, if aspect ratio is 3:4, scaling and showing image as 9:16 on center and cutting edges. (So if original width is 1440, showing only 1080 and leaving 180px at each side off the screen. And if original width is 3024, scaling it down to 1440 and then cut)
And if image is not portrait but landscape, showing it on center and filling remaining space with some color.
How can I achive this? Does KonvaJS provides easy way to do this?
No konvaJS does not provide a way around that, you need to use your own logic for positioning the image at the center for different resolutions.
I have used logic for finding the image resolution which fits the provided dimensions in my personal project. Check if it helps.
function getScaledImageCoordinates(
containerWidth,
containerHeigh,
widt,
height,
) {
var widthRatio = (containerWidth) / width,
heightRatio = (containerHeight) / height
var bestRatio = Math.min(widthRatio, heightRatio)
var newWidth = width * bestRatio,
newHeight = height * bestRatio
return {newWidth, newHeight}
}
You can find the image resolution that fits your container (say 1080x1920) and then center position the image on Konva Stage
When I first started this project that I'm working on, my canvas size with 1400px wide and 480px tall. I realized that I am going to need to make the canvas the same size as the window itself later, so I did that and everything inside of the canvas zoomed in or something. I set a drawImage(); to be 300 px wide and 180 px tall, and it is a LOT bigger than that, the image is actually the same width as the canvas now. Any suggestions? Here's the link to the project:
http://brycemckenney.com/animation-app
Thank you guys!
You have set the dimensions through css, instead of the physical dimensions of the (image) canvas.
The relevant piece (for others to read in the future) of your code is:
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
var windowHeight = $(window).height();
var windowWidth = $(window).width();
$(canvas).css({
height: windowHeight - 8,
width: windowWidth - 8
});
Think of it like this: suppose you have a normal jpg-image.
That jpg has it's own 'physical' dimensions (aka width and height).
In both HTML and CSS you can set the dimensions (in px, percent, etc) that you'd like the browser to render (scale) the picture (hey, the picture already has a immutable size right?).
Now for canvas:
In order for canvas to have a physical width/height, you have to set the .width and .height of the canvas-element itself, either in HTML or per javascript (a side-effect is that setting the physical dimensions is that the canvas will clear itself, as per spec).
Then to scale the image (like you did with the above jpg example) you use css (again in px/percent/etc).
I think this is a clever solution by the way to add that new canvas-element to the HTML-Spec!
So, rounding up:
A canvas with a width and a height of 300 px rendered as 100% of a container (like document.body) that measures 900x900px will be scaled-up 3 times!
The reverse (scaling down) will let you draw even more crisp lines by the way!
Hope this helps your understanding!
I need to do something like this:
This may look quite easy, but there are some requirements:
- the width of the containing div should depend on the text length (is it possible at all in CSS?)
- all circles should be positioned randomly - this is the most diffucult part for me.
As I'm using border-radius for creating circles (setting height, width and border-radius of 50%) I try to create some kind of grid in JavaScript where I iterate through each element and get its dimensions. Then I get the position of previous element (if any) and add them to the current element dimensions. Additionally, adding some margins will help avoid collisions. Is it correct approach?
I'm just looking for a suggestion how to solve my two issues.
Circles that scale based on size of content.
This is something you will need to solve first, because you wont be able to place them anywhere without first knowing their dimensions.
Naturally the size of a DIV expands first by width, then by height. That is, the maximum width of a container must first be utilized before moving on to the height constraint. Because of this, making a circle scale with equal radius may prove to be quite difficult without using a relative averaging.
Relative averaging is finding the average dimensions of your height / width based of the exhisting area of the contianer bounding your content. For example:
The width and height of the DIV bounding your content can be detected with javascript. Let's say youve discovered those properties too be 200px x 20px respectively.
Your total area is width * height so 4000px; But we are trying to acheive a square so we can apply rounded corners and form a rounded circle. We want to find dimensions of a rectangle that will be equal to the same area and then apply those new dimensions.
To acheive the same area with an equal width * height you can do something like:
√ 4000 = 63.2455532
Thus: 63.2455532 x 63.2455532 = 4000
Random placement of DIVs, and avoid collisons between DIVs.
After finding dimensions, you will be able to use a rand on your (X,Y) coordinates for the placement. Push these coordinates and radius onto an array. Use recursion too place the remaining circles on collsion failures. A collision failure would come from an element that has overlapping (X,Y)+radius relative too elements in the array that were pushed successfully.
I met the following problem. After drawing line on several canvas of the same thickness, thickness of displayed lines was identical (see print-screen)
Sizes of canvases are not the same. I'm wondering does thickness of displayed line depends on sizes of canvas? And whether it's possible to draw on canvas without determining it's width.
here's the screen
Thank you in advance
Canvas size attributes (width and height) determine the number of logical pixels in canvas. The CSS size of canvas must equal canvas size to get exactly 1 to 1 mapping of pixels