Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- # *** first steps with coffescript and Raphael ***
- window.onload = ->
- paper = new Raphael document.getElementById('canvas_container'), '100%', '100%'
- # help-functions =======================>
- # computing of the char widths for a given font-family and fontsize
- computeCharWidthMap = (fontFamily, fontSize) ->
- # ascii bonds
- ascii_lower_bound = 32
- ascii_upper_bound = 126
- # object for storing
- #charWidthMap = {}
- # using objects as (hash)maps ugly! ugly !ugly!
- charWidthMap = new Object();
- for asciiChar in [ascii_lower_bound..ascii_upper_bound]
- letter = String.fromCharCode(asciiChar)
- drawnLetter = paper.text(-1000, -1000, letter).attr('font-family': fontFamily, 'font-size': fontSize)
- charWidthMap[letter] = drawnLetter.getBBox().width
- #console.log 'letter: ' + letter, drawnLetter.getBBox().width
- return charWidthMap
- # wrap given text (string) and return the wrapped string and its size
- wrapTextToGivenWidth = (originalText, wrappingWidth, charWidthMap) ->
- # remove all whitespaces at beginning
- # todo
- # check if the text not empty after the previous step
- # todo
- # if so -> throw exception or return empty string ?
- textWidth = 0 # replace with the max(prefix-length ... textwidth)
- textHeight = globalFontSize
- # indexing variables
- lastSpaceCharIndex = 0
- prefixLenghtsArray = []
- # indexing variable for the line breaks
- lineBreakIndexes = []
- for char, index in originalText.split ''
- # check index to avoid indexOutOfBounds ...
- if index < 1
- prefixLenghtsArray.push charWidthMap[char]
- # compute the prefix lenght to the current index
- else prefixLenghtsArray.push charWidthMap[char] + prefixLenghtsArray[index-1] + 1 # add one pixel for the kerning
- # note appearence of a space-character
- if (char == ' ')
- lastSpaceCharIndex = index
- # test if the maximum allowed text width reached
- if (prefixLenghtsArray[index] > wrappingWidth)
- # case : space characters before the curent index present and not already present in the indexing array
- if lastSpaceCharIndex > 0 && lastSpaceCharIndex not in lineBreakIndexes
- # index of the line break is after the last space character
- lineBreakIndexes.push(lastSpaceCharIndex + 1)
- # increase the text height because of the new linebrek
- textHeight += globalFontSize
- # now correct the prefix lengths from the position behind the last space character
- for position in [lastSpaceCharIndex + 1 .. index]
- prefixLenghtsArray[position] = prefixLenghtsArray[position] - prefixLenghtsArray[lastSpaceCharIndex]
- else
- # no space characters before the current index -> the line break on the current index
- lineBreakIndexes.push(index)
- # correct the current prefix length
- prefixLenghtsArray[index] = charWidthMap[char]
- # increase the text height because of the new linebrek
- textHeight += globalFontSize
- else
- # compare the length prefix (should save computing against maxElement(array))
- textWidth = Math.max(textWidth, prefixLenghtsArray[index])
- #console.log 'preffix Array nr. ' + index, prefixLenghtsArray, 'linebreak indexes nr. ' + index, lineBreakIndexes
- # inserting the line breaks
- for position in lineBreakIndexes
- #originalText = originalText.substr(0, position) + '\n' + originalText.substr(position)
- originalText = [originalText.slice(0, position), '\n', originalText.slice(position)].join('') # slightly faster than the previous one
- # explicit return statement
- return (
- wrappedText: originalText
- width: textWidth
- height: textHeight
- )
- # =========================================================
- globalFontFamily = 'Helvetica'
- globalFontSize = 16
- globalCharWidthMap = computeCharWidthMap(globalFontFamily, globalFontSize)
- 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)
- #console.log 'char width map:', globalCharWidthMap, 'wrapped text:' , testText
- drawTestText = paper.text(100, 200, testText.wrappedText).attr('font-family': globalFontFamily, 'font-size': globalFontSize, 'text-anchor': 'start')
- text2Bbox = drawTestText.getBBox()
- paper.text(600, 100, 'boundig-box size :\n' + 'width: ' + text2Bbox.width + ' height: ' + text2Bbox.height).attr('font-family': globalFontFamily, 'font-size': globalFontSize)
- 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