Hopiu/fabric.js
1
0
Fork 0
mirror of https://github.com/Hopiu/fabric.js.git synced 2026-05-14 00:33:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix fabric.Line to render properly when x2/y2 is smaller than x1/y1. Thanks @LimeyTX. Closes #648

Browse source
This commit is contained in:
kangax 2013-05-26 00:05:49 +02:00
parent e8c3b8f4fe
commit 0a44d30347
4 changed files with 31 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
dist/all.js vendored
View file

@ -12047,8 +12047,8 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
this.set('width', Math.abs(this.x2 - this.x1) || 1);
this.set('height', Math.abs(this.y2 - this.y1) || 1);
this.set('left', 'left' in options ? options.left : (this.x1 + this.width / 2));
this.set('top', 'top' in options ? options.top : (this.y1 + this.height / 2));
this.set('left', 'left' in options ? options.left : (Math.min(this.x1, this.x2) + this.width / 2));
this.set('top', 'top' in options ? options.top : (Math.min(this.y1, this.y2) + this.height / 2));
},
/**
@ -12077,9 +12077,19 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
}
if (!this.strokeDashArray || this.strokeDashArray && supportsLineDash) {
// move from center (of virtual box) to its left/top corner
ctx.moveTo(this.width === 1 ? 0 : (-this.width / 2), this.height === 1 ? 0 : (-this.height / 2));
ctx.lineTo(this.width === 1 ? 0 : (this.width / 2), this.height === 1 ? 0 : (this.height / 2));
// we can't assume x1, y1 is top left and x2, y2 is bottom right
var xMult = this.x1 <= this.x2 ? -1 : 1;
var yMult = this.y1 <= this.y2 ? -1 : 1;
ctx.moveTo(
this.width === 1 ? 0 : (xMult * this.width / 2),
this.height === 1 ? 0 : (yMult * this.height / 2));
ctx.lineTo(
this.width === 1 ? 0 : (xMult * -1 * this.width / 2),
this.height === 1 ? 0 : (yMult * -1 * this.height / 2));
}
ctx.lineWidth = this.strokeWidth;

6
dist/all.min.js vendored
View file

File diff suppressed because one or more lines are too long

BIN
dist/all.min.js.gz vendored
View file

Binary file not shown.

18
src/line.class.js
View file

@ -59,8 +59,8 @@
this.set('width', Math.abs(this.x2 - this.x1) || 1);
this.set('height', Math.abs(this.y2 - this.y1) || 1);
this.set('left', 'left' in options ? options.left : (this.x1 + this.width / 2));
this.set('top', 'top' in options ? options.top : (this.y1 + this.height / 2));
this.set('left', 'left' in options ? options.left : (Math.min(this.x1, this.x2) + this.width / 2));
this.set('top', 'top' in options ? options.top : (Math.min(this.y1, this.y2) + this.height / 2));
},
/**
@ -89,9 +89,19 @@
}
if (!this.strokeDashArray || this.strokeDashArray && supportsLineDash) {
// move from center (of virtual box) to its left/top corner
ctx.moveTo(this.width === 1 ? 0 : (-this.width / 2), this.height === 1 ? 0 : (-this.height / 2));
ctx.lineTo(this.width === 1 ? 0 : (this.width / 2), this.height === 1 ? 0 : (this.height / 2));
// we can't assume x1, y1 is top left and x2, y2 is bottom right
var xMult = this.x1 <= this.x2 ? -1 : 1;
var yMult = this.y1 <= this.y2 ? -1 : 1;
ctx.moveTo(
this.width === 1 ? 0 : (xMult * this.width / 2),
this.height === 1 ? 0 : (yMult * this.height / 2));
ctx.lineTo(
this.width === 1 ? 0 : (xMult * -1 * this.width / 2),
this.height === 1 ? 0 : (yMult * -1 * this.height / 2));
}
ctx.lineWidth = this.strokeWidth;