Hopiu/fabric.js
1
0
Fork 0
mirror of https://github.com/Hopiu/fabric.js.git synced 2026-04-20 06:00:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #2155 from asturur/fixingstrokewidth

Browse source 
Remove old strokeWidth calculation
This commit is contained in:
Juriy Zaytsev 2015-05-03 16:46:39 +02:00
commit 5d6cd9b82f
7 changed files with 37 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/mixins/object_origin.mixin.js
View file

@ -13,21 +13,20 @@
*/
translateToCenterPoint: function(point, originX, originY) {
var cx = point.x,
cy = point.y,
strokeWidth = this.stroke ? this.strokeWidth : 0;
cy = point.y;
if (originX === 'left') {
cx = point.x + (this.getWidth() + strokeWidth * this.scaleX) / 2;
cx = point.x + (this.getWidth() + this.strokeWidth * this.scaleX) / 2;
}
else if (originX === 'right') {
cx = point.x - (this.getWidth() + strokeWidth * this.scaleX) / 2;
cx = point.x - (this.getWidth() + this.strokeWidth * this.scaleX) / 2;
}
if (originY === 'top') {
cy = point.y + (this.getHeight() + strokeWidth * this.scaleY) / 2;
cy = point.y + (this.getHeight() + this.strokeWidth * this.scaleY) / 2;
}
else if (originY === 'bottom') {
cy = point.y - (this.getHeight() + strokeWidth * this.scaleY) / 2;
cy = point.y - (this.getHeight() + this.strokeWidth * this.scaleY) / 2;
}
// Apply the reverse rotation to the point (it's already scaled properly)
@ -43,21 +42,20 @@
*/
translateToOriginPoint: function(center, originX, originY) {
var x = center.x,
y = center.y,
strokeWidth = this.stroke ? this.strokeWidth : 0;
y = center.y;
// Get the point coordinates
if (originX === 'left') {
x = center.x - (this.getWidth() + strokeWidth * this.scaleX) / 2;
x = center.x - (this.getWidth() + this.strokeWidth * this.scaleX) / 2;
}
else if (originX === 'right') {
x = center.x + (this.getWidth() + strokeWidth * this.scaleX) / 2;
x = center.x + (this.getWidth() + this.strokeWidth * this.scaleX) / 2;
}
if (originY === 'top') {
y = center.y - (this.getHeight() + strokeWidth * this.scaleY) / 2;
y = center.y - (this.getHeight() + this.strokeWidth * this.scaleY) / 2;
}
else if (originY === 'bottom') {
y = center.y + (this.getHeight() + strokeWidth * this.scaleY) / 2;
y = center.y + (this.getHeight() + this.strokeWidth * this.scaleY) / 2;
}
// Apply the rotation to the point (it's already scaled properly)
@ -102,25 +100,24 @@
*/
toLocalPoint: function(point, originX, originY) {
var center = this.getCenterPoint(),
strokeWidth = this.stroke ? this.strokeWidth : 0,
x, y;
if (originX && originY) {
if (originX === 'left') {
x = center.x - (this.getWidth() + strokeWidth * this.scaleX) / 2;
x = center.x - (this.getWidth() + this.strokeWidth * this.scaleX) / 2;
}
else if (originX === 'right') {
x = center.x + (this.getWidth() + strokeWidth * this.scaleX) / 2;
x = center.x + (this.getWidth() + this.strokeWidth * this.scaleX) / 2;
}
else {
x = center.x;
}
if (originY === 'top') {
y = center.y - (this.getHeight() + strokeWidth * this.scaleY) / 2;
y = center.y - (this.getHeight() + this.strokeWidth * this.scaleY) / 2;
}
else if (originY === 'bottom') {
y = center.y + (this.getHeight() + strokeWidth * this.scaleY) / 2;
y = center.y + (this.getHeight() + this.strokeWidth * this.scaleY) / 2;
}
else {
y = center.y;

7
src/shapes/group.class.js
View file

@ -41,6 +41,13 @@
*/
type: 'group',
/**
* Width of stroke
* @type Number
* @default
*/
strokeWidth: 0,
/**
* Constructor
* @param {Object} objects Group objects

1
test/unit/group.js
View file

@ -201,7 +201,6 @@ test('toObject without default values', function() {
'top': 100,
'width': 80,
'height': 60,
'strokeWidth': 0,
'objects': clone.objects
};

22
test/unit/object.js
View file

@ -368,29 +368,29 @@ test('getBoundingRectWithStroke', function() {
cObj.setCoords();
boundingRect = cObj.getBoundingRect();
equal(boundingRect.left.toFixed(2), -0.5);
equal(boundingRect.top.toFixed(2), -0.5);
equal(boundingRect.left.toFixed(2), 0);
equal(boundingRect.top.toFixed(2), 0);
equal(boundingRect.width.toFixed(2), 1);
equal(boundingRect.height.toFixed(2), 1);
cObj.set('width', 123).setCoords();
boundingRect = cObj.getBoundingRect();
equal(boundingRect.left.toFixed(2), -0.5);
equal(boundingRect.top.toFixed(2), -0.5);
equal(boundingRect.left.toFixed(2), 0);
equal(boundingRect.top.toFixed(2), 0);
equal(boundingRect.width.toFixed(2), 124);
equal(boundingRect.height.toFixed(2), 1);
cObj.set('height', 167).setCoords();
boundingRect = cObj.getBoundingRect();
equal(boundingRect.left.toFixed(2), -0.5);
equal(boundingRect.top.toFixed(2), -0.5);
equal(boundingRect.left.toFixed(2), 0);
equal(boundingRect.top.toFixed(2), 0);
equal(boundingRect.width.toFixed(2), 124);
equal(boundingRect.height.toFixed(2), 168);
cObj.scale(2).setCoords();
boundingRect = cObj.getBoundingRect();
equal(boundingRect.left.toFixed(2), -1);
equal(boundingRect.top.toFixed(2), -1);
equal(boundingRect.left.toFixed(2), 0);
equal(boundingRect.top.toFixed(2), 0);
equal(boundingRect.width.toFixed(2), 248);
equal(boundingRect.height.toFixed(2), 336);
});
@ -951,7 +951,7 @@ test('toDataURL & reference to canvas', function() {
test('center', function() {
var object = new fabric.Object();
object.strokeWidth = 0;
ok(typeof object.center == 'function');
canvas.add(object);
@ -963,7 +963,7 @@ test('toDataURL & reference to canvas', function() {
test('centerH', function() {
var object = new fabric.Object();
object.strokeWidth = 0;
ok(typeof object.centerH == 'function');
canvas.add(object);
@ -974,7 +974,7 @@ test('toDataURL & reference to canvas', function() {
test('centerV', function() {
var object = new fabric.Object();
object.strokeWidth = 0;
ok(typeof object.centerV == 'function');
canvas.add(object);

3
test/unit/path_group.js
View file

@ -243,13 +243,14 @@
ok(fabric.PathGroup);
getPathGroupObject(function(pathGroup) {
ok(typeof pathGroup.toSVG == 'function');
pathGroup.strokeWidth = 0;
pathGroup.originX = 'center';
pathGroup.originY = 'center';
pathGroup.width = 700;
pathGroup.height = 600;
pathGroup.left = 350;
pathGroup.top = 300;
equal(pathGroup.toSVG(), REFERENCE_PATH_GROUP_SVG);
equal(pathGroup.toSVG(), REFERENCE_PATH_GROUP_SVG.replace('stroke-width: 1', 'stroke-width: 0'));
start();
});
});

4
test/unit/rect.js
View file

@ -131,10 +131,10 @@
});
test('toSVG with rounded corners', function() {
var rect = new fabric.Rect({ width: 100, height: 100, rx: 20, ry: 30 });
var rect = new fabric.Rect({ width: 100, height: 100, rx: 20, ry: 30, strokeWidth: 0 });
var svg = rect.toSVG();
equal(svg, '<rect x="-50" y="-50" rx="20" ry="30" width="100" height="100" style="stroke: none; stroke-width: 1; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform="translate(50 50)"/>\n');
equal(svg, '<rect x="-50" y="-50" rx="20" ry="30" width="100" height="100" style="stroke: none; stroke-width: 0; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform="translate(50 50)"/>\n');
});
test('toObject without default values', function() {

2
test/unit/text.js
View file

@ -46,7 +46,7 @@
'globalCompositeOperation': 'source-over'
};
var TEXT_SVG = '\t<g transform="translate(10 26.22)">\n\t\t<text font-family="Times New Roman" font-size="40" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" ><tspan x="-10" y="8.98" fill="rgb(0,0,0)">x</tspan></text>\n\t</g>\n';
var TEXT_SVG = '\t<g transform="translate(10.5 26.72)">\n\t\t<text font-family="Times New Roman" font-size="40" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" ><tspan x="-10" y="8.98" fill="rgb(0,0,0)">x</tspan></text>\n\t</g>\n';
test('constructor', function() {
ok(fabric.Text);