diff --git a/dist/all.js b/dist/all.js
index 2883b543..632b68d0 100644
--- a/dist/all.js
+++ b/dist/all.js
@@ -1084,9 +1084,10 @@ Cufon.registerEngine('canvas', (function() {
var width = 0, lastWidth = null;
- var maxWidth = 0;
+ var maxWidth = 0, lines = 1;
for (var i = 0, l = chars.length; i < l; ++i) {
if (chars[i] === '\n') {
+ lines++
if (width > maxWidth) {
maxWidth = width;
}
@@ -1148,7 +1149,8 @@ Cufon.registerEngine('canvas', (function() {
var _height = size.convert(font.height);
Cufon.textOptions.width = _width;
- Cufon.textOptions.height = _height;
+ Cufon.textOptions.height = _height * lines;
+ Cufon.textOptions.lines = lines;
if (HAS_INLINE_BLOCK) {
wStyle.width = wrapperWidth;
@@ -1167,7 +1169,7 @@ Cufon.registerEngine('canvas', (function() {
g.translate(
-expandLeft - ((1/scale * canvas.width) / 2) + (Cufon.fonts[font.family].offsetLeft || 0),
- -expandTop - (1/scale * canvas.height) / 2
+ -expandTop - (canvas.height / scale * Cufon.textOptions.lines) / 2
);
g.lineWidth = font.face['underline-thickness'];
@@ -1201,7 +1203,7 @@ Cufon.registerEngine('canvas', (function() {
var left = 0;
for (var i = 0, l = chars.length; i < l; ++i) {
if (chars[i] === '\n') {
- g.translate(-left, -font.ascent);
+ g.translate(-left, -font.ascent - font.ascent / 5 /* space between lines */);
left = 0;
continue;
}
@@ -6626,7 +6628,8 @@ fabric.util.animate = animate;
scaleOffsetY = (padding + size2) / this.scaleY,
scaleOffsetX = (padding + size2) / this.scaleX,
scaleOffsetSizeX = (padding + size2 - size) / this.scaleX,
- scaleOffsetSizeY = (padding + size2 - size) / this.scaleY;
+ scaleOffsetSizeY = (padding + size2 - size) / this.scaleY,
+ height = this.height;
ctx.save();
@@ -6642,11 +6645,11 @@ fabric.util.animate = animate;
ctx.fillRect(_left, _top, sizeX, sizeY);
_left = left - scaleOffsetX;
- _top = top + this.height + scaleOffsetSizeY;
+ _top = top + height + scaleOffsetSizeY;
ctx.fillRect(_left, _top, sizeX, sizeY);
_left = left + this.width + scaleOffsetSizeX;
- _top = top + this.height + scaleOffsetSizeY;
+ _top = top + height + scaleOffsetSizeY;
ctx.fillRect(_left, _top, sizeX, sizeY);
_left = left + this.width/2 - scaleOffsetX;
@@ -6654,15 +6657,15 @@ fabric.util.animate = animate;
ctx.fillRect(_left, _top, sizeX, sizeY);
_left = left + this.width/2 - scaleOffsetX;
- _top = top + this.height + scaleOffsetSizeY;
+ _top = top + height + scaleOffsetSizeY;
ctx.fillRect(_left, _top, sizeX, sizeY);
_left = left + this.width + scaleOffsetSizeX;
- _top = top + this.height/2 - scaleOffsetY;
+ _top = top + height/2 - scaleOffsetY;
ctx.fillRect(_left, _top, sizeX, sizeY);
_left = left - scaleOffsetX;
- _top = top + this.height/2 - scaleOffsetY;
+ _top = top + height/2 - scaleOffsetY;
ctx.fillRect(_left, _top, sizeX, sizeY);
ctx.restore();
diff --git a/lib/cufon.js b/lib/cufon.js
index b484fd8a..4d335165 100644
--- a/lib/cufon.js
+++ b/lib/cufon.js
@@ -673,9 +673,10 @@ Cufon.registerEngine('canvas', (function() {
var width = 0, lastWidth = null;
- var maxWidth = 0;
+ var maxWidth = 0, lines = 1;
for (var i = 0, l = chars.length; i < l; ++i) {
if (chars[i] === '\n') {
+ lines++
if (width > maxWidth) {
maxWidth = width;
}
@@ -738,7 +739,8 @@ Cufon.registerEngine('canvas', (function() {
var _height = size.convert(font.height);
Cufon.textOptions.width = _width;
- Cufon.textOptions.height = _height;
+ Cufon.textOptions.height = _height * lines;
+ Cufon.textOptions.lines = lines;
if (HAS_INLINE_BLOCK) {
wStyle.width = wrapperWidth;
@@ -757,7 +759,7 @@ Cufon.registerEngine('canvas', (function() {
g.translate(
-expandLeft - ((1/scale * canvas.width) / 2) + (Cufon.fonts[font.family].offsetLeft || 0),
- -expandTop - (1/scale * canvas.height) / 2
+ -expandTop - (canvas.height / scale * Cufon.textOptions.lines) / 2
);
g.lineWidth = font.face['underline-thickness'];
@@ -792,7 +794,7 @@ Cufon.registerEngine('canvas', (function() {
for (var i = 0, l = chars.length; i < l; ++i) {
if (chars[i] === '\n') {
// move "caret" to the current left
- g.translate(-left, -font.ascent);
+ g.translate(-left, -font.ascent - font.ascent / 5 /* space between lines */);
left = 0;
continue;
}
diff --git a/src/object.class.js b/src/object.class.js
index cb20fca2..f13901bf 100644
--- a/src/object.class.js
+++ b/src/object.class.js
@@ -502,30 +502,29 @@
drawBorders: function(ctx) {
var padding = this.padding,
padding2 = padding * 2;
-
+
ctx.save();
-
+
ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1;
ctx.strokeStyle = this.borderColor;
-
+
var scaleX = 1 / (this.scaleX < this.MIN_SCALE_LIMIT ? this.MIN_SCALE_LIMIT : this.scaleX),
scaleY = 1 / (this.scaleY < this.MIN_SCALE_LIMIT ? this.MIN_SCALE_LIMIT : this.scaleY);
-
- // could be set by a group, that this object is contained within
+
ctx.lineWidth = 1 / this.borderScaleFactor;
-
+
ctx.scale(scaleX, scaleY);
-
+
var w = this.getWidth(),
h = this.getHeight();
-
+
ctx.strokeRect(
~~(-(w / 2) - padding) + 0.5, // offset needed to make lines look sharper
~~(-(h / 2) - padding) + 0.5,
~~(w + padding2),
~~(h + padding2)
);
-
+
ctx.restore();
return this;
},
@@ -552,7 +551,8 @@
scaleOffsetY = (padding + size2) / this.scaleY,
scaleOffsetX = (padding + size2) / this.scaleX,
scaleOffsetSizeX = (padding + size2 - size) / this.scaleX,
- scaleOffsetSizeY = (padding + size2 - size) / this.scaleY;
+ scaleOffsetSizeY = (padding + size2 - size) / this.scaleY,
+ height = this.height;
ctx.save();
@@ -571,12 +571,12 @@
// bottom-left
_left = left - scaleOffsetX;
- _top = top + this.height + scaleOffsetSizeY;
+ _top = top + height + scaleOffsetSizeY;
ctx.fillRect(_left, _top, sizeX, sizeY);
// bottom-right
_left = left + this.width + scaleOffsetSizeX;
- _top = top + this.height + scaleOffsetSizeY;
+ _top = top + height + scaleOffsetSizeY;
ctx.fillRect(_left, _top, sizeX, sizeY);
// middle-top
@@ -586,17 +586,17 @@
// middle-bottom
_left = left + this.width/2 - scaleOffsetX;
- _top = top + this.height + scaleOffsetSizeY;
+ _top = top + height + scaleOffsetSizeY;
ctx.fillRect(_left, _top, sizeX, sizeY);
// middle-right
_left = left + this.width + scaleOffsetSizeX;
- _top = top + this.height/2 - scaleOffsetY;
+ _top = top + height/2 - scaleOffsetY;
ctx.fillRect(_left, _top, sizeX, sizeY);
// middle-left
_left = left - scaleOffsetX;
- _top = top + this.height/2 - scaleOffsetY;
+ _top = top + height/2 - scaleOffsetY;
ctx.fillRect(_left, _top, sizeX, sizeY);
ctx.restore();
diff --git a/test/demo/demo.js b/test/demo/demo.js
index 9fe7df87..417020fa 100644
--- a/test/demo/demo.js
+++ b/test/demo/demo.js
@@ -365,7 +365,7 @@
canvas.freeDrawingColor = drawingColorEl.value;
canvas.freeDrawingLineWidth = parseInt(drawingLineWidthEl.value, 10) || 1;
- /*
+
var helloWorld = new fabric.Text('Hello world!', {
left: getRandomInt(100, 650),
top: getRandomInt(100, 650),
@@ -374,7 +374,7 @@
});
canvas.add(helloWorld);
- */
+
updateComplexity();
document.onkeydown = function(e) {
diff --git a/test/demo/font_definitions.js b/test/demo/font_definitions.js
new file mode 100644
index 00000000..3c64f7b7
--- /dev/null
+++ b/test/demo/font_definitions.js
@@ -0,0 +1,21 @@
+(function(){
+ var fontDefinitions = {
+ 'Modernist_One_400': 85,
+ 'Quake_Cyr': 100,
+ 'Terminator_Cyr': 10,
+ 'Vampire95': 85,
+ 'Encient_German_Gothic_400': 110,
+ 'OdessaScript_500': 180,
+ 'Globus_500': 100,
+ 'CrashCTT_400': 60,
+ 'CA_BND_Web_Bold_700': 60,
+ 'Delicious_500': 80,
+ 'Tallys_400': 70,
+ 'DejaVu_Serif_400': 70
+ };
+ for (var prop in fontDefinitions) {
+ if (Cufon.fonts[prop.toLowerCase()]) {
+ Cufon.fonts[prop.toLowerCase()].offsetLeft = fontDefinitions[prop];
+ }
+ }
+})();
\ No newline at end of file
diff --git a/test/demo/index.html b/test/demo/index.html
index 46677a7a..3d9d3205 100644
--- a/test/demo/index.html
+++ b/test/demo/index.html
@@ -10,8 +10,7 @@
-
-
+
@@ -28,7 +27,7 @@
Canvas complexity (number of paths):
-
+
@@ -214,6 +213,7 @@
+