lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 06:24:42 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

added rounded corners to Rect

Browse Source
This commit is contained in:
Lewis Peckover 2012-04-19 23:27:04 +01:00
parent 78e4022126
commit d3eac4d5f9
1 changed files with 31 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/shapes/Rect.js
View File

@ -14,6 +14,7 @@ Kinetic.Rect = function(config) {
} }
this.attrs.width = 0; this.attrs.width = 0;
this.attrs.height = 0; this.attrs.height = 0;
this.attrs.cornerRadius = 0;
this.shapeType = "Rect"; this.shapeType = "Rect";
@ -21,7 +22,22 @@ Kinetic.Rect = function(config) {
var context = this.getContext(); var context = this.getContext();
context.beginPath(); context.beginPath();
this.applyLineJoin(); this.applyLineJoin();
context.rect(0, 0, this.attrs.width, this.attrs.height); if (this.attrs.cornerRadius === 0) {
// simple rect - don't bother doing all that complicated maths stuff.
context.rect(0, 0, this.attrs.width, this.attrs.height);
}
else {
// arcTo would be nicer, but browser support is patchy (Opera)
context.moveTo(this.attrs.cornerRadius, 0);
context.lineTo(this.attrs.width - this.attrs.cornerRadius, 0);
context.arc(this.attrs.width - this.attrs.cornerRadius, this.attrs.cornerRadius, this.attrs.cornerRadius, Math.PI*3/2, 0, false);
context.lineTo(this.attrs.width, this.attrs.height - this.attrs.cornerRadius);
context.arc(this.attrs.width - this.attrs.cornerRadius, this.attrs.height - this.attrs.cornerRadius, this.attrs.cornerRadius, 0, Math.PI/2, false);
context.lineTo(this.attrs.cornerRadius, this.attrs.height);
context.arc(this.attrs.cornerRadius, this.attrs.height - this.attrs.cornerRadius, this.attrs.cornerRadius, Math.PI/2, Math.PI, false);
context.lineTo(0, this.attrs.cornerRadius);
context.arc(this.attrs.cornerRadius, this.attrs.cornerRadius, this.attrs.cornerRadius, Math.PI, Math.PI*3/2, false);
}
context.closePath(); context.closePath();
this.fillStroke(); this.fillStroke();
}; };
@ -75,7 +91,20 @@ Kinetic.Rect.prototype = {
width: this.attrs.width, width: this.attrs.width,
height: this.attrs.height height: this.attrs.height
}; };
} },
/**
* set corner radius
* @param {Number} radius
*/
setCornerRadius: function(radius) {
this.attrs.cornerRadius = radius;
},
/**
* get corner radius
*/
getCornerRadius: function() {
return this.attrs.cornerRadius;
},
}; };
// extend Shape // extend Shape