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

Add "controlsAboveOverlay" option to canvas.

Browse source
This commit is contained in:
kangax 2012-08-28 20:41:06 +02:00
parent 2237463cb8
commit 1d3de62a9c
6 changed files with 108 additions and 15 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-2012, Printio (Juriy Zaytsev, Maxim Chernyak) */
var fabric = fabric || { version: "0.9.3" };
var fabric = fabric || { version: "0.9.4" };
if (typeof exports != 'undefined') {
exports.fabric = fabric;

62
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.3" };
var fabric = fabric || { version: "0.9.4" };
if (typeof exports != 'undefined') {
exports.fabric = fabric;
@ -4957,6 +4957,13 @@ fabric.util.string = {
*/
clipTo: null,
/**
* Indicates whether object controls (borders/corners) are rendered above overlay image
* @property
* @type Boolean
*/
controlsAboveOverlay: false,
/**
* Callback; invoked right before object is about to be scaled/rotated
* @method onBeforeScaleRotate
@ -5212,7 +5219,18 @@ fabric.util.string = {
* @private
*/
_draw: function (ctx, object) {
object && object.render(ctx);
if (!object) return;
if (this.controlsAboveOverlay) {
var hasBorders = object.hasBorders, hasCorners = object.hasCorners;
object.hasBorders = object.hasCorners = false;
object.render(ctx);
object.hasBorders = hasBorders;
object.hasCorners = hasCorners;
}
else {
object.render(ctx);
}
},
/**
@ -5375,7 +5393,11 @@ fabric.util.string = {
}
if (this.overlayImage) {
(this.contextTop || this.contextContainer).drawImage(this.overlayImage, 0, 0);
this.contextContainer.drawImage(this.overlayImage, 0, 0);
}
if (this.controlsAboveOverlay) {
this.drawControls(this.contextContainer);
}
if (this.onFpsUpdate) {
@ -5399,7 +5421,7 @@ fabric.util.string = {
this.clearContext(this.contextTop || this.contextContainer);
if (this.overlayImage) {
(this.contextTop || this.contextContainer).drawImage(this.overlayImage, 0, 0);
this.contextContainer.drawImage(this.overlayImage, 0, 0);
}
// we render the top context - last object
@ -5419,6 +5441,31 @@ fabric.util.string = {
return this;
},
/**
* Draws objects' controls (borders/corners)
* @method drawControls
* @param {Object} ctx context to render controls on
*/
drawControls: function(ctx) {
var activeGroup = this.getActiveGroup();
if (activeGroup) {
ctx.save();
fabric.Group.prototype.transform.call(activeGroup, ctx);
activeGroup.drawBorders(ctx).drawCorners(ctx);
ctx.restore();
}
else {
for (var i = 0, len = this._objects.length; i < len; ++i) {
if (!this._objects[i].active) continue;
ctx.save();
fabric.Object.prototype.transform.call(this._objects[i], ctx);
this._objects[i].drawBorders(ctx).drawCorners(ctx);
ctx.restore();
}
}
},
/**
* Exports canvas element to a dataurl image.
* @method toDataURL
@ -10852,8 +10899,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, {
var minX = min(aX),
minY = min(aY),
deltaX = 0,
deltaY = 0,
strokeWidthOffset = this.strokeWidth > 1 ? (this.strokeWidth * 2) : 0;
deltaY = 0;
var o = {
top: minY - deltaY,
@ -10862,8 +10908,8 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, {
right: max(aX) - deltaX
};
o.width = o.right - o.left + strokeWidthOffset;
o.height = o.bottom - o.top + strokeWidthOffset;
o.width = o.right - o.left;
o.height = o.bottom - o.top;
return o;
}

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

53
src/static_canvas.class.js
View file

@ -91,6 +91,13 @@
*/
clipTo: null,
/**
* Indicates whether object controls (borders/corners) are rendered above overlay image
* @property
* @type Boolean
*/
controlsAboveOverlay: false,
/**
* Callback; invoked right before object is about to be scaled/rotated
* @method onBeforeScaleRotate
@ -346,7 +353,18 @@
* @private
*/
_draw: function (ctx, object) {
object && object.render(ctx);
if (!object) return;
if (this.controlsAboveOverlay) {
var hasBorders = object.hasBorders, hasCorners = object.hasCorners;
object.hasBorders = object.hasCorners = false;
object.render(ctx);
object.hasBorders = hasBorders;
object.hasCorners = hasCorners;
}
else {
object.render(ctx);
}
},
/**
@ -509,7 +527,11 @@
}
if (this.overlayImage) {
(this.contextTop || this.contextContainer).drawImage(this.overlayImage, 0, 0);
this.contextContainer.drawImage(this.overlayImage, 0, 0);
}
if (this.controlsAboveOverlay) {
this.drawControls(this.contextContainer);
}
if (this.onFpsUpdate) {
@ -533,7 +555,7 @@
this.clearContext(this.contextTop || this.contextContainer);
if (this.overlayImage) {
(this.contextTop || this.contextContainer).drawImage(this.overlayImage, 0, 0);
this.contextContainer.drawImage(this.overlayImage, 0, 0);
}
// we render the top context - last object
@ -553,6 +575,31 @@
return this;
},
/**
* Draws objects' controls (borders/corners)
* @method drawControls
* @param {Object} ctx context to render controls on
*/
drawControls: function(ctx) {
var activeGroup = this.getActiveGroup();
if (activeGroup) {
ctx.save();
fabric.Group.prototype.transform.call(activeGroup, ctx);
activeGroup.drawBorders(ctx).drawCorners(ctx);
ctx.restore();
}
else {
for (var i = 0, len = this._objects.length; i < len; ++i) {
if (!this._objects[i].active) continue;
ctx.save();
fabric.Object.prototype.transform.call(this._objects[i], ctx);
this._objects[i].drawBorders(ctx).drawCorners(ctx);
ctx.restore();
}
}
},
/**
* Exports canvas element to a dataurl image.
* @method toDataURL