Hopiu/fabric.js
1
0
Fork 0
mirror of https://github.com/Hopiu/fabric.js.git synced 2026-05-27 06:24:00 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix text rendering. Closes #590. Version 1.1.12

Browse source
This commit is contained in:
kangax 2013-05-05 13:23:49 -04:00
parent fde521317e
commit d6e292e482
8 changed files with 93 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
HEADER.js
View file

@ -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;

55
dist/all.js vendored
View file

@ -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;
},
/**

8
dist/all.min.js vendored
View file

File diff suppressed because one or more lines are too long

BIN
dist/all.min.js.gz vendored
View file

Binary file not shown.

2
package.json
View file

@ -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 <kangax@gmail.com>",
"keywords": ["canvas", "graphic", "graphics", "SVG", "node-canvas", "parser", "HTML5", "object model"],
"repository": "git://github.com/kangax/fabric.js",

5
src/object.class.js
View file

@ -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(

31
src/object_origin.mixin.js
View file

@ -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 };
}
});

17
src/text.class.js
View file

@ -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;
},
/**