Fix text rendering. Closes fabricjs#590. Version 1.1.12

zerovox · May 5, 2013 · d6e292e · d6e292e
1 parent fde5213
commit d6e292e
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 27 deletions.
diff --git a/HEADER.js b/HEADER.js
@@ -1,6 +1,6 @@
 /*! Fabric.js Copyright 2008-2013, Printio (Juriy Zaytsev, Maxim Chernyak) */
 
-var fabric = fabric || { version: "1.1.11" };
+var fabric = fabric || { version: "1.1.12" };
 
 if (typeof exports !== 'undefined') {
   exports.fabric = fabric;

diff --git a/dist/all.js b/dist/all.js
@@ -1,7 +1,7 @@
 /* build: `node build.js modules=ALL exclude=gestures` */
 /*! Fabric.js Copyright 2008-2013, Printio (Juriy Zaytsev, Maxim Chernyak) */
 
-var fabric = fabric || { version: "1.1.11" };
+var fabric = fabric || { version: "1.1.12" };
 
 if (typeof exports !== 'undefined') {
   exports.fabric = fabric;
@@ -10001,11 +10001,12 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
     /**
      * Transforms context when rendering an object
      * @param {CanvasRenderingContext2D} ctx Context
+     * @param {Boolean} when true, context is transformed to object's top/left corner. This is used when rendering text on Node
      */
-    transform: function(ctx) {
+    transform: function(ctx, fromLeft) {
       ctx.globalAlpha = this.opacity;
 
-      var center = this.getCenterPoint();
+      var center = fromLeft ? this._getLeftTopCoords() : this.getCenterPoint();
       ctx.translate(center.x, center.y);
       ctx.rotate(degreesToRadians(this.angle));
       ctx.scale(
@@ -10946,6 +10947,37 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
 
       this.setCoords();
       this.originX = to;
+    },
+
+    /**
+     * @private
+     */
+    _getLeftTopCoords: function() {
+      var angle = degreesToRadians(this.angle);
+
+      var hypotHalf = this.getWidth() / 2;
+      var xHalf = Math.cos(angle) * hypotHalf;
+      var yHalf = Math.sin(angle) * hypotHalf;
+
+      var hypotFull = this.getWidth();
+      var xFull = Math.cos(angle) * hypotFull;
+      var yFull = Math.sin(angle) * hypotFull;
+
+      var x = this.left;
+      var y = this.top;
+
+      if (this.originX === 'center') {
+        // move half left
+        x -= xHalf;
+        y -= yHalf;
+      }
+      else if (this.originX === 'right') {
+        // move full left
+        x -= xFull;
+        y -= yFull;
+      }
+
+      return { x: x, y: y };
     }
   });
 
@@ -16214,12 +16246,7 @@ fabric.Image.filters.Pixelate.fromObject = function(object) {
      */
     _renderViaNative: function(ctx) {
 
-      if (this.originX === 'left') {
-        ctx.translate(this.left, this.top);
-      }
-      else {
-        this.transform(ctx);
-      }
+      this.transform(ctx, fabric.isLikelyNode);
 
       this._setTextStyles(ctx);
 
@@ -16383,11 +16410,17 @@ fabric.Image.filters.Pixelate.fromObject = function(object) {
     },
 
     _getLeftOffset: function() {
-      return this.originX === 'left' ? 0 : -this.width / 2;
+      if (fabric.isLikelyNode && (this.originX === 'left' || this.originX === 'center')) {
+        return 0;
+      }
+      return -this.width / 2;
     },
 
     _getTopOffset: function() {
-      return this.originY === 'top' ? 0 : -this.height / 2;
+      if (fabric.isLikelyNode && (this.originY === 'top' || this.originY === 'center')) {
+        return 0;
+      }
+      return -this.height / 2;
     },
 
     /**

diff --git a/dist/all.min.js b/dist/all.min.js
diff --git a/dist/all.min.js.gz b/dist/all.min.js.gz
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "fabric",
   "description": "Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.",
-  "version": "1.1.11",
+  "version": "1.1.12",
   "author": "Juriy Zaytsev <[email protected]>",
   "keywords": ["canvas", "graphic", "graphics", "SVG", "node-canvas", "parser", "HTML5", "object model"],
   "repository": "git://github.com/kangax/fabric.js",

diff --git a/src/object.class.js b/src/object.class.js
@@ -352,11 +352,12 @@
     /**
      * Transforms context when rendering an object
      * @param {CanvasRenderingContext2D} ctx Context
+     * @param {Boolean} when true, context is transformed to object's top/left corner. This is used when rendering text on Node
      */
-    transform: function(ctx) {
+    transform: function(ctx, fromLeft) {
       ctx.globalAlpha = this.opacity;
 
-      var center = this.getCenterPoint();
+      var center = fromLeft ? this._getLeftTopCoords() : this.getCenterPoint();
       ctx.translate(center.x, center.y);
       ctx.rotate(degreesToRadians(this.angle));
       ctx.scale(

diff --git a/src/object_origin.mixin.js b/src/object_origin.mixin.js
@@ -192,6 +192,37 @@
 
       this.setCoords();
       this.originX = to;
+    },
+
+    /**
+     * @private
+     */
+    _getLeftTopCoords: function() {
+      var angle = degreesToRadians(this.angle);
+
+      var hypotHalf = this.getWidth() / 2;
+      var xHalf = Math.cos(angle) * hypotHalf;
+      var yHalf = Math.sin(angle) * hypotHalf;
+
+      var hypotFull = this.getWidth();
+      var xFull = Math.cos(angle) * hypotFull;
+      var yFull = Math.sin(angle) * hypotFull;
+
+      var x = this.left;
+      var y = this.top;
+
+      if (this.originX === 'center') {
+        // move half left
+        x -= xHalf;
+        y -= yHalf;
+      }
+      else if (this.originX === 'right') {
+        // move full left
+        x -= xFull;
+        y -= yFull;
+      }
+
+      return { x: x, y: y };
     }
   });
 

diff --git a/src/text.class.js b/src/text.class.js
@@ -262,12 +262,7 @@
      */
     _renderViaNative: function(ctx) {
 
-      if (this.originX === 'left') {
-        ctx.translate(this.left, this.top);
-      }
-      else {
-        this.transform(ctx);
-      }
+      this.transform(ctx, fabric.isLikelyNode);
 
       this._setTextStyles(ctx);
 
@@ -431,11 +426,17 @@
     },
 
     _getLeftOffset: function() {
-      return this.originX === 'left' ? 0 : -this.width / 2;
+      if (fabric.isLikelyNode && (this.originX === 'left' || this.originX === 'center')) {
+        return 0;
+      }
+      return -this.width / 2;
     },
 
     _getTopOffset: function() {
-      return this.originY === 'top' ? 0 : -this.height / 2;
+      if (fabric.isLikelyNode && (this.originY === 'top' || this.originY === 'center')) {
+        return 0;
+      }
+      return -this.height / 2;
     },
 
     /**