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

Update circle.class.js

Browse source 
Add option to circle for start and end angle, to draw an ARC.
in radians, not in degree to avoid writing a setter and getter that does the conversion.
Internally is better radians i think.
This commit is contained in:
Andrea Bogazzi 2014-09-18 01:23:52 +02:00
parent d3f091836d
commit 18c7203335
1 changed files with 54 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
src/shapes/circle.class.js
View file

@ -2,8 +2,8 @@
'use strict';
var fabric = global.fabric || (global.fabric = { }),
piBy2 = Math.PI * 2,
var fabric = global.fabric || (global.fabric = { }),
pi = Math.PI,
extend = fabric.util.object.extend;
if (fabric.Circle) {
@ -33,6 +33,21 @@
*/
radius: 0,
/**
* Start angle of the circle, moving clockwise
* @type Number
* @default 0
*/
startAngle: 0,
/**
* End angle of the circle
* @type Number
* @default 2Pi
*/
endAngle: pi * 2,
/**
* Constructor
* @param {Object} [options] Options object
@ -43,6 +58,8 @@
this.callSuper('initialize', options);
this.set('radius', options.radius || 0);
this.startAngle = options.startAngle || this.startAngle;
this.endAngle = options.endAngle || this.endAngle;
},
/**
@ -68,7 +85,9 @@
*/
toObject: function(propertiesToInclude) {
return extend(this.callSuper('toObject', propertiesToInclude), {
radius: this.get('radius')
radius: this.get('radius'),
startAnlge: this.startAngle,
endAngle: this.endAngle
});
},
@ -79,20 +98,40 @@
* @return {String} svg representation of an instance
*/
toSVG: function(reviver) {
var markup = this._createBaseSVGMarkup(), x = 0, y = 0;
if (this.group) {
x = this.left + this.radius;
y = this.top + this.radius;
}
markup.push(
'<circle ',
'cx="' + x + '" cy="' + y + '" ',
'r="', this.radius,
var markup = this._createBaseSVGMarkup(), x = 0, y = 0,
angle = (this.endAngle - this.startAngle) % ( 2 * pi);
if (angle === 0) {
if (this.group && this.group.type === 'path-group') {
x = this.left + this.radius;
y = this.top + this.radius;
}
markup.push(
'<circle ',
'cx="' + x + '" cy="' + y + '" ',
'r="', this.radius,
'" style="', this.getSvgStyles(),
'" transform="', this.getSvgTransform(),
' ', this.getSvgTransformMatrix(),
'"/>\n'
);
} else {
var startX = Math.cos(this.startAngle) * this.radius,
startY = Math.sin(this.startAngle) * this.radius,
endX = Math.cos(this.endAngle) * this.radius,
endY = Math.sin(this.endAngle) * this.radius,
largeFlag = angle > pi ? '1' : '0';
markup.push(
'<path d="M ' + startX + ' ' + startY,
' A ' + this.radius + ' ' + this.radius,
' 0 ', + largeFlag + ' 1', ' ' + endX + ' ' + endY,
'" style="', this.getSvgStyles(),
'" transform="', this.getSvgTransform(),
' ', this.getSvgTransformMatrix(),
'"/>\n'
);
'"/>\n'
);
}
return reviver ? reviver(markup.join('')) : markup.join('');
},
@ -105,7 +144,7 @@
*/
_render: function(ctx, noTransform) {
ctx.beginPath();
ctx.arc(noTransform ? this.left + this.radius : 0, noTransform ? this.top + this.radius : 0, this.radius, 0, piBy2, false);
ctx.arc(noTransform ? this.left + this.radius : 0, noTransform ? this.top + this.radius : 0, this.radius, this.startAngle, this.endAngle, false);
this._renderFill(ctx);
this._renderStroke(ctx);
},