|
|
@ -283,14 +283,13 @@ var CanvasGraphics = (function canvasGraphics() { |
|
|
|
var renderTextLayer = function canvasRenderTextLayer() { |
|
|
|
var renderTextLayer = function canvasRenderTextLayer() { |
|
|
|
var textDivs = self.textDivs; |
|
|
|
var textDivs = self.textDivs; |
|
|
|
for (var i = 0, length = textDivs.length; i < length; ++i) { |
|
|
|
for (var i = 0, length = textDivs.length; i < length; ++i) { |
|
|
|
if (textDivs[i].dataset.textLength>1) { // avoid div by zero
|
|
|
|
if (textDivs[i].dataset.textLength > 1) { // avoid div by zero
|
|
|
|
textLayer.appendChild(textDivs[i]); |
|
|
|
textLayer.appendChild(textDivs[i]); |
|
|
|
// Adjust div width (via letterSpacing) to match canvas text
|
|
|
|
// Adjust div width (via letterSpacing) to match canvas text
|
|
|
|
// Due to the .offsetWidth calls, this is slow
|
|
|
|
// Due to the .offsetWidth calls, this is slow
|
|
|
|
textDivs[i].style.letterSpacing = |
|
|
|
textDivs[i].style.letterSpacing = |
|
|
|
((textDivs[i].dataset.canvasWidth |
|
|
|
((textDivs[i].dataset.canvasWidth - textDivs[i].offsetWidth) / |
|
|
|
- textDivs[i].offsetWidth)/(textDivs[i].dataset.textLength-1)) |
|
|
|
(textDivs[i].dataset.textLength - 1)) + 'px'; |
|
|
|
+ 'px'; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
@ -300,9 +299,9 @@ var CanvasGraphics = (function canvasGraphics() { |
|
|
|
// Lazy textLayer rendering (to prevent UI hangs)
|
|
|
|
// Lazy textLayer rendering (to prevent UI hangs)
|
|
|
|
// Only render queue if activity has stopped, where "no activity" ==
|
|
|
|
// Only render queue if activity has stopped, where "no activity" ==
|
|
|
|
// "no beginDrawing() calls in the last N ms"
|
|
|
|
// "no beginDrawing() calls in the last N ms"
|
|
|
|
self.textLayerTimer = setTimeout(function renderTextLayerQueue(){ |
|
|
|
self.textLayerTimer = setTimeout(function renderTextLayerQueue() { |
|
|
|
// Render most recent (==most relevant) layers first
|
|
|
|
// Render most recent (==most relevant) layers first
|
|
|
|
for (var i=textLayerQueue.length-1; i>=0; i--) { |
|
|
|
for (var i = textLayerQueue.length - 1; i >= 0; i--) { |
|
|
|
textLayerQueue.pop().call(); |
|
|
|
textLayerQueue.pop().call(); |
|
|
|
} |
|
|
|
} |
|
|
|
}, 500); |
|
|
|
}, 500); |
|
|
@ -596,7 +595,7 @@ var CanvasGraphics = (function canvasGraphics() { |
|
|
|
spaceGlyph = font.charsToGlyphs('i'); |
|
|
|
spaceGlyph = font.charsToGlyphs('i'); |
|
|
|
// Fallback
|
|
|
|
// Fallback
|
|
|
|
if (spaceGlyph.length === 0 || spaceGlyph[0].width === 0) |
|
|
|
if (spaceGlyph.length === 0 || spaceGlyph[0].width === 0) |
|
|
|
spaceGlyph = [ {width:0} ]; |
|
|
|
spaceGlyph = [{width: 0}]; |
|
|
|
geom.spaceWidth = spaceGlyph[0].width; |
|
|
|
geom.spaceWidth = spaceGlyph[0].width; |
|
|
|
return geom; |
|
|
|
return geom; |
|
|
|
}, |
|
|
|
}, |
|
|
@ -629,7 +628,7 @@ var CanvasGraphics = (function canvasGraphics() { |
|
|
|
var textHScale = current.textHScale; |
|
|
|
var textHScale = current.textHScale; |
|
|
|
var glyphsLength = glyphs.length; |
|
|
|
var glyphsLength = glyphs.length; |
|
|
|
var textLayer = this.textLayer; |
|
|
|
var textLayer = this.textLayer; |
|
|
|
var text = { str:'', length:0, canvasWidth:0, geom:{}}; |
|
|
|
var text = {str: '', length: 0, canvasWidth: 0, geom: {}}; |
|
|
|
var textSelection = textLayer && !skipTextSelection ? true : false; |
|
|
|
var textSelection = textLayer && !skipTextSelection ? true : false; |
|
|
|
|
|
|
|
|
|
|
|
if (textSelection) { |
|
|
|
if (textSelection) { |
|
|
@ -712,7 +711,7 @@ var CanvasGraphics = (function canvasGraphics() { |
|
|
|
var arrLength = arr.length; |
|
|
|
var arrLength = arr.length; |
|
|
|
var textLayer = this.textLayer; |
|
|
|
var textLayer = this.textLayer; |
|
|
|
var font = current.font; |
|
|
|
var font = current.font; |
|
|
|
var text = {str:'', length:0, canvasWidth:0, geom:{}}; |
|
|
|
var text = {str: '', length: 0, canvasWidth: 0, geom: {}}; |
|
|
|
var textSelection = textLayer ? true : false; |
|
|
|
var textSelection = textLayer ? true : false; |
|
|
|
|
|
|
|
|
|
|
|
if (textSelection) { |
|
|
|
if (textSelection) { |
|
|
@ -731,11 +730,11 @@ var CanvasGraphics = (function canvasGraphics() { |
|
|
|
if (textSelection) { |
|
|
|
if (textSelection) { |
|
|
|
// Emulate precise spacing via HTML spaces
|
|
|
|
// Emulate precise spacing via HTML spaces
|
|
|
|
text.canvasWidth += spacingLength; |
|
|
|
text.canvasWidth += spacingLength; |
|
|
|
if (e<0 && text.geom.spaceWidth>0) { // avoid div by zero
|
|
|
|
if (e < 0 && text.geom.spaceWidth > 0) { // avoid div by zero
|
|
|
|
var numFakeSpaces = Math.round(-e / text.geom.spaceWidth); |
|
|
|
var numFakeSpaces = Math.round(-e / text.geom.spaceWidth); |
|
|
|
for (var j = 0; j < numFakeSpaces; ++j) |
|
|
|
for (var j = 0; j < numFakeSpaces; ++j) |
|
|
|
text.str += ' '; |
|
|
|
text.str += ' '; |
|
|
|
text.length += numFakeSpaces>0 ? 1 : 0; |
|
|
|
text.length += numFakeSpaces > 0 ? 1 : 0; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} else if (isString(e)) { |
|
|
|
} else if (isString(e)) { |
|
|
|