Skip to content

Commit

Permalink
build dist
Browse files Browse the repository at this point in the history
  • Loading branch information
@ShaMan123
ShaMan123 committed Apr 8, 2021
1 parent 135a27c commit 4667bd6
Show file tree
Hide file tree
Showing 3 changed files with 170 additions and 168 deletions.
334 changes: 168 additions & 166 deletions dist/fabric.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11092,194 +11092,196 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fab


(function () {
var ClipPathGroup = fabric.util.createClass(fabric.Group, {
_transformMatrix: null,

initialize: function (objects, transformMatrix, options) {
this.callSuper("initialize", objects, options);
this._transformMatrix = transformMatrix;
},

transform: function (ctx) {
var m = this._transformMatrix;
ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
this.callSuper("transform", ctx);
}
});

/**
* EraserBrush class
* @class fabric.EraserBrush
* @extends fabric.PencilBrush
*/
fabric.EraserBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fabric.EraserBrush.prototype */ {

type: 'eraser',

/**
* Get the context on which the erasing should occur
* Uses different drawing context than PencilBrush to erase objects
*/
getContext: function () {
return this.canvas.getContext();
//return this.canvas.contextTop;
},

/**
* Use different drawing context to erase objects
* @override @class fabric.BaseBrush
*/
_setBrushStyles: function () {
var ctx = this.getContext();
ctx.strokeStyle = this.color;
ctx.lineWidth = this.width;
ctx.lineCap = this.strokeLineCap;
ctx.miterLimit = this.strokeMiterLimit;
ctx.lineJoin = this.strokeLineJoin;
if (fabric.StaticCanvas.supports('setLineDash')) {
ctx.setLineDash(this.strokeDashArray || []);
}
},

/**
* @extends @class fabric.BaseBrush
* @param {*} ctx
*/
_saveAndTransform: function (ctx) {
this.callSuper('_saveAndTransform', ctx);
ctx.globalCompositeOperation = 'destination-out';
},
fabric.EraserBrush = fabric.util.createClass(
fabric.PencilBrush,
/** @lends fabric.EraserBrush.prototype */ {
type: "eraser",

/**
* Use different drawing context to erase objects
* @override @class fabric.BaseBrush
*/
_setShadow: function () {
if (!this.shadow) {
return;
}

var canvas = this.canvas,
shadow = this.shadow,
ctx = this.getContext(),
zoom = canvas.getZoom();
if (canvas && canvas._isRetinaScaling()) {
zoom *= fabric.devicePixelRatio;
}

ctx.shadowColor = shadow.color;
ctx.shadowBlur = shadow.blur * zoom;
ctx.shadowOffsetX = shadow.offsetX * zoom;
ctx.shadowOffsetY = shadow.offsetY * zoom;
},
/**
* @extends @class fabric.BaseBrush
* @param {CanvasRenderingContext2D} ctx
*/
_saveAndTransform: function (ctx) {
this.callSuper("_saveAndTransform", ctx);
ctx.globalCompositeOperation = "destination-out";
},

/**
* Use different drawing context to erase objects
* @override @class fabric.PencilBrush
*/
onMouseMove: function (pointer, options) {
if (!this.canvas._isMainEvent(options.e)) {
return;
}
if (this._captureDrawingPath(pointer) && this._points.length > 1) {
if (this.needsFullRender()) {
// redraw curve
// clear top canvas
this.canvas.clearContext(this.canvas.contextTop);
this._render();
/**
* Supports selective erasing: Only erasable objects will be visibly affected by the eraser brush.
* In order to support selective erasing all non erasable objects are rendered on the main ctx
* while the entire canvas is rendered on the top ctx.
* When erasing occurs, the path clips the top ctx and reveals the main ctx.
* This achieves the desired effect of seeming to erase only erasable objects.
* @param {fabric.Point} pointer
* @param {fabric.IEvent} options
* @returns
*/
onMouseDown: function (pointer, options) {
if (!this.canvas._isMainEvent(options.e)) {
return;
}
else {
var points = this._points, length = points.length, ctx = this.getContext();
// draw the curve update
this._saveAndTransform(ctx);
if (this.oldEnd) {
ctx.beginPath();
ctx.moveTo(this.oldEnd.x, this.oldEnd.y);
this.canvas.clone(function (c) {
if (c.backgroundImage && c.backgroundImage.erasable) {
c.setBackgroundImage(null);
}
this.oldEnd = this._drawSegment(ctx, points[length - 2], points[length - 1], true);
ctx.stroke();
ctx.restore();
}
}
},

/**
* Use different drawing context to erase objects
* @private
* @param {Object} pointer Actual mouse position related to the canvas.
*/
_prepareForDrawing: function (pointer) {

var p = new fabric.Point(pointer.x, pointer.y);
if (
c.backgroundColor &&
c.backgroundColor instanceof fabric.Object &&
c.erasable
) {
c.setBackgroundColor(null);
}
c.renderCanvas(
this.canvas.getContext(),
this.canvas.getObjects().filter(function (obj) {
return !obj.erasable;
})
);
c.dispose();
this.callSuper("onMouseDown", pointer, options);
});
},

this._reset();
this._addPoint(p);
this.getContext().moveTo(p.x, p.y);
},
/**
* Restore ctx after _finalizeAndAddPath is invoked
* @param {fabric.Point} pointer
* @param {fabric.IEvent} options
* @returns
*/
onMouseUp: function (pointer, options) {
var retVal = this.callSuper("onMouseUp", pointer, options);
this.canvas.renderAll();
return retVal;
},

/**
* Creates fabric.Path object to add on canvas
* @param {String} pathData Path data
* @return {fabric.Path} Path to add on canvas
*/
createPath: function (pathData) {
var path = this.callSuper('createPath', pathData);
path.globalCompositeOperation = 'destination-out';
path.inverted = true;
path.selectable = false;
path.evented = false;
path.absolutePositioned = true;
return path;
},
_render: function () {
this.canvas.renderCanvas(
this.canvas.contextTop,
this.canvas.getObjects()
);
this.callSuper("_render");
},

/**
* Adds path to existing eraser paths on object
* @param {fabric.Object} obj
* @param {fabric.Path} path
*/
_addPathToObjectEraser: function(obj, path) {
var points = obj.eraser ? obj.eraser.path : [];
var mergedEraserPaths = this.createPath(points.concat(path.path));
var rect = new fabric.Rect({ top: 0, left: 0, width: this.canvas.width, height: this.canvas.height });
var clipObject = new fabric.Group([rect, mergedEraserPaths], { absolutePositioned: true });
clipObject.globalCompositeOperation = "destination-out";
obj.set({
clipPath: clipObject,
inverted: true,
dirty: true,
eraser: mergedEraserPaths
})
},
/**
* Creates fabric.Path object to add on canvas
* @param {String} pathData Path data
* @return {fabric.Path} Path to add on canvas
*/
createPath: function (pathData) {
var path = this.callSuper("createPath", pathData);
path.set({
globalCompositeOperation: "destination-out",
selectable: false,
evented: false
});
return path;
},

/**
* On mouseup after drawing the path on contextTop canvas
* we use the points captured to create an new fabric path object
* and add it to the fabric canvas.
*/
_finalizeAndAddPath: function () {
/**
* Adds path to existing eraser paths on object
* @private
* @param {fabric.Object} obj
* @param {fabric.Path} path
*/
_addPathToObjectEraser: function (obj, path) {
var points = obj.eraser ? obj.eraser.path : [];
var mergedEraserPaths = this.createPath(points.concat(path.path));
var rect = new fabric.Rect({
top: 0,
left: 0,
width: this.canvas.width,
height: this.canvas.height
});
var transformMatrix = fabric.util.invertTransform(
obj.calcTransformMatrix()
);
var clipObject = new ClipPathGroup(
[rect, mergedEraserPaths],
transformMatrix,
{ globalCompositeOperation: "destination-out" }
);
obj.set({
clipPath: clipObject,
inverted: true,
dirty: true,
eraser: mergedEraserPaths
});
},

var ctx = this.getContext();
ctx.closePath();
if (this.decimate) {
this._points = this.decimatePoints(this._points, this.decimate);
}
var pathData = this.convertPointsToSVGPath(this._points).join('');
if (pathData === 'M 0 0 Q 0 0 0 0 L 0 0') {
// do not create 0 width/height paths, as they are
// rendered inconsistently across browsers
// Firefox 4, for example, renders a dot,
// whereas Chrome 10 renders nothing
this.canvas.requestRenderAll();
return;
}
/**
* On mouseup after drawing the path on contextTop canvas
* we use the points captured to create an new fabric path object
* and add it to every intersected erasable object.
*/
_finalizeAndAddPath: function () {
var ctx = this.canvas.contextTop;
ctx.closePath();
if (this.decimate) {
this._points = this.decimatePoints(this._points, this.decimate);
}
var pathData = this.convertPointsToSVGPath(this._points).join("");
if (pathData === "M 0 0 Q 0 0 0 0 L 0 0") {
// do not create 0 width/height paths, as they are
// rendered inconsistently across browsers
// Firefox 4, for example, renders a dot,
// whereas Chrome 10 renders nothing
this.canvas.requestRenderAll();
return;
}

var path = this.createPath(pathData);
//this.canvas.clearContext(this.canvas.contextTop);
this.canvas.fire('before:path:created', { path: path });
var path = this.createPath(pathData);
this.canvas.clearContext(this.canvas.contextTop);
this.canvas.fire("before:path:created", { path: path });

if (this.canvas.backgroundImage && this.canvas.backgroundImage.erasable) {
this._addPathToObjectEraser(this.canvas.backgroundImage, path);
}
var _this = this;
this.canvas.getObjects()
.forEach(function (obj) {
if (
this.canvas.erasable ||
(this.canvas.backgroundImage && this.canvas.backgroundImage.erasable)
) {
this._addPathToObjectEraser(this.canvas.backgroundImage, path);
}
if (
this.canvas.erasable ||
(this.canvas.backgroundColor &&
this.canvas.backgroundColor instanceof fabric.Object &&
this.canvas.backgroundColor.erasable)
) {
this._addPathToObjectEraser(this.canvas.backgroundColor, path);
}
var _this = this;
this.canvas.forEachObject(function (obj) {
if (obj.erasable && obj.intersectsWithObject(path)) {
_this._addPathToObjectEraser(obj, path);
}
});
this.canvas.requestRenderAll();
path.setCoords();
this._resetShadow();
this.canvas.requestRenderAll();
path.setCoords();
this._resetShadow();

// fire event 'path' created
this.canvas.fire('path:created', { path: path });
// fire event 'path' created
this.canvas.fire("path:created", { path: path });
}
}
});
);
})();


Expand Down
2 changes: 1 addition & 1 deletion dist/fabric.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/brushes/eraser_brush.class.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
if (!this.canvas._isMainEvent(options.e)) {
return;
}
this.canvas.clone((c) => {
this.canvas.clone(function (c) {
if (c.backgroundImage && c.backgroundImage.erasable) {
c.setBackgroundImage(null);
}
Expand Down

0 comments on commit 4667bd6

Please sign in to comment.