Fix gradient rendering in path objects.

This commit is contained in:
kangax 2012-08-21 19:31:39 +02:00
parent 9cde32897a
commit dc8224138d
7 changed files with 42 additions and 102 deletions

View file

@ -1,6 +1,6 @@
/*! Fabric.js Copyright 2008-2012, Printio (Juriy Zaytsev, Maxim Chernyak) */
var fabric = fabric || { version: "0.9.0" };
var fabric = fabric || { version: "0.9.1" };
if (typeof exports != 'undefined') {
exports.fabric = fabric;

68
dist/all.js vendored
View file

@ -1,7 +1,7 @@
/* build: `node build.js modules=ALL` */
/*! Fabric.js Copyright 2008-2012, Printio (Juriy Zaytsev, Maxim Chernyak) */
var fabric = fabric || { version: "0.9.0" };
var fabric = fabric || { version: "0.9.1" };
if (typeof exports != 'undefined') {
exports.fabric = fabric;
@ -10542,14 +10542,14 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, {
break;
case 't': // shorthand quadraticCurveTo, relative
// transform to absolute x,y
tempX = x + current[1];
tempY = y + current[2];
if (previous[0].match(/[QqTt]/) === null) {
// If there is no previous command or if the previous command was not a Q, q, T or t,
// If there is no previous command or if the previous command was not a Q, q, T or t,
// assume the control point is coincident with the current point
controlX = x;
controlY = y;
@ -10657,7 +10657,9 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, {
ctx.fillStyle = this.overlayFill;
}
else if (this.fill) {
ctx.fillStyle = this.fill;
ctx.fillStyle = this.fill.toLiveGradient
? this.fill.toLiveGradient(ctx)
: this.fill;
}
if (this.stroke) {
@ -10955,60 +10957,28 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, {
}
},
/**
* @private
* @method _initProperties
*/
// _initProperties: function() {
// this.stateProperties.forEach(function(prop) {
// if (prop === 'fill') {
// this.set(prop, this.options[prop]);
// }
// else if (prop === 'angle') {
// this.setAngle(this.options[prop]);
// }
// else {
// this[prop] = this.options[prop];
// }
// }, this);
// },
/**
* Renders this group on a specified context
* @method render
* @param {CanvasRenderingContext2D} ctx Context to render this instance on
*/
render: function(ctx) {
if (this.stub) {
// fast-path, rendering image stub
ctx.save();
ctx.save();
this.transform(ctx);
this.stub.render(ctx, false /* no transform */);
if (this.active) {
this.drawBorders(ctx);
this.drawCorners(ctx);
}
ctx.restore();
var m = this.transformMatrix;
if (m) {
ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
}
else {
ctx.save();
var m = this.transformMatrix;
if (m) {
ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
}
this.transform(ctx);
for (var i = 0, l = this.paths.length; i < l; ++i) {
this.paths[i].render(ctx, true);
}
if (this.active) {
this.drawBorders(ctx);
this.hideCorners || this.drawCorners(ctx);
}
ctx.restore();
this.transform(ctx);
for (var i = 0, l = this.paths.length; i < l; ++i) {
this.paths[i].render(ctx, true);
}
if (this.active) {
this.drawBorders(ctx);
this.hideCorners || this.drawCorners(ctx);
}
ctx.restore();
},
/**

4
dist/all.min.js vendored

File diff suppressed because one or more lines are too long

BIN
dist/all.min.js.gz vendored

Binary file not shown.

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": "0.9.0",
"version": "0.9.1",
"author": "Juriy Zaytsev <kangax@gmail.com>",
"keywords": ["canvas", "graphic", "graphics", "SVG", "node-canvas", "parser", "HTML5", "object model"],
"repository": "git://github.com/kangax/fabric.js",
@ -14,7 +14,7 @@
"test": "node test.js"
},
"dependencies": {
"canvas": "0.13.0",
"canvas": "~0.13.0",
"jsdom": ">=0.2.3",
"xmldom": ">=0.1.7"
},

View file

@ -404,14 +404,14 @@
break;
case 't': // shorthand quadraticCurveTo, relative
// transform to absolute x,y
tempX = x + current[1];
tempY = y + current[2];
if (previous[0].match(/[QqTt]/) === null) {
// If there is no previous command or if the previous command was not a Q, q, T or t,
// If there is no previous command or if the previous command was not a Q, q, T or t,
// assume the control point is coincident with the current point
controlX = x;
controlY = y;
@ -519,7 +519,9 @@
ctx.fillStyle = this.overlayFill;
}
else if (this.fill) {
ctx.fillStyle = this.fill;
ctx.fillStyle = this.fill.toLiveGradient
? this.fill.toLiveGradient(ctx)
: this.fill;
}
if (this.stroke) {

View file

@ -57,60 +57,28 @@
}
},
/**
* @private
* @method _initProperties
*/
// _initProperties: function() {
// this.stateProperties.forEach(function(prop) {
// if (prop === 'fill') {
// this.set(prop, this.options[prop]);
// }
// else if (prop === 'angle') {
// this.setAngle(this.options[prop]);
// }
// else {
// this[prop] = this.options[prop];
// }
// }, this);
// },
/**
* Renders this group on a specified context
* @method render
* @param {CanvasRenderingContext2D} ctx Context to render this instance on
*/
render: function(ctx) {
if (this.stub) {
// fast-path, rendering image stub
ctx.save();
ctx.save();
this.transform(ctx);
this.stub.render(ctx, false /* no transform */);
if (this.active) {
this.drawBorders(ctx);
this.drawCorners(ctx);
}
ctx.restore();
var m = this.transformMatrix;
if (m) {
ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
}
else {
ctx.save();
var m = this.transformMatrix;
if (m) {
ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
}
this.transform(ctx);
for (var i = 0, l = this.paths.length; i < l; ++i) {
this.paths[i].render(ctx, true);
}
if (this.active) {
this.drawBorders(ctx);
this.hideCorners || this.drawCorners(ctx);
}
ctx.restore();
this.transform(ctx);
for (var i = 0, l = this.paths.length; i < l; ++i) {
this.paths[i].render(ctx, true);
}
if (this.active) {
this.drawBorders(ctx);
this.hideCorners || this.drawCorners(ctx);
}
ctx.restore();
},
/**