Guest User

Untitled

a guest
Nov 21st, 2018
111
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.27 KB | None | 0 0
  1. var width = 972
  2. var height = 298
  3. var font_size = 211
  4.  
  5. var x = 58
  6. var y = 119
  7.  
  8.  
  9. var rect = g.append("rect")
  10. .attr("width",width)
  11. .attr("height",height)
  12. .attr("fill","black")
  13. .attr("x",x)
  14. .attr("y",y)
  15.  
  16. var text1 = g.append("text")
  17. .attr("fill","red")
  18. .attr("x",x)
  19. .attr("y",y)
  20. .attr("font-size",font_size)
  21. .text("Hellllloooo")
  22. .style('dominant-baseline','hanging')
  23. .style('font-family','Times')
  24.  
  25.  
  26. text = fitTextToBox(rect,text1)
  27.  
  28. function between(x, min, max) {
  29. return x >= min && x <= max;
  30. }
  31.  
  32.  
  33. function fitTextToBox(box,text){
  34.  
  35. // Grab width and height of the parent box
  36. var width = parseInt(box.attr("width"))
  37. var height = parseInt(box.attr("height"))
  38.  
  39. // Grab the orignial font size of the text
  40. var font_size = parseInt(text.attr("font-size"))
  41. // This is used when changing to a new font size
  42. var start_font_size = font_size
  43.  
  44.  
  45. var flag = true
  46.  
  47. //SVGNode of the text input parameter, which is a d3 selection
  48. var textNode = text.node()
  49. // Bounding box of the text node, give you a SVGRect with x,y and width,height
  50. var boundingBoxOfTextNode = text.node().getBBox();
  51.  
  52. //This defines the precise factor, which controlls how precise the text fits into the box
  53. var preciseFactor = 9;
  54.  
  55. //These variables are used for a check if the font size is in a min and max range
  56. //which is simply the orginal values minus or plus a precise factor
  57. var maxWidth = width + preciseFactor
  58. var minWidth = width - preciseFactor
  59.  
  60. var maxHeight = height + preciseFactor
  61. var minHeight = height - preciseFactor
  62.  
  63. //Used to observe the number of iterations
  64. var countOfIterations = 0;
  65.  
  66. var maxTextLength = 0;
  67. var maxValue = start_font_size;
  68. var minValue = 0;
  69. //These variables are needed inside the loop to calculate the lenght and the height of the text after in- or decreasing the text
  70. var textLength;
  71. var textHeight;
  72. //console.log("MaxWidth",maxWidth,"MaxHeight",maxHeight,"Start ffont",start_font_size)
  73. while(flag == true){
  74. //console.log("i",countOfIterations,start_font_size);
  75. textLength = textNode.getComputedTextLength()
  76. textHeight = boundingBoxOfTextNode.height
  77.  
  78. //Increase font size, because text is to small for the box
  79. if( between(textLength,0,maxWidth-preciseFactor-preciseFactor) && between(textHeight,0,maxHeight-preciseFactor-preciseFactor) ){
  80. if(start_font_size > minValue)
  81. minValue = start_font_size
  82. newVal = maxValue * 2;
  83.  
  84. start_font_size = newVal
  85. maxValue = start_font_size
  86. }
  87. //Decrease font size, because text width is to wide OR the text height is bigger
  88. if( (textLength > width && textHeight < height) || (textLength > width || textHeight > height) ){
  89. if(start_font_size < maxValue)
  90. maxValue = start_font_size
  91. newVal = (maxValue - minValue) / 2
  92. newVal = maxValue - newVal
  93. //start_font_size /=2
  94. start_font_size = newVal
  95.  
  96.  
  97.  
  98. }
  99. //console.log("max",maxValue,"min",minValue)
  100. //If the text length or text height is in the correct range, that means not to small and not to big
  101. if( ( between(textLength,minWidth,maxWidth) && textHeight < height) || ( between(textHeight,minHeight,maxHeight) && textLength < width ) ){
  102. console.log("End Detect",countOfIterations);
  103. flag = false
  104. }
  105.  
  106.  
  107. text.attr("font-size",start_font_size)
  108. boundingBoxOfTextNode = textNode.getBBox()
  109.  
  110. //Can be turned of if there are no problems with the algorithm
  111. if(countOfIterations > 51){
  112. // If this branch is reached it took to long to calculate the size or
  113. // the algo is in a deadlock
  114. break;
  115. }else{
  116. countOfIterations++;
  117. }
  118.  
  119.  
  120. }
  121.  
  122. return text;
  123. }
Add Comment
Please, Sign In to add comment