2011-03-07 00:50:44 +00:00
|
|
|
/*
|
2013-01-28 18:03:27 -08:00
|
|
|
* Paper.js - The Swiss Army Knife of Vector Graphics Scripting.
|
2011-03-08 01:41:50 +00:00
|
|
|
* http://paperjs.org/
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2013-01-28 18:03:27 -08:00
|
|
|
* Copyright (c) 2011 - 2013, Juerg Lehni & Jonathan Puckey
|
2011-03-07 00:50:44 +00:00
|
|
|
* http://lehni.org/ & http://jonathanpuckey.com/
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2011-07-01 12:17:45 +02:00
|
|
|
* Distributed under the MIT license. See LICENSE file for details.
|
|
|
|
*
|
2011-03-08 01:41:50 +00:00
|
|
|
* All rights reserved.
|
2011-03-07 00:50:44 +00:00
|
|
|
*/
|
|
|
|
|
2011-06-22 23:56:05 +01:00
|
|
|
/**
|
|
|
|
* @name CompoundPath
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2011-06-22 23:56:05 +01:00
|
|
|
* @class A compound path contains two or more paths, holes are drawn
|
|
|
|
* where the paths overlap. All the paths in a compound path take on the
|
|
|
|
* style of the backmost path and can be accessed through its
|
|
|
|
* {@link Item#children} list.
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2011-06-22 23:56:05 +01:00
|
|
|
* @extends PathItem
|
|
|
|
*/
|
2013-05-27 12:48:58 -07:00
|
|
|
var CompoundPath = PathItem.extend(/** @lends CompoundPath# */{
|
2013-06-23 20:18:32 -07:00
|
|
|
_class: 'CompoundPath',
|
2013-02-28 19:41:13 -08:00
|
|
|
_serializeFields: {
|
2013-06-11 15:27:04 -07:00
|
|
|
children: []
|
2013-02-28 19:41:13 -08:00
|
|
|
},
|
|
|
|
|
2011-05-23 01:49:01 +02:00
|
|
|
/**
|
|
|
|
* Creates a new compound path item and places it in the active layer.
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2011-06-20 14:27:54 +01:00
|
|
|
* @param {Path[]} [paths] the paths to place within the compound path.
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2011-06-04 15:32:28 +02:00
|
|
|
* @example {@paperscript}
|
|
|
|
* // Create a circle shaped path with a hole in it:
|
2013-03-03 20:10:25 +01:00
|
|
|
* var circle = new Path.Circle({
|
|
|
|
* center: new Point(50, 50),
|
|
|
|
* radius: 30
|
|
|
|
* });
|
|
|
|
*
|
|
|
|
* var innerCircle = new Path.Circle({
|
|
|
|
* center: new Point(50, 50),
|
|
|
|
* radius: 10
|
|
|
|
* });
|
|
|
|
*
|
2011-05-30 19:42:17 +02:00
|
|
|
* var compoundPath = new CompoundPath([circle, innerCircle]);
|
|
|
|
* compoundPath.fillColor = 'red';
|
2013-03-03 20:10:25 +01:00
|
|
|
*
|
2011-05-30 19:42:17 +02:00
|
|
|
* // Move the inner circle 5pt to the right:
|
|
|
|
* compoundPath.children[1].position.x += 5;
|
2011-05-23 01:49:01 +02:00
|
|
|
*/
|
2013-05-27 12:48:58 -07:00
|
|
|
initialize: function CompoundPath(arg) {
|
2013-01-20 15:20:10 -08:00
|
|
|
// CompoundPath has children and supports named children.
|
2011-05-14 18:07:10 +01:00
|
|
|
this._children = [];
|
2011-06-17 14:11:37 +01:00
|
|
|
this._namedChildren = {};
|
2013-07-21 15:45:22 -07:00
|
|
|
if (!this._initialize(arg))
|
2013-01-20 15:20:10 -08:00
|
|
|
this.addChildren(Array.isArray(arg) ? arg : arguments);
|
2011-07-27 20:30:39 +02:00
|
|
|
},
|
|
|
|
|
2013-05-27 20:06:30 -07:00
|
|
|
insertChildren: function insertChildren(index, items, _preserve) {
|
|
|
|
// Pass on 'path' for _type, to make sure that only paths are added as
|
|
|
|
// children.
|
|
|
|
items = insertChildren.base.call(this, index, items, _preserve, 'path');
|
2011-07-27 20:30:39 +02:00
|
|
|
// All children except for the bottom one (first one in list) are set
|
|
|
|
// to anti-clockwise orientation, so that they appear as holes, but
|
|
|
|
// only if their orientation was not already specified before
|
|
|
|
// (= _clockwise is defined).
|
2013-05-27 20:06:30 -07:00
|
|
|
for (var i = 0, l = !_preserve && items && items.length; i < l; i++) {
|
|
|
|
var item = items[i];
|
|
|
|
if (item._clockwise === undefined)
|
|
|
|
item.setClockwise(item._index === 0);
|
|
|
|
}
|
|
|
|
return items;
|
2011-03-03 12:23:46 +00:00
|
|
|
},
|
2011-03-03 22:45:17 +00:00
|
|
|
|
2013-05-03 21:41:22 -07:00
|
|
|
/**
|
|
|
|
* Reverses the orientation of all nested paths.
|
|
|
|
*/
|
|
|
|
reverse: function() {
|
|
|
|
var children = this._children;
|
|
|
|
for (var i = 0, l = children.length; i < l; i++)
|
|
|
|
children[i].reverse();
|
|
|
|
},
|
|
|
|
|
2011-03-03 12:23:46 +00:00
|
|
|
smooth: function() {
|
2011-05-14 18:07:10 +01:00
|
|
|
for (var i = 0, l = this._children.length; i < l; i++)
|
|
|
|
this._children[i].smooth();
|
2011-03-03 12:23:46 +00:00
|
|
|
},
|
|
|
|
|
2013-05-03 21:41:22 -07:00
|
|
|
/**
|
|
|
|
* Specifies whether the compound path is oriented clock-wise.
|
|
|
|
*
|
|
|
|
* @type Boolean
|
|
|
|
* @bean
|
|
|
|
*/
|
|
|
|
isClockwise: function() {
|
|
|
|
var child = this.getFirstChild();
|
|
|
|
return child && child.isClockwise();
|
|
|
|
},
|
|
|
|
|
|
|
|
setClockwise: function(clockwise) {
|
|
|
|
if (this.isClockwise() != !!clockwise)
|
|
|
|
this.reverse();
|
|
|
|
},
|
|
|
|
|
2013-02-15 18:05:16 -08:00
|
|
|
/**
|
|
|
|
* The first Segment contained within the path.
|
|
|
|
*
|
|
|
|
* @type Segment
|
|
|
|
* @bean
|
|
|
|
*/
|
|
|
|
getFirstSegment: function() {
|
|
|
|
var first = this.getFirstChild();
|
|
|
|
return first && first.getFirstSegment();
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* The last Segment contained within the path.
|
|
|
|
*
|
|
|
|
* @type Segment
|
|
|
|
* @bean
|
|
|
|
*/
|
|
|
|
getLastSegment: function() {
|
|
|
|
var last = this.getLastChild();
|
|
|
|
return last && last.getLastSegment();
|
|
|
|
},
|
|
|
|
|
2012-12-18 14:53:38 +01:00
|
|
|
/**
|
|
|
|
* All the curves contained within the compound-path, from all its child
|
|
|
|
* {@link Path} items.
|
|
|
|
*
|
|
|
|
* @type Curve[]
|
|
|
|
* @bean
|
|
|
|
*/
|
|
|
|
getCurves: function() {
|
2013-02-28 19:13:46 -08:00
|
|
|
var children = this._children,
|
|
|
|
curves = [];
|
|
|
|
for (var i = 0, l = children.length; i < l; i++)
|
|
|
|
curves = curves.concat(children[i].getCurves());
|
2012-12-18 14:53:38 +01:00
|
|
|
return curves;
|
|
|
|
},
|
|
|
|
|
2013-02-15 18:05:16 -08:00
|
|
|
/**
|
|
|
|
* The first Curve contained within the path.
|
|
|
|
*
|
|
|
|
* @type Curve
|
|
|
|
* @bean
|
|
|
|
*/
|
|
|
|
getFirstCurve: function() {
|
|
|
|
var first = this.getFirstChild();
|
|
|
|
return first && first.getFirstCurve();
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* The last Curve contained within the path.
|
|
|
|
*
|
|
|
|
* @type Curve
|
|
|
|
* @bean
|
|
|
|
*/
|
|
|
|
getLastCurve: function() {
|
|
|
|
var last = this.getLastChild();
|
|
|
|
return last && last.getFirstCurve();
|
|
|
|
},
|
|
|
|
|
2013-04-25 17:37:19 -07:00
|
|
|
/**
|
|
|
|
* The area of the path in square points. Self-intersecting paths can
|
|
|
|
* contain sub-areas that cancel each other out.
|
|
|
|
*
|
|
|
|
* @type Number
|
|
|
|
* @bean
|
|
|
|
*/
|
|
|
|
getArea: function() {
|
|
|
|
var children = this._children,
|
|
|
|
area = 0;
|
|
|
|
for (var i = 0, l = children.length; i < l; i++)
|
|
|
|
area += children[i].getArea();
|
|
|
|
return area;
|
|
|
|
},
|
|
|
|
|
2013-02-28 19:13:46 -08:00
|
|
|
getPathData: function(/* precision */) {
|
|
|
|
var children = this._children,
|
|
|
|
paths = [];
|
|
|
|
for (var i = 0, l = children.length; i < l; i++)
|
|
|
|
paths.push(children[i].getPathData(arguments[0]));
|
|
|
|
return paths.join(' ');
|
|
|
|
},
|
|
|
|
|
2013-10-29 17:57:25 +01:00
|
|
|
_getWinding: function(point) {
|
2013-10-18 15:40:41 +02:00
|
|
|
var children = this._children,
|
|
|
|
winding = 0;
|
|
|
|
for (var i = 0, l = children.length; i < l; i++)
|
|
|
|
winding += children[i]._getWinding(point);
|
2013-10-29 17:57:25 +01:00
|
|
|
return winding;
|
2013-02-24 19:01:29 -08:00
|
|
|
},
|
|
|
|
|
2013-10-20 01:54:20 +02:00
|
|
|
_hitTest : function _hitTest(point, options) {
|
2013-10-18 19:49:05 +02:00
|
|
|
// Do not test children for fill, since a compound path forms one shape.
|
|
|
|
// options.compoundChildren allows to specifically do so, see below.
|
2013-05-27 10:04:05 -07:00
|
|
|
var res = _hitTest.base.call(this, point,
|
|
|
|
Base.merge(options, { fill: false }));
|
2013-10-20 01:54:20 +02:00
|
|
|
if (!res) {
|
2013-10-20 01:54:53 +02:00
|
|
|
// If asked to query all children seperately, perform the same loop
|
|
|
|
// as Item#hitTest() now on the compound children.
|
2013-10-20 01:54:20 +02:00
|
|
|
if (options.compoundChildren) {
|
|
|
|
var children = this._children;
|
|
|
|
for (var i = children.length - 1; i >= 0 && !res; i--)
|
|
|
|
res = children[i]._hitTest(point, options);
|
|
|
|
} else if (options.fill && this.hasFill()
|
|
|
|
&& this._contains(point)) {
|
|
|
|
res = new HitResult('fill', this);
|
|
|
|
}
|
|
|
|
}
|
2013-02-24 19:01:29 -08:00
|
|
|
return res;
|
2012-10-22 18:48:51 -04:00
|
|
|
},
|
|
|
|
|
2013-04-18 16:58:35 -07:00
|
|
|
_draw: function(ctx, param) {
|
2013-10-29 17:57:25 +01:00
|
|
|
var children = this._children;
|
2011-07-25 21:41:09 +02:00
|
|
|
// Return early if the compound path doesn't have any children:
|
2013-04-09 19:12:47 -07:00
|
|
|
if (children.length === 0)
|
2011-07-25 21:41:09 +02:00
|
|
|
return;
|
2011-03-03 12:23:46 +00:00
|
|
|
ctx.beginPath();
|
2013-06-11 20:40:44 -07:00
|
|
|
param = param.extend({ compound: true });
|
2011-12-19 22:40:14 +01:00
|
|
|
for (var i = 0, l = children.length; i < l; i++)
|
2013-04-18 17:04:06 -07:00
|
|
|
children[i].draw(ctx, param);
|
2013-04-09 19:08:41 -07:00
|
|
|
if (!param.clip) {
|
2012-11-06 20:14:21 -08:00
|
|
|
this._setStyles(ctx);
|
2013-10-29 17:57:25 +01:00
|
|
|
var style = this._style;
|
2013-10-30 00:00:04 +01:00
|
|
|
if (style.hasFill()) {
|
2013-10-18 14:54:13 +02:00
|
|
|
ctx.fill(style.getWindingRule());
|
2013-10-30 00:00:04 +01:00
|
|
|
ctx.shadowColor = 'rgba(0,0,0,0)';
|
|
|
|
}
|
2013-10-29 20:05:39 +01:00
|
|
|
if (style.hasStroke())
|
2012-11-06 20:14:21 -08:00
|
|
|
ctx.stroke();
|
|
|
|
}
|
2011-03-03 12:23:46 +00:00
|
|
|
}
|
2011-05-07 17:11:06 +01:00
|
|
|
}, new function() { // Injection scope for PostScript-like drawing functions
|
2011-06-16 22:07:00 +01:00
|
|
|
/**
|
|
|
|
* Helper method that returns the current path and checks if a moveTo()
|
|
|
|
* command is required first.
|
|
|
|
*/
|
2011-03-03 12:25:41 +00:00
|
|
|
function getCurrentPath(that) {
|
2011-05-15 19:31:25 +01:00
|
|
|
if (!that._children.length)
|
2011-03-03 17:29:40 +00:00
|
|
|
throw new Error('Use a moveTo() command first');
|
2011-05-15 19:31:25 +01:00
|
|
|
return that._children[that._children.length - 1];
|
2011-02-17 14:33:25 +01:00
|
|
|
}
|
2011-02-17 22:58:56 +00:00
|
|
|
|
2011-03-03 12:23:46 +00:00
|
|
|
var fields = {
|
2011-06-16 22:07:00 +01:00
|
|
|
// Note: Documentation for these methods is found in PathItem, as they
|
|
|
|
// are considered abstract methods of PathItem and need to be defined in
|
|
|
|
// all implementing classes.
|
2013-06-24 10:15:54 -07:00
|
|
|
moveTo: function(/* point */) {
|
2011-05-07 17:11:06 +01:00
|
|
|
var path = new Path();
|
2011-06-17 16:58:22 +02:00
|
|
|
this.addChild(path);
|
2011-05-07 17:11:06 +01:00
|
|
|
path.moveTo.apply(path, arguments);
|
|
|
|
},
|
|
|
|
|
2013-06-24 10:15:54 -07:00
|
|
|
moveBy: function(/* point */) {
|
2011-05-15 19:58:09 +01:00
|
|
|
this.moveTo(getCurrentPath(this).getLastSegment()._point.add(
|
|
|
|
Point.read(arguments)));
|
2011-02-17 23:01:18 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
closePath: function() {
|
2013-03-19 18:47:18 -07:00
|
|
|
getCurrentPath(this).closePath();
|
2011-02-17 13:36:40 +01:00
|
|
|
}
|
2011-02-17 22:58:56 +00:00
|
|
|
};
|
2011-02-17 23:01:18 +00:00
|
|
|
|
2011-05-07 17:11:06 +01:00
|
|
|
// Redirect all other drawing commands to the current path
|
2013-10-30 01:43:55 +01:00
|
|
|
Base.each(['lineTo', 'cubicCurveTo', 'quadraticCurveTo', 'curveTo', 'arcTo',
|
|
|
|
'lineBy', 'cubicCurveBy', 'quadraticCurveBy', 'curveBy', 'arcBy'],
|
|
|
|
function(key) {
|
|
|
|
fields[key] = function() {
|
|
|
|
var path = getCurrentPath(this);
|
|
|
|
path[key].apply(path, arguments);
|
|
|
|
};
|
|
|
|
}
|
|
|
|
);
|
2011-02-17 13:36:40 +01:00
|
|
|
|
2011-02-17 22:58:56 +00:00
|
|
|
return fields;
|
2011-03-03 12:19:43 +00:00
|
|
|
});
|