From 5da37bccf7e74c53ed45f8a431d98508f7596371 Mon Sep 17 00:00:00 2001 From: Gui Meira Date: Fri, 11 Jul 2014 18:49:25 -0300 Subject: [PATCH 1/3] Added the style option text-rotation --- documentation/md/style.md | 1 + src/extensions/renderer.canvas.drawing-label-text.js | 14 ++++++++++++++ src/style.js | 5 ++++- 3 files changed, 19 insertions(+), 1 deletion(-) diff --git a/documentation/md/style.md b/documentation/md/style.md index 4f9f6d236..d369f3237 100644 --- a/documentation/md/style.md +++ b/documentation/md/style.md @@ -102,6 +102,7 @@ Labels: * **`text-outline-color`** : The colour of the outline around the element's label text. * **`text-outline-opacity`** : The opacity of the outline on label text. * **`text-outline-width`** : The size of the outline on label text. + * **`text-rotation`** : The angle to rotate the label text, may be specified in degrees or radians (e.g. `180deg` or `3.14rad`). * **`min-zoomed-font-size`** : If zooming makes the effective font size of the label smaller than this, then no label is shown. Size & visibility: diff --git a/src/extensions/renderer.canvas.drawing-label-text.js b/src/extensions/renderer.canvas.drawing-label-text.js index 3ab48443e..b7bc08081 100644 --- a/src/extensions/renderer.canvas.drawing-label-text.js +++ b/src/extensions/renderer.canvas.drawing-label-text.js @@ -155,6 +155,18 @@ var text = this.setupTextStyle( context, element ); if ( text != null && !isNaN(textX) && !isNaN(textY) ) { + var rotationAngle = style['text-rotation'].value; + + //If specified in degrees, convert to radians: + if(style['text-rotation'].units == 'deg') { + rotationAngle = rotationAngle * Math.PI/180; + } + + context.save(); + context.translate(textX,textY); + context.rotate(rotationAngle); + context.translate(-textX,-textY); + var lineWidth = 2 * style['text-outline-width'].value; // *2 b/c the stroke is drawn centred on the middle if (lineWidth > 0) { context.lineWidth = lineWidth; @@ -162,6 +174,8 @@ } context.fillText(text, textX, textY); + + context.restore(); } }; diff --git a/src/style.js b/src/style.js index 92100494c..84ece55a1 100644 --- a/src/style.js +++ b/src/style.js @@ -79,7 +79,8 @@ mapData: { mapping: true, regex: mapData('mapData') }, mapLayoutData: { mapping: true, regex: mapData('mapLayoutData') }, url: { regex: '^url\\s*\\(\\s*([^\\s]+)\\s*\\s*\\)|none|(.+)$' }, - propList: { propList: true } + propList: { propList: true }, + angle: { number: true, units: 'deg|rad'} }; // define visual style properties @@ -96,6 +97,7 @@ { name: 'text-opacity', type: t.zeroOneNumber }, { name: 'text-decoration', type: t.textDecoration }, { name: 'text-transform', type: t.textTransform }, + { name: 'text-rotation', type: t.angle }, { name: 'font-family', type: t.fontFamily }, { name: 'font-style', type: t.fontStyle }, { name: 'font-variant', type: t.fontVariant }, @@ -244,6 +246,7 @@ 'text-opacity': 1, 'text-decoration': 'none', 'text-transform': textTransform, + 'text-rotation': '0deg', 'font-family': fontFamily, 'font-style': fontStyle, 'font-variant': fontVariant, From d33cad8f24d02ed5ec806c8239955425ccdc63bf Mon Sep 17 00:00:00 2001 From: Gui Meira Date: Fri, 11 Jul 2014 18:55:50 -0300 Subject: [PATCH 2/3] Avoid rotation overhead when angle is zero --- .../renderer.canvas.drawing-label-text.js | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/src/extensions/renderer.canvas.drawing-label-text.js b/src/extensions/renderer.canvas.drawing-label-text.js index b7bc08081..131e5148b 100644 --- a/src/extensions/renderer.canvas.drawing-label-text.js +++ b/src/extensions/renderer.canvas.drawing-label-text.js @@ -157,16 +157,18 @@ if ( text != null && !isNaN(textX) && !isNaN(textY) ) { var rotationAngle = style['text-rotation'].value; - //If specified in degrees, convert to radians: - if(style['text-rotation'].units == 'deg') { - rotationAngle = rotationAngle * Math.PI/180; + if(rotationAngle != 0) { + //If specified in degrees, convert to radians: + if(style['text-rotation'].units == 'deg') { + rotationAngle = rotationAngle * Math.PI/180; + } + + context.save(); + context.translate(textX,textY); + context.rotate(rotationAngle); + context.translate(-textX,-textY); } - context.save(); - context.translate(textX,textY); - context.rotate(rotationAngle); - context.translate(-textX,-textY); - var lineWidth = 2 * style['text-outline-width'].value; // *2 b/c the stroke is drawn centred on the middle if (lineWidth > 0) { context.lineWidth = lineWidth; @@ -175,7 +177,9 @@ context.fillText(text, textX, textY); - context.restore(); + if(rotationAngle != 0) { + context.restore(); + } } }; From 6aad15fdf1c323b6f4b28e366259c7261b2f0f1b Mon Sep 17 00:00:00 2001 From: Gui Meira Date: Tue, 15 Jul 2014 15:32:11 -0300 Subject: [PATCH 3/3] Use inverte rotation instead of context.restore() --- src/extensions/renderer.canvas.drawing-label-text.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/extensions/renderer.canvas.drawing-label-text.js b/src/extensions/renderer.canvas.drawing-label-text.js index 131e5148b..f4984c6bf 100644 --- a/src/extensions/renderer.canvas.drawing-label-text.js +++ b/src/extensions/renderer.canvas.drawing-label-text.js @@ -163,7 +163,6 @@ rotationAngle = rotationAngle * Math.PI/180; } - context.save(); context.translate(textX,textY); context.rotate(rotationAngle); context.translate(-textX,-textY); @@ -178,7 +177,9 @@ context.fillText(text, textX, textY); if(rotationAngle != 0) { - context.restore(); + context.translate(textX,textY); + context.rotate(-rotationAngle); + context.translate(-textX,-textY); } } };