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

Add support for pattern offsets (via fabric.Pattern#offsetX/offsetY). Version 1.1.8

Browse source
This commit is contained in:
kangax 2013-04-22 09:16:58 -04:00
parent 395680d960
commit 22de40dc54
16 changed files with 138 additions and 66 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.7" };
var fabric = fabric || { version: "1.1.8" };
if (typeof exports !== 'undefined') {
exports.fabric = fabric;

89
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.7" };
var fabric = fabric || { version: "1.1.8" };
if (typeof exports !== 'undefined') {
exports.fabric = fabric;
@ -5131,6 +5131,20 @@ fabric.Pattern = fabric.util.createClass(/** @scope fabric.Pattern.prototype */
*/
repeat: 'repeat',
/**
* Pattern horizontal offset from object's left/top corner
* @property
* @type Number
*/
offsetX: 0,
/**
* Pattern vertical offset from object's left/top corner
* @property
* @type String
*/
offsetY: 0,
/**
* Constructor
* @method initialize
@ -5148,6 +5162,12 @@ fabric.Pattern = fabric.util.createClass(/** @scope fabric.Pattern.prototype */
if (options.repeat) {
this.repeat = options.repeat;
}
if (options.offsetX) {
this.offsetX = options.offsetX;
}
if (options.offsetY) {
this.offsetY = options.offsetY;
}
},
/**
@ -5171,7 +5191,9 @@ fabric.Pattern = fabric.util.createClass(/** @scope fabric.Pattern.prototype */
return {
source: source,
repeat: this.repeat
repeat: this.repeat,
offsetX: this.offsetX,
offsetY: this.offsetY
};
},
@ -5186,6 +5208,7 @@ fabric.Pattern = fabric.util.createClass(/** @scope fabric.Pattern.prototype */
return ctx.createPattern(source, this.repeat);
}
});
/**
* Shadow class
* @class Shadow
@ -6630,7 +6653,11 @@ fabric.Shadow = fabric.util.createClass(/** @scope fabric.Shadow.prototype */ {
? this.backgroundColor.toLive(canvasToDrawOn)
: this.backgroundColor;
canvasToDrawOn.fillRect(0, 0, this.width, this.height);
canvasToDrawOn.fillRect(
this.backgroundColor.offsetX || 0,
this.backgroundColor.offsetY || 0,
this.width,
this.height);
}
if (typeof this.backgroundImage === 'object') {
@ -10616,6 +10643,25 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @scope fabric.Stati
ctx.shadowBlur = ctx.shadowOffsetX = ctx.shadowOffsetY = 0;
},
/**
* @private
* @method _renderFill
*/
_renderFill: function(ctx) {
if (!this.fill) return;
if (this.fill.toLive) {
ctx.save();
ctx.translate(
-this.width / 2 + this.fill.offsetX,
-this.height / 2 + this.fill.offsetY);
}
ctx.fill();
if (this.fill.toLive) {
ctx.restore();
}
},
/**
* Clones an instance
* @method clone
@ -12398,9 +12444,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @scope fabric.Stati
ctx.globalAlpha = this.group ? (ctx.globalAlpha * this.opacity) : this.opacity;
ctx.arc(noTransform ? this.left : 0, noTransform ? this.top : 0, this.radius, 0, piBy2, false);
ctx.closePath();
if (this.fill) {
ctx.fill();
}
this._renderFill(ctx);
this._removeShadow(ctx);
if (this.stroke) {
ctx.stroke();
@ -12500,6 +12544,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @scope fabric.Stati
};
})(typeof exports !== 'undefined' ? exports : this);
(function(global) {
"use strict";
@ -12555,9 +12600,8 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @scope fabric.Stati
ctx.lineTo(widthBy2, heightBy2);
ctx.closePath();
if (this.fill) {
ctx.fill();
}
this._renderFill(ctx);
if (this.stroke) {
ctx.stroke();
}
@ -12619,6 +12663,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @scope fabric.Stati
};
})(typeof exports !== 'undefined' ? exports : this);
(function(global){
"use strict";
@ -12748,9 +12793,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @scope fabric.Stati
ctx.stroke();
}
this._removeShadow(ctx);
if (this.fill) {
ctx.fill();
}
this._renderFill(ctx);
ctx.restore();
},
@ -12813,6 +12856,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @scope fabric.Stati
};
})(typeof exports !== 'undefined' ? exports : this);
(function(global) {
"use strict";
@ -12940,10 +12984,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @scope fabric.Stati
ctx.quadraticCurveTo(x,y,x+rx,y,x+rx,y);
ctx.closePath();
if (this.fill) {
ctx.fill();
}
this._renderFill(ctx);
this._removeShadow(ctx);
if (this.strokeDashArray) {
@ -13236,9 +13277,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @scope fabric.Stati
point = this.points[i];
ctx.lineTo(point.x, point.y);
}
if (this.fill) {
ctx.fill();
}
this._renderFill(ctx);
this._removeShadow(ctx);
if (this.stroke) {
ctx.stroke();
@ -13301,6 +13340,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @scope fabric.Stati
};
})(typeof exports !== 'undefined' ? exports : this);
(function(global) {
"use strict";
@ -13431,9 +13471,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @scope fabric.Stati
point = this.points[i];
ctx.lineTo(point.x, point.y);
}
if (this.fill) {
ctx.fill();
}
this._renderFill(ctx);
this._removeShadow(ctx);
if (this.stroke) {
ctx.closePath();
@ -13496,6 +13534,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @scope fabric.Stati
};
})(typeof exports !== 'undefined' ? exports : this);
(function(global) {
var commandLengths = {
@ -14061,11 +14100,9 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @scope fabric.Stati
this.clipTo && fabric.util.clipContext(this, ctx);
ctx.beginPath();
this._render(ctx);
if (this.fill) {
ctx.fill();
}
this._render(ctx);
this._renderFill(ctx);
this.clipTo && ctx.restore();
if (this.shadow && !this.shadow.affectStroke) {

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

6
src/circle.class.js
View file

@ -91,9 +91,7 @@
ctx.globalAlpha = this.group ? (ctx.globalAlpha * this.opacity) : this.opacity;
ctx.arc(noTransform ? this.left : 0, noTransform ? this.top : 0, this.radius, 0, piBy2, false);
ctx.closePath();
if (this.fill) {
ctx.fill();
}
this._renderFill(ctx);
this._removeShadow(ctx);
if (this.stroke) {
ctx.stroke();
@ -192,4 +190,4 @@
return new fabric.Circle(object);
};
})(typeof exports !== 'undefined' ? exports : this);
})(typeof exports !== 'undefined' ? exports : this);

6
src/ellipse.class.js
View file

@ -127,9 +127,7 @@
ctx.stroke();
}
this._removeShadow(ctx);
if (this.fill) {
ctx.fill();
}
this._renderFill(ctx);
ctx.restore();
},
@ -191,4 +189,4 @@
return new fabric.Ellipse(object);
};
})(typeof exports !== 'undefined' ? exports : this);
})(typeof exports !== 'undefined' ? exports : this);

19
src/object.class.js
View file

@ -730,6 +730,25 @@
ctx.shadowBlur = ctx.shadowOffsetX = ctx.shadowOffsetY = 0;
},
/**
* @private
* @method _renderFill
*/
_renderFill: function(ctx) {
if (!this.fill) return;
if (this.fill.toLive) {
ctx.save();
ctx.translate(
-this.width / 2 + this.fill.offsetX,
-this.height / 2 + this.fill.offsetY);
}
ctx.fill();
if (this.fill.toLive) {
ctx.restore();
}
},
/**
* Clones an instance
* @method clone

6
src/path.class.js
View file

@ -563,11 +563,9 @@
this.clipTo && fabric.util.clipContext(this, ctx);
ctx.beginPath();
this._render(ctx);
if (this.fill) {
ctx.fill();
}
this._render(ctx);
this._renderFill(ctx);
this.clipTo && ctx.restore();
if (this.shadow && !this.shadow.affectStroke) {

26
src/pattern.class.js
View file

@ -12,6 +12,20 @@ fabric.Pattern = fabric.util.createClass(/** @scope fabric.Pattern.prototype */
*/
repeat: 'repeat',
/**
* Pattern horizontal offset from object's left/top corner
* @property
* @type Number
*/
offsetX: 0,
/**
* Pattern vertical offset from object's left/top corner
* @property
* @type String
*/
offsetY: 0,
/**
* Constructor
* @method initialize
@ -29,6 +43,12 @@ fabric.Pattern = fabric.util.createClass(/** @scope fabric.Pattern.prototype */
if (options.repeat) {
this.repeat = options.repeat;
}
if (options.offsetX) {
this.offsetX = options.offsetX;
}
if (options.offsetY) {
this.offsetY = options.offsetY;
}
},
/**
@ -52,7 +72,9 @@ fabric.Pattern = fabric.util.createClass(/** @scope fabric.Pattern.prototype */
return {
source: source,
repeat: this.repeat
repeat: this.repeat,
offsetX: this.offsetX,
offsetY: this.offsetY
};
},
@ -66,4 +88,4 @@ fabric.Pattern = fabric.util.createClass(/** @scope fabric.Pattern.prototype */
var source = typeof this.source === 'function' ? this.source() : this.source;
return ctx.createPattern(source, this.repeat);
}
});
});

