Skip to content

Commit

Permalink
removed error in demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@asturur
asturur committed Oct 24, 2017
1 parent 5f51795 commit f890635
Show file tree
Hide file tree
Showing 8 changed files with 59 additions and 25 deletions.
11 changes: 9 additions & 2 deletions build/files/src/brushes/base_brush.class.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,12 +36,19 @@ fabric.BaseBrush = fabric.util.createClass(/** @lends fabric.BaseBrush.prototype
strokeLineCap: 'round',

/**
* Corner style of a brush (one of "bevil", "round", "miter")
* Corner style of a brush (one of "bevel", "round", "miter")
* @type String
* @default
*/
strokeLineJoin: 'round',

/**
* Maximum miter length (used for strokeLineJoin = "miter") of a brush's
* @type Number
* @default
*/
strokeMiterLimit: 10,

/**
* Stroke Dash Array.
* @type Array
Expand All @@ -66,10 +73,10 @@ fabric.BaseBrush = fabric.util.createClass(/** @lends fabric.BaseBrush.prototype
*/
_setBrushStyles: function() {
var ctx = this.canvas.contextTop;

ctx.strokeStyle = this.color;
ctx.lineWidth = this.width;
ctx.lineCap = this.strokeLineCap;
ctx.miterLimit = this.strokeMiterLimit;
ctx.lineJoin = this.strokeLineJoin;
if (this.strokeDashArray && fabric.StaticCanvas.supports('setLineDash')) {
ctx.setLineDash(this.strokeDashArray);
Expand Down
26 changes: 18 additions & 8 deletions build/files/src/brushes/pencil_brush.class.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,9 @@
* @param {fabric.Point} point Point to be added to points array
*/
_addPoint: function(point) {
if (this._points.length > 1 && point.eq(this._points[this._points.length - 1])) {
return;
}
this._points.push(point);
},

Expand Down Expand Up @@ -103,7 +106,6 @@
ctx.save();
ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]);
ctx.beginPath();

//if we only have 2 points in the path and they are the same
//it means that the user only clicked the canvas without moving the mouse
//then we should be drawing a dot. A path isn't drawn between two identical dots
Expand Down Expand Up @@ -143,9 +145,13 @@
var path = [], i, width = this.width / 1000,
p1 = new fabric.Point(points[0].x, points[0].y),
p2 = new fabric.Point(points[1].x, points[1].y),
len = points.length;
len = points.length, multSignX, multSignY, manyPoints = len > 2;

path.push('M ', p1.x - width, ' ', p1.y, ' ');
if (manyPoints) {
multSignX = points[2].x < p2.x ? -1 : points[2].x === p2.x ? 0 : 1;
multSignY = points[2].y < p2.y ? -1 : points[2].y === p2.y ? 0 : 1;
}
path.push('M ', p1.x - multSignX * width, ' ', p1.y - multSignY * width, ' ');
for (i = 1; i < len; i++) {
if (!p1.eq(p2)) {
var midPoint = p1.midPointFrom(p2);
Expand All @@ -159,7 +165,11 @@
p2 = points[i + 1];
}
}
path.push('L ', p1.x + width, ' ', p1.y, ' ');
if (manyPoints) {
multSignX = p1.x > points[i - 2].x ? 1 : p1.x === points[i - 2].x ? 0 : -1;
multSignY = p1.y > points[i - 2].y ? 1 : p1.y === points[i - 2].y ? 0 : -1;
}
path.push('L ', p1.x + multSignX * width, ' ', p1.y + multSignY * width);
return path;
},

Expand All @@ -174,6 +184,7 @@
stroke: this.color,
strokeWidth: this.width,
strokeLineCap: this.strokeLineCap,
strokeMiterLimit: this.strokeMiterLimit,
strokeLineJoin: this.strokeLineJoin,
strokeDashArray: this.strokeDashArray,
});
Expand Down Expand Up @@ -209,13 +220,12 @@
}

var path = this.createPath(pathData);

this.canvas.clearContext(this.canvas.contextTop);
this.canvas.add(path);
this.canvas.renderAll();
path.setCoords();

this.canvas.clearContext(this.canvas.contextTop);
this._resetShadow();
this.canvas.requestRenderAll();


// fire event 'path' created
this.canvas.fire('path:created', { path: path });
Expand Down
2 changes: 1 addition & 1 deletion js/kitchensink/controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -970,7 +970,7 @@ function addAccessors($scope) {
fill: this.color
});

var canvasWidth = rect.getBoundingRectWidth();
var canvasWidth = rect.getBoundingRect().width;

