diff --git a/src/brushes/pencil_brush.class.js b/src/brushes/pencil_brush.class.js index 25a3b28b6de..2c87a46ccba 100644 --- a/src/brushes/pencil_brush.class.js +++ b/src/brushes/pencil_brush.class.js @@ -145,7 +145,7 @@ 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, multSignX, multSignY, manyPoints = len > 2; + len = points.length, multSignX = 1, multSignY = 1, manyPoints = len > 2; if (manyPoints) { multSignX = points[2].x < p2.x ? -1 : points[2].x === p2.x ? 0 : 1; diff --git a/test.js b/test.js index fe0a28deab1..5f0792c476f 100644 --- a/test.js +++ b/test.js @@ -26,6 +26,7 @@ testrunner.run({ './test/unit/object.js', './test/unit/text.js', './test/unit/util.js', + './test/unit/brushes.js', './test/unit/image.js', './test/unit/image_filters.js', './test/unit/group.js', @@ -45,7 +46,7 @@ testrunner.run({ './test/unit/point.js', './test/unit/intersection.js', './test/unit/stateful.js' - ] + ], }, function(err, report) { if (err) { console.log(err); diff --git a/test/unit/brushes.js b/test/unit/brushes.js new file mode 100644 index 00000000000..ee7c17895dd --- /dev/null +++ b/test/unit/brushes.js @@ -0,0 +1,75 @@ +(function() { + var canvas = new fabric.Canvas(); + QUnit.module('fabric.BaseBrush'); + QUnit.test('fabric brush constructor', function(assert) { + assert.ok(fabric.BaseBrush); + + var brush = new fabric.BaseBrush(); + + assert.ok(brush instanceof fabric.BaseBrush, 'should inherit from fabric.BaseBrush'); + assert.equal(brush.color, 'rgb(0, 0, 0)', 'default color is black'); + assert.equal(brush.width, 1, 'default width is 1'); + assert.ok(typeof brush.setShadow === 'function', 'setShadow is a method'); + }); + QUnit.test('fabric pencil brush constructor', function(assert) { + assert.ok(fabric.PencilBrush); + var brush = new fabric.PencilBrush(canvas); + assert.equal(brush.canvas, canvas, 'assigns canvas'); + assert.deepEqual(brush._points, [], 'points is an empty array'); + }); + QUnit.test('fabric pencil brush draw point', function(assert) { + var brush = new fabric.PencilBrush(canvas); + var pointer = canvas.getPointer({ clientX: 10, clientY: 10}); + brush.onMouseDown(pointer); + var pathData = brush.convertPointsToSVGPath(brush._points).join(''); + assert.equal(pathData, 'M 9.999 9.999 L 10.001 10.001', 'path data create a small line that looks like a point'); + }); + QUnit.test('fabric pencil brush multiple points', function(assert) { + var brush = new fabric.PencilBrush(canvas); + var pointer = canvas.getPointer({ clientX: 10, clientY: 10}); + brush.onMouseDown(pointer); + brush.onMouseMove(pointer); + brush.onMouseMove(pointer); + brush.onMouseMove(pointer); + brush.onMouseMove(pointer); + var pathData = brush.convertPointsToSVGPath(brush._points).join(''); + assert.equal(pathData, 'M 9.999 9.999 L 10.001 10.001', 'path data create a small line that looks like a point'); + assert.equal(brush._points.length, 2, 'concident points are discarded'); + }); + QUnit.test('fabric pencil brush multiple points not discarded', function(assert) { + var brush = new fabric.PencilBrush(canvas); + var pointer = canvas.getPointer({ clientX: 10, clientY: 10}); + var pointer2 = canvas.getPointer({ clientX: 15, clientY: 15}); + var pointer3 = canvas.getPointer({ clientX: 20, clientY: 20}); + brush.onMouseDown(pointer); + brush.onMouseMove(pointer2); + brush.onMouseMove(pointer3); + brush.onMouseMove(pointer2); + brush.onMouseMove(pointer3); + var pathData = brush.convertPointsToSVGPath(brush._points).join(''); + assert.equal(pathData, 'M 9.999 9.999 Q 10 10 12.5 12.5 Q 15 15 17.5 17.5 Q 20 20 17.5 17.5 Q 15 15 17.5 17.5 L 20.001 20.001', 'path data create a complex path'); + assert.equal(brush._points.length, 6, 'concident points are discarded'); + }); + QUnit.test('fabric pencil brush multiple points not discarded', function(assert) { + var fired = false; + var added = null; + canvas.on('path:created', function(opt) { + fired = true; + added = opt.path; + }); + var brush = new fabric.PencilBrush(canvas); + var pointer = canvas.getPointer({ clientX: 10, clientY: 10}); + var pointer2 = canvas.getPointer({ clientX: 15, clientY: 15}); + var pointer3 = canvas.getPointer({ clientX: 20, clientY: 20}); + brush.onMouseDown(pointer); + brush.onMouseMove(pointer2); + brush.onMouseMove(pointer3); + brush.onMouseMove(pointer2); + brush.onMouseMove(pointer3); + brush.onMouseUp(pointer3); + assert.equal(fired, true, 'event is fired'); + assert.ok(added instanceof fabric.Path, 'a path is added'); + assert.ok(added.path.length, 6, 'path has 6 steps'); + canvas.off(); + }); +})();