So i saw this wiggling rainbow text
https://codepen.io/mikel301292/pen/eBROMJ
So it looks like this:
var logo = "232.5,115.4,228.3,30.0,164.1,30.0&96.1,30.0,30.0,99.4,30.0,205.9&30.0,290.1,98.0,345.9,160.3,345.9&295.3,345.9,339.7,127.5,339.7,78.9&339.7,-23.4,303.7,86.4,303.7,176.9&303.7,205.8,314.4,345.9,381.8,345.9&473.4,345.9,504.8,128.4,504.8,68.9&504.8,1.4,473.0,62.6,473.0,146.1&473.0,195.5,486.6,345.7,539.8,345.7&609.9,345.7,661.0,182.9,661.0,115.9&661.0,-65.1,616.1,93.0,616.1,112.9&616.1,157.9,741.1,71.7,741.1,71.7&741.1,71.7,674.1,168.2,674.1,267.8&674.1,308.9,698.8,345.9,735.3,345.9&851.2,345.9,850.7,53.0,850.7,53.0&850.7,53.0,911.3,208.9,918.5,349.1&997.2,349.1,1024.5,189.5,1024.5,64.8&1024.5,0.8,985.4,43.5,985.4,115.4&985.4,185.6,1085.0,192.3,1135.7,192.3&1200.8,192.3,1295.4,180.3,1295.4,105.3&1295.4,71.3,1272.7,49.2,1240.6,49.2&1189.5,49.2,1124.6,125.9,1124.6,236.9&1124.6,277.0,1143.1,346.4,1206.7,346.4&1246.2,346.4,1305.1,305.9,1325.5,257.0";
And i want to change the text but i cant find any tools that can give me the right "coordinates". I tried it in Adobe Animate but its just not the same.
Why not try opentype.js? Given you have a true type or opentype font file you can then get the coordinates of a given text string and then use fabricjs to render it on a canvas. At that point you can animate it or apply different colours.
I've seen a few post here about using dy to vertically align text, but all of them just pick a random value without explaining it. Surely this value would differ depending on the font size? My text's font size is stored in a variable (fsize), and its value can change depending on other factors. I tried setting .attr("dy", fsize / 2) (not quite exactly that since fsize is a string and in ems, but you get the point), and my text is way off centre. What value should I choose, given a font size of fsize?
"Surely this value would differ depending on the font size?"
if you use 'em' units it shouldn't matter what the font size is as they're a relative-size unit
https://www.w3.org/WAI/GL/css2em.htm
So you can use rules of thumb like .attr("dy", "0.7em") which shifts text y-wards by 70% of the font height
Is there a way to get the inner width and height of a canvas based on it's content?
I want to allow the user to write text to a canvas and the user is allowed to pick the font size, font family, etc. Problem is since they have control over the font and the length of text I don't have a way of knowing what to set the width and height of the canvas to.
So is there a way to have the canvas be as big as the content inside it (like the display "inline block" property of CSS) or a way to get the width and height of the inner content of a canvas (in that case I would just adjust the width and height of it after each letter in the text is written)?
Yes, there is. Position a child element inside the canvas. set the child element css as position: absolute; and width: 100%; which will take the full size of its container.
If you know that the canvas will contain text with a certain font / font-size, you can use the canvas measureText function. See this snippet from here:
http://www.w3schools.com/tags/canvas_measuretext.asp
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d"); ctx.font="30px Arial";
var txt="Hello World"
ctx.fillText("width:" + ctx.measureText(txt).width,10,50)
ctx.fillText(txt,10,100);
Referring go this example
http://jsfiddle.net/uzgJX/
The result is the height of the box containing the text (the one you can see if you select the text with the mouse..) wichi is higher then the real height of the text.
Is there a way to get the real height with jquery or plain js?
In the example I tryed with
text.height()
and
text[0].getBoundingClientRect().height
with no luck, it says 19px instead of 14px
Get the computed font-size for your text element instead:
parseInt(window.getComputedStyle(text[0]).fontSize, 10);
font-size represents the size of an em square for a font. It should be noted that, while most glyphs will stay inside the bounds of an em square, some may exceed those bounds. This doesn't usually occur on the vertical dimentions, though.
Give it a try: http://jsfiddle.net/uzgJX/1/. Tip: screenshot and copy into your favourite image editor, then select the pixels exactly to the height of the text and compare with the value given in the fiddle.
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.