patternCanvas.width = patternCanvas.height = canvasWidth + squareDistance;
rect.set({ left: canvasWidth / 2, top: canvasWidth / 2 });
Expand Down
37 changes: 27 additions & 10 deletions lib/fabric.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8058,12 +8058,19 @@ fabric.BaseBrush = fabric.util.createClass(/** @lends fabric.BaseBrush.prototype
strokeLineCap: 'round',

/**
* Corner style of a brush (one of "bevil", "round", "miter")
* Corner style of a brush (one of "bevel", "round", "miter")
* @type String
* @default
*/
strokeLineJoin: 'round',

/**
* Maximum miter length (used for strokeLineJoin = "miter") of a brush's
* @type Number
* @default
*/
strokeMiterLimit: 10,

/**
* Stroke Dash Array.
* @type Array
Expand All @@ -8088,10 +8095,10 @@ fabric.BaseBrush = fabric.util.createClass(/** @lends fabric.BaseBrush.prototype
*/
_setBrushStyles: function() {
var ctx = this.canvas.contextTop;

ctx.strokeStyle = this.color;
ctx.lineWidth = this.width;
ctx.lineCap = this.strokeLineCap;
ctx.miterLimit = this.strokeMiterLimit;
ctx.lineJoin = this.strokeLineJoin;
if (this.strokeDashArray && fabric.StaticCanvas.supports('setLineDash')) {
ctx.setLineDash(this.strokeDashArray);
Expand Down Expand Up @@ -8198,6 +8205,9 @@ fabric.BaseBrush = fabric.util.createClass(/** @lends fabric.BaseBrush.prototype
* @param {fabric.Point} point Point to be added to points array
*/
_addPoint: function(point) {
if (this._points.length > 1 && point.eq(this._points[this._points.length - 1])) {
return;
}
this._points.push(point);
},

Expand Down Expand Up @@ -8234,7 +8244,6 @@ fabric.BaseBrush = fabric.util.createClass(/** @lends fabric.BaseBrush.prototype
ctx.save();
ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]);
ctx.beginPath();

//if we only have 2 points in the path and they are the same
//it means that the user only clicked the canvas without moving the mouse
//then we should be drawing a dot. A path isn't drawn between two identical dots
Expand Down Expand Up @@ -8274,9 +8283,13 @@ fabric.BaseBrush = fabric.util.createClass(/** @lends fabric.BaseBrush.prototype
var path = [], i, width = this.width / 1000,
p1 = new fabric.Point(points[0].x, points[0].y),
p2 = new fabric.Point(points[1].x, points[1].y),
len = points.length;
len = points.length, multSignX, multSignY, manyPoints = len > 2;

path.push('M ', p1.x - width, ' ', p1.y, ' ');
if (manyPoints) {
multSignX = points[2].x < p2.x ? -1 : points[2].x === p2.x ? 0 : 1;
multSignY = points[2].y < p2.y ? -1 : points[2].y === p2.y ? 0 : 1;
}
path.push('M ', p1.x - multSignX * width, ' ', p1.y - multSignY * width, ' ');
for (i = 1; i < len; i++) {
if (!p1.eq(p2)) {
var midPoint = p1.midPointFrom(p2);
Expand All @@ -8290,7 +8303,11 @@ fabric.BaseBrush = fabric.util.createClass(/** @lends fabric.BaseBrush.prototype
p2 = points[i + 1];
}
}
path.push('L ', p1.x + width, ' ', p1.y, ' ');
if (manyPoints) {
multSignX = p1.x > points[i - 2].x ? 1 : p1.x === points[i - 2].x ? 0 : -1;
multSignY = p1.y > points[i - 2].y ? 1 : p1.y === points[i - 2].y ? 0 : -1;
}
path.push('L ', p1.x + multSignX * width, ' ', p1.y + multSignY * width);
return path;
},

Expand All @@ -8305,6 +8322,7 @@ fabric.BaseBrush = fabric.util.createClass(/** @lends fabric.BaseBrush.prototype
stroke: this.color,
strokeWidth: this.width,
strokeLineCap: this.strokeLineCap,
strokeMiterLimit: this.strokeMiterLimit,
strokeLineJoin: this.strokeLineJoin,
strokeDashArray: this.strokeDashArray,
});
Expand Down Expand Up @@ -8340,13 +8358,12 @@ fabric.BaseBrush = fabric.util.createClass(/** @lends fabric.BaseBrush.prototype
}

var path = this.createPath(pathData);

this.canvas.clearContext(this.canvas.contextTop);
this.canvas.add(path);
this.canvas.renderAll();
path.setCoords();

this.canvas.clearContext(this.canvas.contextTop);
this._resetShadow();
this.canvas.requestRenderAll();


// fire event 'path' created
this.canvas.fire('path:created', { path: path });
Expand Down
2 changes: 1 addition & 1 deletion plato/files/freedrawing_controls_js/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ <h3 class="chart-header">By SLOC <i class="icon icon-info-sign" rel="popover" d
fill: this.color
});

var canvasWidth = rect.getBoundingRectWidth();
var canvasWidth = rect.getBoundingRect().width;

patternCanvas.width = patternCanvas.height = canvasWidth + squareDistance;
rect.set({ left: canvasWidth / 2, top: canvasWidth / 2 });
Expand Down
2 changes: 1 addition & 1 deletion plato/files/js_kitchensink_js/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -647,7 +647,7 @@ <h3 class="chart-header">By SLOC <i class="icon icon-info-sign" rel="popover" d
fill: this.color
});

var canvasWidth = rect.getBoundingRectWidth();
var canvasWidth = rect.getBoundingRect().width;

patternCanvas.width = patternCanvas.height = canvasWidth + squareDistance;
rect.set({ left: canvasWidth / 2, top: canvasWidth / 2 });
Expand Down
2 changes: 1 addition & 1 deletion plato/files/model_js/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -268,7 +268,7 @@ <h3 class="chart-header">By SLOC <i class="icon icon-info-sign" rel="popover" d
fill: this.color
});

var canvasWidth = rect.getBoundingRectWidth();
var canvasWidth = rect.getBoundingRect().width;

patternCanvas.width = patternCanvas.height = canvasWidth + squareDistance;
rect.set({ left: canvasWidth / 2, top: canvasWidth / 2 });
Expand Down
2 changes: 1 addition & 1 deletion posts/demos/_posts/2013-6-22-freedrawing.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@
fill: this.color
});

var canvasWidth = rect.getBoundingRectWidth();
var canvasWidth = rect.getBoundingRect().width;

patternCanvas.width = patternCanvas.height = canvasWidth + squareDistance;
rect.set({ left: canvasWidth / 2, top: canvasWidth / 2 });
Expand Down

0 comments on commit f890635

Please sign in to comment.