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
Related
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 set the object scale value(width and height) based on the pixel value using three.js?
object.scale.set(0.05,0.05,0.05);
I need to set 0.05 value pixel size
Rephrasing your question, please correct me if I got you wrong:
You want to use pixel values instead of the relative values to set the size of your object as it appears on screen.
Now, the problem here is, that three.js (or even webgl) don't really use a concept of pixels internally.
How large (in pixels) an object appears on the screen depends on a lot of factors:
the css-size of the canvas element and the devicePixelRatio
the width and height of the canvas element
obviously the size of the object
the camera-position and other properties (aspect-ratio, field-of-view, relative orientation and position to object)
So pixels will simply lose any meaning when it comes to 3D-graphics. There's nothing keeping you from using any unit you want for sizes and positions, but that doesn't make it have any relation to pixels on screen.
You will also want to check out this answer: THREE.JS: Get object size with respect to camera and object position on screen
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 have made a script: http://jsfiddle.net/radar24/XZgh4/ which scales the given dimension into the outer div. everything seems fine, until I enter a dimension such as 200 x 99. then the box grows outside.
I really cannot find the cause of this, can anyone help?
The problem is that you're not restricting your proportions along both axes. Your box has a height:width proportion of 5:3. If you don't restrict along both axes, you can have bleeding outside of the boxes. An example might show this best.
Take the case of the height being the bigger of the two dimensions. Your code is only restricting it along the 500px axis. Consequently, if we throw a box in there with 5: >3 proportions, you get a creeping edge.
For instance, put "3" and "5" in your boxes. Fits perfectly. Now make it 3.1 and 5. Ruh roh.
You'll need to add another if statement in each section that THEN determines if the dimension ratio goes outside this boundary. In the above case, you'll need to make it so that the height of the 5:3.1 is not 500px, but rather, the height (less than 500px) that would make 3.1 to be equal to 300px. That would be 483px.
Does that makes sense?
If not, I'll try to rephrase again:
Put another set of if statements in the two if statements you already have. These check if, upon setting the LARGER dimension, it makes the SMALLER dimension go outside the bounds of the box in that direction.
in pseudocode
if (height > width)
calculate the height
calculate the width
if (width > div.width)
width = div.width
height = div.width * aspect;
Just ask me if this isn't clear enough!
Edit: Here's a JSFiddle that gets it right. You'll need to add further code if you want a white border along each edge.
Edit2: Here's the white border come back!
Edit3: You can also try prettying it up and using just aspects to do this. I did the first one for you. Three to go!
It's a pretty small mistake. You forgot to convert the width and height to integers before comparing them. So you would need to change if (width >= height) to if (parseInt(width) >= parseInt(height)).
jQuery .val() always return a string you should parse it into integer
changed jsfiddle
....
height = parseInt($('#height').val()) || 0;// making 0 as default value.
width = parseInt($('#width').val()) || 0;
....
I'm trying to get border width of a particular element.
Getting border width style setting is pretty easy by simply reading if from current calculated style of an element:
var styles = (
document.defaultView && document.defaultView.getComputedStyle ?
document.defaultView.getComputedStyle(de, null) :
de.currentStyle
);
Reading a particular border value is then rather simple by:
var top = styles.borderTopWidth;
var value = parseFloat(top);
This is all fine and dandy (as long as you don't use IE) and I can get top border width in the value variable. But this number relates to pixels only when border width was set in pixels. If it wasn't (was em for instance) than value has the number of that particular dimension.
I have to get an answer to any of these two questions:
How do I always get border width in pixels?
How do I calculate different units into pixels?
Example
I've prepared a jsFiddle example where you can see various dimensions reported by DOM and jQuery. Run it in different browsers and you'll see the difference in IE. All dimansions in Crome are in integer values while Firefox calculates margin and padding in floats while border in integers.
BTW: Margin, border and padding are all set to 2mm.
Most libraries solve this problem for you, as does YUI3 for example.
If you don't want to use those libraries, then at least you can peak at how they do it ;)
http://developer.yahoo.com/yui/3/api/dom-style-ie.js.html
Awnser contained therein.
You can generally get computed pixel sizes using element.offsetWidth and element.offsetHeight. This is somewhat sensitive if you want to support a range of browsers. In that case, use a library. For example, using jQuery you can get guaranteed pixel dimensions with something like this: jQuery("#theID").width().