I'm creating a banner design creator (so people would be able to make their own designs with it's own texts, background, images, shapes and so on). I have various of sizes of my producs for example: 800x2000 mm, A4(210 x 297mm), 3300x2200mm.
For painting I'm using html canvas. I stucked on sizing the canvas. What's the best way how to handle different measurements with proper user experience? (canvas with width 3300 would not be the good).
Currently I have this code:
var proportion = variant.width >= variant.height ? variant.width / variant.height : variant.height / variant.width;
canvas.setDimensions({width: variant.width * proportion, height: variant.height * proportion});
This is one way to have your banner creator be responsive to display size:
Calculate the proportional scaling factor required to make your banner fit on the display size.
var displayWidth=1366;
var displayHeight=768;
var bannerWidth=3300;
var bannerHeight=2200;
// calculate the scaling factor required to make the banner fit on the display
var scalingFactor = Math.min((displayWidth/bannerWidth),(displayHeight/bannerHeight));
Resize your canvas (it now fits the display but has the same proportions as your banner).
canvas.width=bannerWidth*scalingFactor;
canvas.height=bannerHeight*scalingFactor;
Apply a background color to your banner (if desired).
context.fillStyle='Gainsboro';
context.fillRect(0,0,canvas.width,canvas.height);
Apply the scaling factor to your actual banner text font size.
// Scale a real banner 300pt font to display proportionally on the canvas
// The text on the canvas will be proportionally sized to the real banner size
var fontSizeInPoints=300;
fontSizeInPoints*=scalingFactor;
context.font=fontSizeInPoints+'pt Verdana';
Let the user position text on the banner.
// draw the text "Fun!" at the mouse position
context.textAlign='left';
context.textBaseline='top';
context.fillText('Fun!',mouseX,mouseY);
After the user has positioned their text on the scaled-down canvas, you can convert their mouse position back to "real world" coordinates by dividing the mouse coordinates by the scaling factor.
// convert mouse coordinates back to coordinates on the real banner size
var realBannerX = mouseX/scaleFactor;
var realBannerY = mouseY/scaleFactor;
Related
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
OK, so I need to create an "auto fit" feature when a button is clicked.
Pretend you have an area, which is variable in size due to the responsive nature of the page.
This area can contain a number of rectangles (specified by how many logged in clients there are).
What I need to calculate, programmatically in JavaScript, is the appropriate width and height of each client in order to "fit" them all within that area.
var area = $('.client-container').width() * $('.client-container').height();
var noOfClients = 3; // normally calculated dynamically
// Ratio (1.25:1)
var r1 = 1.25;
var r2 = 1;
How can I work out what width and height I should apply to each client rectangle?
I assume you have full freedom to resize the N clients and that their natural aspect ratio can simply reflect that of the screen. You won't always be able to make all clients the same size without wasting space. Take the square root of N, round it down, and that's your number of rows R. It's also your number of columns except that X=N-R*R clients don't fit. X is less than R. Just choose the bottom X rows and divide them into R+1 columns instead.
I want to zoom-in and zoom-out image on mouse scroll in HTML. There are multiple img tag without ID. So how can I do it using JavaScript or Ajax?
Just throwing the answer for the ones that will search for an answer to this question.
First, you will need to find a system to detect the mouse scroll.
If you are courageous, you can develop it yourself.
If you're not, you can find some pretty good libraries (ex : MouseWheel with JQuery).
Next, you will find another two ways to zoom in and out.
Easy way
First, let's cheat a bit.
When you will have to zoom, just multiply the height and width of your image by a factor you will decide.
To have height and width into a variable (JQuery)
var height = $('#image').height();
var width = $('#image').width();
For each scroll you will receive, you will only have 2 choices.
Once you are able to know if the mousewheel goes up or down, you will just have to do something like this (JQuery)
height *= 2;
width *= 2;
This way, by doubling the size of your image, you will have the impression to zoom in.
Less easy way
If you want to zoom in as you would do in a GMap object, you can do something like that.
var firstHeight = $('#image').height();
height *= 2;
width *= 2;
scalechange = (actualHeight / firstHeight) - 1;
offsetX = -(coordX * scalechange);
offsetY = -(coordY * scalechange);
$("#image").css('top', offsetY + 'px');
$("#image").css('left', offsetX + 'px');
First, you have to have the first height of your image.
Next, you will double the size of your image (zoom effect).
Next step is to calculate the scalechange. You will be able to find multiple explanations and many way to calculate it, my method is as good as another.
The two offsets presented are the new positions that your image will adopt (simple factor calculation, it's like making x percent on a price).
Last part is to set the new values of your image.
In the end, you will be able to zoom and unzoom with ou without centering the image at your mouse position.
Be careful : The calculation above in only to zoom-in. You will have to do some maths to get the zoom-out!
Go further ?
Another way to go further would be to place your image in a div.
<div id="imageContainer" style="overflow:hidden;">
<img id="image" src="YourImage">
</div>
By setting
"overflow:hidden;"
to your div, your image will zoom.
But everything that will overflow your div will be hidden.
If you set your div to the original size of your image, like this (JQuery)
$("#imageContainer").css('height', $('#image').height());
$("#imageContainer").css('width', $('#image').width());
Then you will have an image displayed that will always be at the same size, but your zoom will be effective.
If you combine this to a drag'n'drop method, you have a GMap object-like (zoom in-out, moove the zoomed image, ...)
Hope it will help someone!
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 have an <img> within a <div> which can be moved around using four directional buttons, for example:
The image is obviously larger than its container, hence the directional buttons to move it in different directions.
There is also a zoom control where you can zoom in and out. I set up the scaling method with ease, by just applying a zoom factor as a percentage to the base width and height:
scale: function(zoom)
{
image.width = baseWidth * zoom;
image.height = baseHeight * zoom;
}
// Zoom in 50%.
Scene.scale(1.5);
This is fine however the image scales from top-left, meaning that the image looks like it's getting sucked out towards the top left during a zoom in and spat back out when zooming out.
I'm trying to have the zoom effect apply from the centre of the container, like this:
But I'm finding it hard to get my head around the mathematics required to move the image after scaling applies to give this effect.
The closest I've gotten is to move the image based on the difference between the current zoom and the new zoom level, but it's still slightly off and gives a 'curved' effect when zooming.
Is there a common formula used to reposition an image so that it scales around a different origin (i.e. not top-left (0,0)).
This is what it looks like currently.
You have to take your original coordinates and calculate the center of your original image, that is x_center = x_orig + width_orig / 2; Then you can calculate the new x coordinate of your scaled image: x_new = x_center - width_new / 2. The same applies for y. Then move your scaled image to these new coordinates. If you do it after each time you scale the image, it will look as though it is scaled around its center.