diff --git a/src/shapes/object.class.js b/src/shapes/object.class.js index 95f8df72695..df1823c5f8b 100644 --- a/src/shapes/object.class.js +++ b/src/shapes/object.class.js @@ -1078,6 +1078,29 @@ } }, + /** + * @private + * Sets line dash + * @param {CanvasRenderingContext2D} ctx Context to set the dash line on + * @param {Array} dashArray array representing dashes + * @param {Function} alternative function to call if browaser does not support lineDash + */ + _setLineDash: function(ctx, dashArray, alternative) { + if (!dashArray) { + return; + } + // Spec requires the concatenation of two copies the dash list when the number of elements is odd + if (1 & dashArray.length) { + dashArray.push.apply(dashArray, dashArray); + } + if (supportsLineDash) { + ctx.setLineDash(dashArray); + } + else { + alternative && alternative(ctx); + } + }, + /** * Renders controls and borders for the object * @param {CanvasRenderingContext2D} ctx Context to render on @@ -1185,18 +1208,7 @@ ctx.save(); - if (this.strokeDashArray) { - // Spec requires the concatenation of two copies the dash list when the number of elements is odd - if (1 & this.strokeDashArray.length) { - this.strokeDashArray.push.apply(this.strokeDashArray, this.strokeDashArray); - } - if (supportsLineDash) { - ctx.setLineDash(this.strokeDashArray); - } - else { - this._renderDashedStroke && this._renderDashedStroke(ctx); - } - } + this._setLineDash(ctx, this.strokeDashArray, this._renderDashedStroke); if (this.stroke.gradientTransform) { var g = this.stroke.gradientTransform; ctx.transform.apply(ctx, g); diff --git a/test/unit/object.js b/test/unit/object.js index 5e8132431af..35721427ac3 100644 --- a/test/unit/object.js +++ b/test/unit/object.js @@ -755,6 +755,17 @@ test('toDataURL & reference to canvas', function() { equal(object.get('left'), 112.45, 'non boolean properties should not be affected'); }); + test('_setLineDash', function() { + var object = new fabric.Rect({ left: 100, top: 124, width: 210, height: 66, stroke: 'black', strokeWidth: 2}); + ok(typeof object._setLineDash === 'function'); + + canvas.add(object); + object.strokeDashArray = [3, 2, 1]; + equal(object.strokeDashArray.length, 3, 'strokeDash array is odd'); + canvas.renderAll(); + equal(object.strokeDashArray.length, 6, 'strokeDash array now is even'); + }); + test('straighten', function() { var object = new fabric.Object({ left: 100, top: 124, width: 210, height: 66 }); ok(typeof object.straighten == 'function');