I am using cocos2d to develop a game and I came across below situation..Please some one guide me
this.scalesizex = this.image.height/winSize.height*0.7;
this.scalesizey = this.image.width/winSize.width*0.7;
myNode.scaleX = this.scalesizex;
myNode.scaleY = this.scalesizey;
In Above code I am trying to scale my image to 1/7 of my screen size , I know the original image width and height , Can any one tell me is it possible to get the image width and height after scaling ?
p.s: I am unable to set actual image height and width , So I am using scale to reduce my image width and height to fit my screen
If you want to scale the image to 1/7th of your screen size, the scale should be computed as follows:
this.scaleX = winSize.width / (this.image.width * 7);
this.scaleY = winSize.height / (this.image.height * 7);
Then, you can compute the new width and height by multiplying the image's original width and height with these scales.
Related
I am facing a challenge on my html page to find the scaled height of an image in a container whose dynamic width is known
Let the width be var wid = 740; for desktop, it may vary based on screen size, but the value is know in some js function.
Suppose I have uploaded an image with size 600x591, It will scaled to the container with width 740, What i need is to dynamically find the scaled height value
In the above example scaled height value is 729, The value known to me is orginal image size 600 x 591 and container width 740 (Here the image is upper scaled)
Another example is image with size 1170 x 574 This is scaled to 740 x 363 , So I need to find the value 363 dynamically from image resolution (1170 x 574) and container with 740
var wid = document.getElementById('wrapid').offsetWidth; // wrapper width
var width = imageWidth;
var height = imageHeight;
var hei = 0; // this is for wrapper scaled height , need a calulation to find this
Note: The container with can vary based on screen size but it will be a constant.
Any help would be much appreciated, Thanks in advance
Got a solution, which is added below
hei = Math.round( (wid*height) / width );
I have added image into canvas and dynamically I want to change image height and width according to the rectangle height and width. I have done calculation of image height and width according to rectangle height and width and original image height and width.
Using below code I have changed image height and width but image quality is getting very low
var image_height = 200; //For now here image height is dummy
var image_width = 150; //For now here image width is dummy
var obj = canvas.getActiveObject();
obj.setHeight(image_height);
obj.setWidth(image_width);
obj.setCoords();
canvas.renderAll();
I ran into the same problem a few days ago. The solution I found is to not try to set widthand height but rather ask your image to scale up to the canvas dimensions.
Here is how I did it :
var scaleWidth = canvas.getWidth() / img.width;
var scaleHeight = canvas.getHeight() / img.height;
var scale = Math.min(scaleWidth, scaleHeight);
bgImage = new fabric.Image(img, {
[...]
scaleX: scale,
scaleY: scale,
[...]
});
canvas.add(bgImage);
canvas.sendToBack(bgImage); // useful in case you want a background but not **needed**
canvas.renderAll();
In the code above I compute width and height ratios, pick the lower one, and then I apply it on the picture using scaleX and scaleY properties.
If it still doesn't work for you, please let me know in the comments.
EDIT : I completed my linked code for more clarity.
2nd EDIT : It appears a method called scaleexists and could be used on your image. Looks cleaner if you want to keep your ratio (aka scaleXand scaleY properties would have the same value).
When you export canvas to image, You can add multiplier. It will increase resolution as well as size of image.
canvas.toDataURL({ multiplier: 8 });
I have an animation/canvas drawing where the pixels are hard coded and not relative. How do I make it so that the canvas and the drawing/animation scales with the browser size?
I thought of making the pixel values relative to the width and height of either the browser or the canvas but I don't know if it's a good idea.
Any tips?
P.S: I didn't post the code because it is almost 1000 lines long but if required I could post part of it.
Scale to fit, fill, or stretch
Almost every device has a different display aspect ratio, and then each setup will use only part, or all of the available screen to display the window.
The only real choice you have is how to adapt to fit the available space.
As the previous answer points out you can get the available size with innerWidth, innerHeight.
So lets assume you have that as width and height.
var width = innerWidth; // or canvas width
var height = innerHeight; //
Default resolution
I am assuming you app has a fixed aspect and an optimal resolution. To make it simple to adapt your app you need to keep the optimal resolution stored in code.
var defaultWidth = ?
var defaultHeight = ?
To adapt to displays you will need to get a scale that you set at the start of the app and adjust when the display size changes. You will also need the origin. the point where coordinate 0,0 is as for some solutions that will move.
These values are all relative to the current display that app is rendering on. They will take you native coordinates and make them conform to the device pixels.
var displaySetting = {
scaleX : ?,
scaleY : ?,
originX : ?,
originY : ?,
}
Fit, fill, or stretch
The 3 most basic options.
Stretch to fit. You stretch the rendering to fit the display but lose the aspect.
Scale to fit. You scale the rendering so that you maintain the aspect and all of the display is visible. Thought depending on the device you may have empty space on the sides or top and bottom.
Scale to fill. You scale the rendering so that it fills the device screen but you may end up clipping some or the rendering on the sides or top and bottom.
.
function getDisplayTransform(type, displaySetting){
displaySetting = displaySetting || {};
// first get scales
if(type === "stretch"){
displaySetting.scaleX = width / defaultWidth;
displaySetting.scaleY = height / defaultHeight;
} else if (type === "fit") {
displaySetting.scaleX = Math.min(width / defaultWidth, height / defaultHeight);
displaySetting.scaleY = displaySetting.scaleX;
} else { // type to fill
displaySetting.scaleX = Math.max(width / defaultWidth, height / defaultHeight);
displaySetting.scaleY = displaySetting.scaleX;
}
// now that the scale is set get the location of the origin. which is
displaySetting.originX = width / 2 - defaultWidth * 0.5 * displaySetting.scaleX;
displaySetting.originY = height / 2 - defaultHeight * 0.5 * displaySetting.scaleY;
// Note that for scale to fill the origin may be of the display or canvas
return displaySetting;
}
So now you just have to set the new coordinate system
ctx.setTransform(
displaySetting.scaleX,0,
0,displaySetting.scaleY,
displaySetting.originX,displaySetting.originY
);
So to fit with space to spare use getDisplayTransform("fit",displaySetting); or to fill use getDisplayTransform("fill",displaySetting); which will have some clipping top & bottom or left & right.
Once the transform is set you render as normal. You don't have to change the coordinates in your code, Line widths, font sizes, shadow offsets all remain the same as far as you code is concerned.
Set the canvas width and height to window.innerWidth and window.innerHeight respectively. So, the code would be like (in JS):
var canvas = document.getElementById('my_canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
Above code will only change the canvas size according to window width and height. To set the drawing/animation scale, you need to set its position/size dynamically (respect to the window width/height), not hard coded.
I hope you can help me :)
I want define the height of img, in relation to the 'actual' width of the image. But the width is dynamic, because it is in % of the parent object(Browser window for an wxample) .
Why do I need the height?:
Without the height it works fine, but I need it because I want that the top of alle pictures meet at top and my pictures have different proportion. (I know that this will compress the pictures... later I fix this with overflow, after I have an solution for the height problem).
How I imagine, I need something that gives returns me the px of the 'actual'(for an example, after the user changed the size of the browser window) width. And then I can multiply it by 3 and write that to the height. (for an proportion of 1to3)
This should give you all you need.
var img = document.getElementById('testImage');
// these vars are numbers representing a length in pixel
var w = img.width, h = img.height; // displayed dimensions, change on resize
var nw = img.naturalWidth, nh = img.naturalHeight; // dimensions of the original image file
var proportion = nh / nw; // proportion < 1 : 'portrait', < 1 : 'landscape'
Since width / height change on resize you have to update them in the moment you need them.
I am working on HTML5 project and i am getting somne problem.
Actually i have a canvas on which i am drawing image by using
ctx1.scale(0.5,0.5); // let assume
ctx1.drawImage(Image,0,0,canvas.width,canvas.height);
I want to calculate new height width of image after scaling (i.e scale=0.5). So that i could change the canvas height and width fit to image (as boundary).
Thanks in Advance
It is just as simple as multiplying the width by the scale!
Not sure about syntax though:
canvas.width * scale