Set line dash in external function (#2928)

* move dashed code in function for later reuse in controls
* Added functionTest
This commit is contained in:
Andrea Bogazzi 2016-05-02 11:33:09 +02:00
parent 17775fa567
commit e032cae7d1
2 changed files with 35 additions and 12 deletions

View file

@ -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);

View file

@ -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');