6
src/polygon.class.js
View file

@ -128,9 +128,7 @@
point = this.points[i];
ctx.lineTo(point.x, point.y);
}
if (this.fill) {
ctx.fill();
}
this._renderFill(ctx);
this._removeShadow(ctx);
if (this.stroke) {
ctx.closePath();
@ -192,4 +190,4 @@
return new fabric.Polygon(object.points, object, true);
};
})(typeof exports !== 'undefined' ? exports : this);
})(typeof exports !== 'undefined' ? exports : this);

6
src/polyline.class.js
View file

@ -101,9 +101,7 @@
point = this.points[i];
ctx.lineTo(point.x, point.y);
}
if (this.fill) {
ctx.fill();
}
this._renderFill(ctx);
this._removeShadow(ctx);
if (this.stroke) {
ctx.stroke();
@ -165,4 +163,4 @@
return new fabric.Polyline(points, object, true);
};
})(typeof exports !== 'undefined' ? exports : this);
})(typeof exports !== 'undefined' ? exports : this);

5
src/rect.class.js
View file

@ -125,10 +125,7 @@
ctx.quadraticCurveTo(x,y,x+rx,y,x+rx,y);
ctx.closePath();
if (this.fill) {
ctx.fill();
}
this._renderFill(ctx);
this._removeShadow(ctx);
if (this.strokeDashArray) {

6
src/static_canvas.class.js
View file

@ -544,7 +544,11 @@
? this.backgroundColor.toLive(canvasToDrawOn)
: this.backgroundColor;
canvasToDrawOn.fillRect(0, 0, this.width, this.height);
canvasToDrawOn.fillRect(
this.backgroundColor.offsetX || 0,
this.backgroundColor.offsetY || 0,
this.width,
this.height);
}
if (typeof this.backgroundImage === 'object') {

7
src/triangle.class.js
View file

@ -53,9 +53,8 @@
ctx.lineTo(widthBy2, heightBy2);
ctx.closePath();
if (this.fill) {
ctx.fill();
}
this._renderFill(ctx);
if (this.stroke) {
ctx.stroke();
}
@ -116,4 +115,4 @@
return new fabric.Triangle(object);
};
})(typeof exports !== 'undefined' ? exports : this);
})(typeof exports !== 'undefined' ? exports : this);

6
test/unit/pattern.js
View file

@ -43,6 +43,8 @@
equal(pattern.source, img);
equal(pattern.repeat, 'repeat');
equal(pattern.offsetX, 0);
equal(pattern.offsetY, 0);
});
test('toObject', function() {
@ -57,6 +59,8 @@
equal(object.source, '../fixtures/greyfloral.png');
}
equal(object.repeat, 'repeat');
equal(object.offsetX, 0);
equal(object.offsetY, 0);
var sourceExecuted;
var patternWithGetSource = new fabric.Pattern({
@ -74,4 +78,4 @@
ok(typeof pattern.toLive == 'function');
});
})();
})();