Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- var width = 972
- var height = 298
- var font_size = 211
- var x = 58
- var y = 119
- var rect = g.append("rect")
- .attr("width",width)
- .attr("height",height)
- .attr("fill","black")
- .attr("x",x)
- .attr("y",y)
- var text1 = g.append("text")
- .attr("fill","red")
- .attr("x",x)
- .attr("y",y)
- .attr("font-size",font_size)
- .text("Hellllloooo")
- .style('dominant-baseline','hanging')
- .style('font-family','Times')
- text = fitTextToBox(rect,text1)
- function between(x, min, max) {
- return x >= min && x <= max;
- }
- function fitTextToBox(box,text){
- // Grab width and height of the parent box
- var width = parseInt(box.attr("width"))
- var height = parseInt(box.attr("height"))
- // Grab the orignial font size of the text
- var font_size = parseInt(text.attr("font-size"))
- // This is used when changing to a new font size
- var start_font_size = font_size
- var flag = true
- //SVGNode of the text input parameter, which is a d3 selection
- var textNode = text.node()
- // Bounding box of the text node, give you a SVGRect with x,y and width,height
- var boundingBoxOfTextNode = text.node().getBBox();
- //This defines the precise factor, which controlls how precise the text fits into the box
- var preciseFactor = 9;
- //These variables are used for a check if the font size is in a min and max range
- //which is simply the orginal values minus or plus a precise factor
- var maxWidth = width + preciseFactor
- var minWidth = width - preciseFactor
- var maxHeight = height + preciseFactor
- var minHeight = height - preciseFactor
- //Used to observe the number of iterations
- var countOfIterations = 0;
- var maxTextLength = 0;
- var maxValue = start_font_size;
- var minValue = 0;
- //These variables are needed inside the loop to calculate the lenght and the height of the text after in- or decreasing the text
- var textLength;
- var textHeight;
- //console.log("MaxWidth",maxWidth,"MaxHeight",maxHeight,"Start ffont",start_font_size)
- while(flag == true){
- //console.log("i",countOfIterations,start_font_size);
- textLength = textNode.getComputedTextLength()
- textHeight = boundingBoxOfTextNode.height
- //Increase font size, because text is to small for the box
- if( between(textLength,0,maxWidth-preciseFactor-preciseFactor) && between(textHeight,0,maxHeight-preciseFactor-preciseFactor) ){
- if(start_font_size > minValue)
- minValue = start_font_size
- newVal = maxValue * 2;
- start_font_size = newVal
- maxValue = start_font_size
- }
- //Decrease font size, because text width is to wide OR the text height is bigger
- if( (textLength > width && textHeight < height) || (textLength > width || textHeight > height) ){
- if(start_font_size < maxValue)
- maxValue = start_font_size
- newVal = (maxValue - minValue) / 2
- newVal = maxValue - newVal
- //start_font_size /=2
- start_font_size = newVal
- }
- //console.log("max",maxValue,"min",minValue)
- //If the text length or text height is in the correct range, that means not to small and not to big
- if( ( between(textLength,minWidth,maxWidth) && textHeight < height) || ( between(textHeight,minHeight,maxHeight) && textLength < width ) ){
- console.log("End Detect",countOfIterations);
- flag = false
- }
- text.attr("font-size",start_font_size)
- boundingBoxOfTextNode = textNode.getBBox()
- //Can be turned of if there are no problems with the algorithm
- if(countOfIterations > 51){
- // If this branch is reached it took to long to calculate the size or
- // the algo is in a deadlock
- break;
- }else{
- countOfIterations++;
- }
- }
- return text;
- }
Add Comment
Please, Sign In to add comment