Skip to content

Commit b35296e

Browse files
lehnilehni
committed
Improve Shape.Ellipse to support center & radius parameters, and update documentation.
1 parent b325aeb commit b35296e

1 file changed

Lines changed: 192 additions & 139 deletions

File tree

‎src/item/Shape.js‎

Lines changed: 192 additions & 139 deletions
Original file line numberDiff line numberDiff line change
@@ -104,8 +104,9 @@ var Shape = Item.extend(/** @lends Shape# */{
104104
_draw: function(ctx, param) {
105105
var style = this._style,
106106
fillColor = style.getFillColor(),
107-
strokeColor = style.getStrokeColor();
108-
if (fillColor || strokeColor || param.clip) {
107+
strokeColor = style.getStrokeColor(),
108+
clip = param.clip;
109+
if (fillColor || strokeColor || clip) {
109110
var radius = this._radius,
110111
type = this._type;
111112
ctx.beginPath();
@@ -150,8 +151,9 @@ var Shape = Item.extend(/** @lends Shape# */{
150151
}
151152
}
152153
}
154+
ctx.closePath();
153155
}
154-
if (!param.clip && (fillColor || strokeColor)) {
156+
if (!clip && (fillColor || strokeColor)) {
155157
this._setStyles(ctx);
156158
if (fillColor)
157159
ctx.fill();
@@ -218,143 +220,194 @@ var Shape = Item.extend(/** @lends Shape# */{
218220
return _hitTest.base.apply(this, arguments);
219221
},
220222

221-
statics: new function() {
222-
function createShape(type, point, size, radius, args) {
223-
return new Shape(type, point, size, radius, Base.getNamed(args));
224-
}
223+
// Mess with indentation in order to get more line-space below:
224+
statics: new function() {
225+
function createShape(type, point, size, radius, args) {
226+
return new Shape(type, point, size, radius, Base.getNamed(args));
227+
}
225228

226-
return /** @lends Shape */{
227-
/**
228-
* Creates a circular Shape item.
229-
*
230-
* @param {Point} center the center point of the circle
231-
* @param {Number} radius the radius of the circle
232-
* @return {Shape} the newly created shape
233-
*
234-
* @example {@paperscript}
235-
* var shape = new Shape.Circle(new Point(80, 50), 30);
236-
* shape.strokeColor = 'black';
237-
*
238-
* @example {@paperscript} // Using object notation
239-
* var shape = new Shape.Circle({
240-
* center: [80, 50],
241-
* radius: 30,
242-
* strokeColor: 'black'
243-
* });
244-
*/
245-
Circle: function(/* center, radius */) {
246-
var center = Point.readNamed(arguments, 'center'),
247-
radius = Base.readNamed(arguments, 'radius');
248-
return createShape('circle', center, new Size(radius * 2),
249-
radius, arguments);
250-
},
229+
return /** @lends Shape */{
230+
/**
231+
* Creates a circular shape item.
232+
*
233+
* @name Shape.Circle
234+
* @param {Point} center the center point of the circle
235+
* @param {Number} radius the radius of the circle
236+
* @return {Shape} the newly created shape
237+
*
238+
* @example {@paperscript}
239+
* var shape = new Shape.Circle(new Point(80, 50), 30);
240+
* shape.strokeColor = 'black';
241+
*/
242+
/**
243+
* Creates a circular shape item from the properties described by an
244+
* object literal.
245+
*
246+
* @name Shape.Circle
247+
* @param {Object} object an object literal containing properties
248+
* describing the shape's attributes
249+
* @return {Shape} the newly created shape
250+
*
251+
* @example {@paperscript}
252+
* var shape = new Shape.Circle({
253+
* center: [80, 50],
254+
* radius: 30,
255+
* strokeColor: 'black'
256+
* });
257+
*/
258+
Circle: function(/* center, radius */) {
259+
var center = Point.readNamed(arguments, 'center'),
260+
radius = Base.readNamed(arguments, 'radius');
261+
return createShape('circle', center, new Size(radius * 2), radius,
262+
arguments);
263+
},
251264

252-
/**
253-
* Creates a rectangular Shape item from the passed point and size.
254-
*
255-
* @name Shape.Rectangle
256-
* @param {Point} point
257-
* @param {Size} size
258-
* @return {Shape} the newly created shape
259-
*
260-
* @example {@paperscript}
261-
* var point = new Point(20, 20);
262-
* var size = new Size(60, 60);
263-
* var shape = new Shape.Rectangle(point, size);
264-
* shape.strokeColor = 'black';
265-
*
266-
* @example {@paperscript} // Using object notation
267-
* var shape = new Shape.Rectangle({
268-
* point: [20, 20],
269-
* size: [60, 60],
270-
* strokeColor: 'black'
271-
* });
272-
*/
273-
/**
274-
* Creates a rectanglular Shape item from the passed points. These
275-
* do not necessarily need to be the top left and bottom right
276-
* corners, the constructor figures out how to fit a rectangle
277-
* between them.
278-
*
279-
* @name Shape.Rectangle
280-
* @param {Point} from The first point defining the rectangle
281-
* @param {Point} to The second point defining the rectangle
282-
* @return {Shape} the newly created shape
283-
*
284-
* @example {@paperscript}
285-
* var from = new Point(20, 20);
286-
* var to = new Point(80, 80);
287-
* var shape = new Shape.Rectangle(from, to);
288-
* shape.strokeColor = 'black';
289-
*
290-
* @example {@paperscript} // Using object notation
291-
* var shape = new Shape.Rectangle({
292-
* from: [20, 20],
293-
* to: [80, 80],
294-
* strokeColor: 'black'
295-
* });
296-
*/
297-
/**
298-
* Creates a rectangular Shape item from the passed abstract
299-
* {@link Rectangle}.
300-
*
301-
* @name Shape.Rectangle
302-
* @param {Rectangle} rectangle
303-
* @return {Shape} the newly created shape
304-
*
305-
* @example {@paperscript}
306-
* var rectangle = new Rectangle({
307-
* point: new Point(20, 20),
308-
* size: new Size(60, 60)
309-
* });
310-
* var shape = new Shape.Rectangle(rectangle);
311-
* shape.strokeColor = 'black';
312-
*
313-
* @example {@paperscript}
314-
* var rectangle = new Rectangle({
315-
* point: [20, 20],
316-
* size: [60, 60]
317-
* });
318-
*
319-
* var shape = new Shape.Rectangle({
320-
* rectangle: rectangle,
321-
* strokeColor: 'black'
322-
* });
323-
*/
324-
Rectangle: function(/* rectangle */) {
325-
var rect = Rectangle.readNamed(arguments, 'rectangle');
326-
return createShape('rect', rect.getCenter(true),
327-
rect.getSize(true), Size.readNamed(arguments, 'radius'),
328-
arguments);
329-
},
265+
/**
266+
* Creates a rectangular shape item, with optionally rounded corners.
267+
*
268+
* @name Shape.Rectangle
269+
* @param {Rectangle} rectangle the rectangle object describing the
270+
* geometry of the rectangular shape to be created.
271+
* @param {Size} [radius=null] the size of the rounded corners
272+
* @return {Shape} the newly created shape
273+
*
274+
* @example {@paperscript}
275+
* var rectangle = new Rectangle(new Point(20, 20), new Size(60, 60));
276+
* var shape = new Shape.Rectangle(rectangle);
277+
* shape.strokeColor = 'black';
278+
*
279+
* @example {@paperscript} // The same, with rounder corners
280+
* var rectangle = new Rectangle(new Point(20, 20), new Size(60, 60));
281+
* var cornerSize = new Size(10, 10);
282+
* var shape = new Shape.Rectangle(rectangle, cornerSize);
283+
* shape.strokeColor = 'black';
284+
*/
285+
/**
286+
* Creates a rectangular shape item from a point and a size object.
287+
*
288+
* @name Shape.Rectangle
289+
* @param {Point} point the rectangle's top-left corner.
290+
* @param {Size} size the rectangle's size.
291+
* @return {Shape} the newly created shape
292+
*
293+
* @example {@paperscript}
294+
* var point = new Point(20, 20);
295+
* var size = new Size(60, 60);
296+
* var shape = new Shape.Rectangle(point, size);
297+
* shape.strokeColor = 'black';
298+
*/
299+
/**
300+
* Creates a rectangular shape item from the passed points. These do not
301+
* necessarily need to be the top left and bottom right corners, the
302+
* constructor figures out how to fit a rectangle between them.
303+
*
304+
* @name Shape.Rectangle
305+
* @param {Point} from the first point defining the rectangle
306+
* @param {Point} to the second point defining the rectangle
307+
* @return {Shape} the newly created shape
308+
*
309+
* @example {@paperscript}
310+
* var from = new Point(20, 20);
311+
* var to = new Point(80, 80);
312+
* var shape = new Shape.Rectangle(from, to);
313+
* shape.strokeColor = 'black';
314+
*/
315+
/**
316+
* Creates a rectangular shape item from the properties described by an
317+
* object literal.
318+
*
319+
* @name Shape.Rectangle
320+
* @param {Object} object an object literal containing properties
321+
* describing the shape's attributes
322+
* @return {Shape} the newly created shape
323+
*
324+
* @example {@paperscript}
325+
* var shape = new Shape.Rectangle({
326+
* point: [20, 20],
327+
* size: [60, 60],
328+
* strokeColor: 'black'
329+
* });
330+
*
331+
* @example {@paperscript}
332+
* var shape = new Shape.Rectangle({
333+
* from: [20, 20],
334+
* to: [80, 80],
335+
* strokeColor: 'black'
336+
* });
337+
*
338+
* @example {@paperscript}
339+
* var shape = new Shape.Rectangle({
340+
* rectangle: {
341+
* topLeft: [20, 20],
342+
* bottomRight: [80, 80]
343+
* },
344+
* strokeColor: 'black'
345+
* });
346+
*
347+
* @example {@paperscript}
348+
* var shape = new Shape.Rectangle({
349+
* topLeft: [20, 20],
350+
* bottomRight: [80, 80],
351+
* radius: 10,
352+
* strokeColor: 'black'
353+
* });
354+
*/
355+
Rectangle: function(/* rectangle */) {
356+
var rect = Rectangle.readNamed(arguments, 'rectangle');
357+
return createShape('rect', rect.getCenter(true), rect.getSize(true),
358+
Size.readNamed(arguments, 'radius'), arguments);
359+
},
330360

331-
/**
332-
* Creates an elliptic Shape item.
333-
*
334-
* @param {Rectangle} rectangle
335-
* @return {Shape} the newly created shape
336-
*
337-
* @example {@paperscript}
338-
* var rectangle = new Rectangle({
339-
* point: [20, 20],
340-
* size: [180, 60]
341-
* });
342-
* var shape = new Shape.Ellipse(rectangle);
343-
* shape.fillColor = 'black';
344-
*
345-
* @example {@paperscript} // Using object notation
346-
* var shape = new Shape.Ellipse({
347-
* point: [20, 20],
348-
* size: [180, 60],
349-
* fillColor: 'black'
350-
* });
351-
*/
352-
Ellipse: function(/* rectangle */) {
353-
var rect = Rectangle.readNamed(arguments, 'rectangle'),
354-
size = rect.getSize(true);
355-
return createShape('ellipse', rect.getCenter(true), size,
356-
new Size(size.width / 2, size.height / 2), arguments);
361+
/**
362+
* Creates an elliptical shape item.
363+
*
364+
* @name Shape.Ellipse
365+
* @param {Rectangle} rectangle the rectangle circumscribing the ellipse
366+
* @return {Shape} the newly created shape
367+
*
368+
* @example {@paperscript}
369+
* var rectangle = new Rectangle(new Point(20, 20), new Size(180, 60));
370+
* var shape = new Shape.Ellipse(rectangle);
371+
* shape.fillColor = 'black';
372+
*/
373+
/**
374+
* Creates an elliptical shape item from the properties described by an
375+
* object literal.
376+
*
377+
* @name Shape.Ellipse
378+
* @param {Object} object an object literal containing properties
379+
* describing the shape's attributes
380+
* @return {Shape} the newly created shape
381+
*
382+
* @example {@paperscript}
383+
* var shape = new Shape.Ellipse({
384+
* point: [20, 20],
385+
* size: [180, 60],
386+
* fillColor: 'black'
387+
* });
388+
*
389+
* @example {@paperscript} // Placing by center and radius
390+
* var shape = new Shape.Ellipse({
391+
* center: [110, 50],
392+
* radius: [90, 30],
393+
* fillColor: 'black'
394+
* });
395+
*/
396+
Ellipse: function(/* rectangle */) {
397+
var center,
398+
size,
399+
radius;
400+
if (Base.hasNamed(arguments, 'center')) {
401+
center = Point.readNamed(arguments, 'center');
402+
radius = Size.readNamed(arguments, 'radius');
403+
size = radius.multiply(2);
404+
} else {
405+
var rect = Rectangle.readNamed(arguments, 'rectangle');
406+
center = rect.getCenter(true);
407+
size = rect.getSize(true);
408+
radius = size.divide(2);
357409
}
358-
};
359-
}
360-
});
410+
return createShape('ellipse', center, size, radius, arguments);
411+
}
412+
};
413+
}});

0 commit comments

Comments
 (0)