How to generate image of specific real-world size - javascript

I need to generate image on which will be lines representing distances between frets on guitar. It is supposed to be printed later and act as mask for marking the frets. Therefore, the distances has to be precise.
How can i generate image of specific size in centimeters / milimeters, so when I print it, it will have same size?
I can use Python / JS / Java / C++

As #Chris G wrote in the comment:
Generating an image is pixel based. If you create an image that has a line every 300 pixels and print it at 300dpi, the lines will be exactly one inch apart. (dpi = dots per inch). You can set the dpi in Photoshop for instance, then make sure the image is printed # 100% scaling. (in case it's not clear: the "digital distance" doesn't matter, since you can always adjust the dpi to achieve a specific millimeter distance in the printout)
For example, if I make an image of size 6*300px and 9*300px and I print it with 300dpi, it will be 6x9 inches on paper.

Related

How to set minimum width/height on a fabricjs object?

I've been seen a lot of questions and answers about this but i didn't find anything doing the exact same thing as questioned.
I need a fabricjs object to can be transformed freely anytime but also set a minimum width and height (for example 50px) where the user can't reduce the size more than those parameters.
I've been trying this:
rect.minScaleLimit = 0.5;
But the canvas does not interpret the code line as wanted. If you stablish the minScaleLimit as "2", the rectangle will be setted as double size when you try to move it (and so with numbers bigger than 1, it just multiplies the size with the variable value). And if you set the variable to less than 1 it just does nothing...
Anyone with soulitions?
Thank you

Where are the magic numbers come from in `fabric.js`?

https://github.com/fabricjs/fabric.js/blob/master/src/shapes/text.class.js#L210
_fontSizeFraction: 0.222,
_fontSizeMult: 1.13,
Is there any clue how they come from ?
I found they are very useful to measure the actual text size.
_fontSizeFraction is approximately equal to 2/9, but my impression is that this value would be used to decrease the default size of the font.
Text Line proportion to font Size (in pixels)
_fontSizeMult increases values by 13%. It takes the font height, increases it by 13% to give you the total line height including line-spacing.
These variables look like defaults and were likely chosen by the developer based on personal preference.
They work for finding the text size because the text size is likely defined by these variables.
check this "issue" on fabricjs github where the fabric dev explain this
https://github.com/fabricjs/fabric.js/issues/2059#issuecomment-85897275

How do I calculate the distance between two points (vertically) specified by latitude and longitude and Altitude?

I have checked other questions but nobody is talking about how to calculate the height of an object using GPS,
Consider I have two data points vertically (not horizontally which calculates the distance), I have (lat1,lon1,alt1) and (lat2,lon2,alt2). now, How can I calculate the height of the object? Is there any formula using which I can get the height? consider a cube and data points are of the front top left and the front bottom left, can I get the height of this cube using these two data points using any formula?
If I am reading your question right, when you say height this is going to be the vertical. Simply go
alt2 - alt1
(assuming alt2 > alt1) or go
mod(alt1 - alt2)
This should give you the vertical rise irrespective of where the Lat, Long are in space!!!! Hope that solves it!
The question is not clear.
Is the vertical distance what is required?
Please see the image below.
The Height is simply Alt2 - Alt1. The Height units will be the same unit type as the input Altitude values. For example if Altitude2 is 10 meters, and Altitude1 is 2 meters, then Height is 8 meters. If your Altitudes are in different unit types you will need to convert them to be the same unit type prior to calculating the Height.
The Altitude values given by a GPS will typically be referenced to Mean Sea Level, and understood to represent the Height "Above Mean Sea Level" or "AMSL". Note: In low lying areas you may see a negative altitude, so be sure to account for that in your code.
The GPS should give an indication whether the Altitude is being expressed in Meters or Feet, and should also typically give the user the option to specify their desired units.
Note: In some disciplines you will see heights expressed in AGL ("Above Ground Level"), or even both AGL and AMSL. For example, a given building roof may be 50ft AGL, and 1050ft AMSL; indicating that the ground the building sits on is at 1000ft AMSL.
Note2: Height and Vertical Distance are the same thing. There is a drawing in the answers which incorrectly shows the Vertical Distance as a sloped line between two points, however that sloped line is actually the "Slope Distance". "Vertical Distance" will always be the difference in height when considered from the center of the Earth. "Horizontal Distance" will be the distance between two locations (i.e. discrete coordinates) at a common elevation. "Slope Distance" will be the distance between those two locations at their respective elevations.

How to center an image on canvas with CreateJS

I'm learning CreateJS, but have run into a little struggle.
Usually I'd center an image by dividing a canvas in half and subtracting half the width/height to those values, but unfortunately I don't know how to access a scaled down image's size using CreateJS.
Even using obj.image.width didn't get me anywhere, as it returns 0.
Is there any way of doing this, or some function I'm unaware of?
Massive thanks!
You can multiply the image size by its scale (scaleX and/or scaleY) to get the "transformed" size.
// Note that the image must be loaded before you can get the width
bmp.x = (stage.canvas.width - bmp.image.width * bmp.scaleX) / 2;
Here is a quick fiddle:
http://jsfiddle.net/lannymcnie/v6vuwntx/

HTML5 canvas pattern spacing

I am dynamically creating a canvas element which i want to use as pattern in the createPattern function.
However, the actual size of the pattern is not an integer value but a decimal, with dynamic size. Of course, it is impossible to create a canvas element with decimal size.
The question is: can i make the canvas to have a decimal spacing between the pattern tiles?
It's not possible out of the box. There is however a possible work around -
Lets assume the spacing wanted is 0.5 pixel, then you can:
Create a canvas of double size of the pattern image plus an extra pixel for spacing.
Set the canvas as pattern
Scale transform the main canvas, here it would be ctx.scale(0.5, 0.5);
Set fill style and fill the region with scaled positions (all coordinates must be scaled x2 in this case). For example:
If you want to fill the area 10, 10 to 100, 100, you would need to use 20, 20 to 200, 200 etc. dependent on the actual scale and assuming origin isn't translated.
The scaling will force the pattern to sub-pixel so you get the appearance of "decimal lines". Just remember to scale back to original scale afterwards (use save()/restore() for a simple solution to that).
If you wanted the gap to be 0.33 then use 3 as a factor, 4 for 0.25 and so on.

Categories

Resources