Advertisement
Guest User

Wraping text for the Raphsel js library

a guest
Feb 15th, 2013
281
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. # *** first steps with coffescript and Raphael ***
  2.  
  3. window.onload = ->
  4.     paper = new Raphael document.getElementById('canvas_container'), '100%', '100%'
  5.  
  6.     # help-functions =======================>
  7.  
  8.     # computing of the char widths for a given font-family and fontsize
  9.     computeCharWidthMap = (fontFamily, fontSize) ->
  10.         # ascii bonds
  11.         ascii_lower_bound = 32
  12.         ascii_upper_bound = 126
  13.  
  14.         # object for storing
  15.         #charWidthMap = {}
  16.         # using objects as (hash)maps ugly! ugly !ugly!
  17.         charWidthMap = new Object();
  18.  
  19.         for asciiChar in [ascii_lower_bound..ascii_upper_bound]
  20.             letter = String.fromCharCode(asciiChar)
  21.             drawnLetter = paper.text(-1000, -1000, letter).attr('font-family': fontFamily, 'font-size': fontSize)
  22.             charWidthMap[letter] = drawnLetter.getBBox().width
  23.             #console.log 'letter: ' + letter, drawnLetter.getBBox().width
  24.  
  25.         return charWidthMap
  26.  
  27.     # wrap given text (string) and return the wrapped string and its size
  28.     wrapTextToGivenWidth = (originalText, wrappingWidth, charWidthMap) ->
  29.  
  30.         # remove all whitespaces at beginning
  31.         # todo
  32.  
  33.         # check if the text not empty after the previous step
  34.         # todo
  35.         # if so -> throw exception or return empty string ?
  36.  
  37.         textWidth = 0 # replace with the max(prefix-length ... textwidth)
  38.         textHeight = globalFontSize
  39.         # indexing variables
  40.         lastSpaceCharIndex = 0
  41.         prefixLenghtsArray = []
  42.         # indexing variable for the line breaks
  43.         lineBreakIndexes = []
  44.  
  45.         for char, index in originalText.split ''
  46.             # check index to avoid indexOutOfBounds ...
  47.             if index < 1
  48.                 prefixLenghtsArray.push charWidthMap[char]
  49.             # compute the prefix lenght to the current index
  50.             else prefixLenghtsArray.push charWidthMap[char] + prefixLenghtsArray[index-1] + 1 # add one pixel for the kerning
  51.  
  52.             # note appearence of a space-character
  53.             if (char == ' ')
  54.                 lastSpaceCharIndex = index
  55.  
  56.             # test if the maximum allowed text width reached
  57.             if (prefixLenghtsArray[index] > wrappingWidth)
  58.                 # case : space characters before the curent index present and not already present in the indexing array
  59.                 if lastSpaceCharIndex > 0 && lastSpaceCharIndex not in lineBreakIndexes
  60.                     # index of the line break is after the last space character
  61.                     lineBreakIndexes.push(lastSpaceCharIndex + 1)
  62.                     # increase the text height because of the new linebrek
  63.                     textHeight += globalFontSize
  64.                     # now correct the prefix lengths from the position behind the last space character
  65.                     for position in [lastSpaceCharIndex + 1 .. index]
  66.                         prefixLenghtsArray[position] = prefixLenghtsArray[position] - prefixLenghtsArray[lastSpaceCharIndex]
  67.                 else
  68.                     # no space characters before the current index -> the line break on the current index
  69.                     lineBreakIndexes.push(index)
  70.                     # correct the current prefix length
  71.                     prefixLenghtsArray[index] = charWidthMap[char]
  72.                     # increase the text height because of the new linebrek
  73.                     textHeight += globalFontSize
  74.             else
  75.                 # compare the length prefix (should save computing against maxElement(array))
  76.                 textWidth = Math.max(textWidth, prefixLenghtsArray[index])
  77.  
  78.             #console.log 'preffix Array nr. ' + index, prefixLenghtsArray, 'linebreak indexes nr. ' + index, lineBreakIndexes
  79.  
  80.         # inserting the line breaks
  81.         for position in lineBreakIndexes
  82.             #originalText = originalText.substr(0, position) + '\n' + originalText.substr(position)
  83.             originalText = [originalText.slice(0, position), '\n', originalText.slice(position)].join('') # slightly faster than the previous one
  84.  
  85.         # explicit return statement
  86.         return (
  87.             wrappedText: originalText
  88.             width: textWidth
  89.             height: textHeight
  90.         )
  91.  
  92.     # =========================================================
  93.  
  94.     globalFontFamily = 'Helvetica'
  95.     globalFontSize = 16
  96.     globalCharWidthMap = computeCharWidthMap(globalFontFamily, globalFontSize)
  97.  
  98.     testText = wrapTextToGivenWidth('Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.', 300, globalCharWidthMap)
  99.     #console.log 'char width map:', globalCharWidthMap, 'wrapped text:' , testText
  100.  
  101.     drawTestText = paper.text(100, 200, testText.wrappedText).attr('font-family': globalFontFamily, 'font-size': globalFontSize, 'text-anchor': 'start')
  102.     text2Bbox = drawTestText.getBBox()
  103.     paper.text(600, 100, 'boundig-box size :\n' + 'width: ' + text2Bbox.width + ' height: ' + text2Bbox.height).attr('font-family': globalFontFamily, 'font-size': globalFontSize)
  104.     paper.text(600, 200, 'computed size :\n' + 'width: ' + testText.width + ' height: ' + testText.height).attr('font-family': globalFontFamily, 'font-size': globalFontSize)
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement