mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-01 02:38:43 -05:00
Remove trailing white spaces and ensure newlines at the end.
This commit is contained in:
parent
91d0fc1534
commit
f002c633a7
52 changed files with 241 additions and 240 deletions
|
@ -38,13 +38,13 @@ var Rectangle = Base.extend(/** @lends Rectangle# */{
|
||||||
* @name Rectangle#initialize
|
* @name Rectangle#initialize
|
||||||
* @param {Object} object an object containing properties to be set on the
|
* @param {Object} object an object containing properties to be set on the
|
||||||
* rectangle.
|
* rectangle.
|
||||||
*
|
*
|
||||||
* @example // Create a rectangle between {x: 20, y: 20} and {x: 80, y:80}
|
* @example // Create a rectangle between {x: 20, y: 20} and {x: 80, y:80}
|
||||||
* var rectangle = new Rectangle({
|
* var rectangle = new Rectangle({
|
||||||
* point: [20, 20],
|
* point: [20, 20],
|
||||||
* size: [60, 60]
|
* size: [60, 60]
|
||||||
* });
|
* });
|
||||||
*
|
*
|
||||||
* @example // Create a rectangle between {x: 20, y: 20} and {x: 80, y:80}
|
* @example // Create a rectangle between {x: 20, y: 20} and {x: 80, y:80}
|
||||||
* var rectangle = new Rectangle({
|
* var rectangle = new Rectangle({
|
||||||
* from: [20, 20],
|
* from: [20, 20],
|
||||||
|
@ -914,7 +914,7 @@ var LinkedRectangle = Rectangle.extend({
|
||||||
if (owner.setSelected) {
|
if (owner.setSelected) {
|
||||||
owner._boundsSelected = selected;
|
owner._boundsSelected = selected;
|
||||||
// Update the owner's selected state too, so the bounds
|
// Update the owner's selected state too, so the bounds
|
||||||
// actually get drawn. When deselecting, take a path's
|
// actually get drawn. When deselecting, take a path's
|
||||||
// _selectedSegmentState into account too, since it will
|
// _selectedSegmentState into account too, since it will
|
||||||
// have to remain selected even when bounds are deselected
|
// have to remain selected even when bounds are deselected
|
||||||
owner.setSelected(selected || owner._selectedSegmentState > 0);
|
owner.setSelected(selected || owner._selectedSegmentState > 0);
|
||||||
|
|
|
@ -111,7 +111,7 @@ var BlendMode = new function() {
|
||||||
},
|
},
|
||||||
|
|
||||||
// if (Cs <= 0.5) B(Cb, Cs) = Multiply(Cb, 2 x Cs)
|
// if (Cs <= 0.5) B(Cb, Cs) = Multiply(Cb, 2 x Cs)
|
||||||
// else B(Cb, Cs) = Screen(Cb, 2 x Cs -1)
|
// else B(Cb, Cs) = Screen(Cb, 2 x Cs -1)
|
||||||
'hard-light': function() {
|
'hard-light': function() {
|
||||||
dr = sr < 128 ? 2 * sr * br / 255 : 255 - 2 * (255 - sr) * (255 - br) / 255;
|
dr = sr < 128 ? 2 * sr * br / 255 : 255 - 2 * (255 - sr) * (255 - br) / 255;
|
||||||
dg = sg < 128 ? 2 * sg * bg / 255 : 255 - 2 * (255 - sg) * (255 - bg) / 255;
|
dg = sg < 128 ? 2 * sg * bg / 255 : 255 - 2 * (255 - sg) * (255 - bg) / 255;
|
||||||
|
@ -249,7 +249,7 @@ var BlendMode = new function() {
|
||||||
}
|
}
|
||||||
} catch (e) {}
|
} catch (e) {}
|
||||||
ctx.restore();
|
ctx.restore();
|
||||||
nativeModes[mode] = ok;
|
nativeModes[mode] = ok;
|
||||||
});
|
});
|
||||||
CanvasProvider.release(ctx);
|
CanvasProvider.release(ctx);
|
||||||
|
|
||||||
|
@ -266,7 +266,7 @@ var BlendMode = new function() {
|
||||||
if (!normal)
|
if (!normal)
|
||||||
dstContext.globalCompositeOperation = mode;
|
dstContext.globalCompositeOperation = mode;
|
||||||
dstContext.drawImage(srcCanvas, offset.x, offset.y);
|
dstContext.drawImage(srcCanvas, offset.x, offset.y);
|
||||||
dstContext.restore();
|
dstContext.restore();
|
||||||
} else {
|
} else {
|
||||||
var process = modes[mode];
|
var process = modes[mode];
|
||||||
if (!process)
|
if (!process)
|
||||||
|
|
|
@ -13,9 +13,9 @@
|
||||||
/**
|
/**
|
||||||
* @name ProxyContext
|
* @name ProxyContext
|
||||||
*
|
*
|
||||||
* @class The ProxyContext is a helper class that helps Canvas debugging
|
* @class The ProxyContext is a helper class that helps Canvas debugging
|
||||||
* by logging all interactions with a 2D Canvas context.
|
* by logging all interactions with a 2D Canvas context.
|
||||||
*
|
*
|
||||||
* @private
|
* @private
|
||||||
*
|
*
|
||||||
* @classexample
|
* @classexample
|
||||||
|
@ -68,7 +68,7 @@ var ProxyContext = new function() {
|
||||||
this._indents--;
|
this._indents--;
|
||||||
console.log(this.getIndentation() + 'ctx.' + name + '('
|
console.log(this.getIndentation() + 'ctx.' + name + '('
|
||||||
+ Array.prototype.slice.call(arguments, 0)
|
+ Array.prototype.slice.call(arguments, 0)
|
||||||
.map(JSON.stringify).join(', ')
|
.map(JSON.stringify).join(', ')
|
||||||
+ ');');
|
+ ');');
|
||||||
if (name === 'save')
|
if (name === 'save')
|
||||||
this._indents++;
|
this._indents++;
|
||||||
|
|
|
@ -30,7 +30,7 @@ var Callback = {
|
||||||
handlers = handlers[type] = handlers[type] || [];
|
handlers = handlers[type] = handlers[type] || [];
|
||||||
if (handlers.indexOf(func) == -1) { // Not added yet, add it now
|
if (handlers.indexOf(func) == -1) { // Not added yet, add it now
|
||||||
handlers.push(func);
|
handlers.push(func);
|
||||||
// See if this is the first handler that we're attaching, and
|
// See if this is the first handler that we're attaching, and
|
||||||
// call install if defined.
|
// call install if defined.
|
||||||
if (entry.install && handlers.length == 1)
|
if (entry.install && handlers.length == 1)
|
||||||
entry.install.call(this, type);
|
entry.install.call(this, type);
|
||||||
|
|
|
@ -92,7 +92,7 @@ var PaperScope = Base.extend(/** @lends PaperScope# */{
|
||||||
*
|
*
|
||||||
* <b>settings.applyMatrix:</b>
|
* <b>settings.applyMatrix:</b>
|
||||||
*
|
*
|
||||||
* <b>settings.handleSize:</b>
|
* <b>settings.handleSize:</b>
|
||||||
*
|
*
|
||||||
* <b>settings.hitTolerance:</b>
|
* <b>settings.hitTolerance:</b>
|
||||||
*
|
*
|
||||||
|
|
|
@ -23,7 +23,7 @@ var PaperScopeItem = Base.extend(Callback, /** @lends PaperScopeItem# */{
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Creates a PaperScopeItem object.
|
* Creates a PaperScopeItem object.
|
||||||
*/
|
*/
|
||||||
initialize: function(activate) {
|
initialize: function(activate) {
|
||||||
// Store reference to the currently active global paper scope:
|
// Store reference to the currently active global paper scope:
|
||||||
this._scope = paper;
|
this._scope = paper;
|
||||||
|
|
|
@ -50,9 +50,9 @@ Base.exports.PaperScript = (function() {
|
||||||
['add', 'subtract', 'multiply', 'divide', 'modulo', 'negate'],
|
['add', 'subtract', 'multiply', 'divide', 'modulo', 'negate'],
|
||||||
function(name) {
|
function(name) {
|
||||||
// Create an alias for each math method to be injected into the
|
// Create an alias for each math method to be injected into the
|
||||||
// classes using Straps.js' #inject()
|
// classes using Straps.js' #inject()
|
||||||
this['__' + name] = '#' + name;
|
this['__' + name] = '#' + name;
|
||||||
},
|
},
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
Point.inject(fields);
|
Point.inject(fields);
|
||||||
|
@ -105,7 +105,7 @@ Base.exports.PaperScript = (function() {
|
||||||
function compile(code) {
|
function compile(code) {
|
||||||
// Use Acorn or Esprima to translate the code into an AST structure
|
// Use Acorn or Esprima to translate the code into an AST structure
|
||||||
// which is then walked and parsed for operators to overload. Instead of
|
// which is then walked and parsed for operators to overload. Instead of
|
||||||
// modifying the AST and translating it back to code, we directly change
|
// modifying the AST and translating it back to code, we directly change
|
||||||
// the source code based on the parser's range information, to preserve
|
// the source code based on the parser's range information, to preserve
|
||||||
// line-numbers in syntax errors and remove the need for Escodegen.
|
// line-numbers in syntax errors and remove the need for Escodegen.
|
||||||
|
|
||||||
|
@ -113,7 +113,7 @@ Base.exports.PaperScript = (function() {
|
||||||
// original offsets.
|
// original offsets.
|
||||||
var insertions = [];
|
var insertions = [];
|
||||||
|
|
||||||
// Converts an original offset to the one in the current state of the
|
// Converts an original offset to the one in the current state of the
|
||||||
// modified code.
|
// modified code.
|
||||||
function getOffset(offset) {
|
function getOffset(offset) {
|
||||||
// Add all insertions before this location together to calculate
|
// Add all insertions before this location together to calculate
|
||||||
|
@ -176,7 +176,7 @@ Base.exports.PaperScript = (function() {
|
||||||
+ arg + ')');
|
+ arg + ')');
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case 'BinaryExpression': // a + b, a - b, a / b, a * b, a == b, ...
|
case 'BinaryExpression': // a + b, a - b, a / b, a * b, a == b, ...
|
||||||
if (node.operator in binaryOperators
|
if (node.operator in binaryOperators
|
||||||
&& node.left.type !== 'Literal') {
|
&& node.left.type !== 'Literal') {
|
||||||
var left = getCode(node.left),
|
var left = getCode(node.left),
|
||||||
|
@ -259,7 +259,7 @@ Base.exports.PaperScript = (function() {
|
||||||
// compile a list of paramter names for all variables that need to
|
// compile a list of paramter names for all variables that need to
|
||||||
// appear as globals inside the script. At the same time, also
|
// appear as globals inside the script. At the same time, also
|
||||||
// collect their values, so we can pass them on as arguments in the
|
// collect their values, so we can pass them on as arguments in the
|
||||||
// function call.
|
// function call.
|
||||||
params = [],
|
params = [],
|
||||||
args = [],
|
args = [],
|
||||||
func;
|
func;
|
||||||
|
@ -430,6 +430,6 @@ Base.exports.PaperScript = (function() {
|
||||||
};
|
};
|
||||||
|
|
||||||
/*#*/ } // !__options.environment == 'browser'
|
/*#*/ } // !__options.environment == 'browser'
|
||||||
// Pass on `this` as the binding object, so we can reference Acorn both in
|
// Pass on `this` as the binding object, so we can reference Acorn both in
|
||||||
// development and in the built library.
|
// development and in the built library.
|
||||||
}).call(this);
|
}).call(this);
|
||||||
|
|
|
@ -149,4 +149,4 @@
|
||||||
* @property
|
* @property
|
||||||
* @type Function
|
* @type Function
|
||||||
*/
|
*/
|
||||||
}
|
}
|
||||||
|
|
|
@ -186,7 +186,7 @@ var DomElement = new function() {
|
||||||
var doc = el.ownerDocument,
|
var doc = el.ownerDocument,
|
||||||
view = doc.defaultView,
|
view = doc.defaultView,
|
||||||
html = doc.documentElement;
|
html = doc.documentElement;
|
||||||
return new Rectangle(0, 0,
|
return new Rectangle(0, 0,
|
||||||
view.innerWidth || html.clientWidth,
|
view.innerWidth || html.clientWidth,
|
||||||
view.innerHeight || html.clientHeight
|
view.innerHeight || html.clientHeight
|
||||||
);
|
);
|
||||||
|
|
|
@ -16,7 +16,7 @@ var ChangeFlag = {
|
||||||
APPEARANCE: 0x1,
|
APPEARANCE: 0x1,
|
||||||
// A change in the item's children
|
// A change in the item's children
|
||||||
CHILDREN: 0x2,
|
CHILDREN: 0x2,
|
||||||
// A change in the item's place in the DOM (removed, inserted, moved).
|
// A change in the item's place in the DOM (removed, inserted, moved).
|
||||||
INSERTION: 0x4,
|
INSERTION: 0x4,
|
||||||
// Item geometry (path, bounds)
|
// Item geometry (path, bounds)
|
||||||
GEOMETRY: 0x8,
|
GEOMETRY: 0x8,
|
||||||
|
|
|
@ -79,7 +79,7 @@ var Group = Item.extend(/** @lends Group# */{
|
||||||
* @example {@paperscript}
|
* @example {@paperscript}
|
||||||
* var path = new Path([100, 100], [100, 200]);
|
* var path = new Path([100, 100], [100, 200]);
|
||||||
* var path2 = new Path([50, 150], [150, 150]);
|
* var path2 = new Path([50, 150], [150, 150]);
|
||||||
*
|
*
|
||||||
* // Create a group from the two paths:
|
* // Create a group from the two paths:
|
||||||
* var group = new Group({
|
* var group = new Group({
|
||||||
* children: [path, path2],
|
* children: [path, path2],
|
||||||
|
@ -106,7 +106,7 @@ var Group = Item.extend(/** @lends Group# */{
|
||||||
},
|
},
|
||||||
|
|
||||||
_getClipItem: function() {
|
_getClipItem: function() {
|
||||||
// NOTE: _clipItem is the child that has _clipMask set to true.
|
// NOTE: _clipItem is the child that has _clipMask set to true.
|
||||||
var clipItem = this._clipItem;
|
var clipItem = this._clipItem;
|
||||||
// Distinguish null (no clipItem set) and undefined (clipItem was not
|
// Distinguish null (no clipItem set) and undefined (clipItem was not
|
||||||
// looked for yet).
|
// looked for yet).
|
||||||
|
@ -131,7 +131,7 @@ var Group = Item.extend(/** @lends Group# */{
|
||||||
*
|
*
|
||||||
* @type Boolean
|
* @type Boolean
|
||||||
* @bean
|
* @bean
|
||||||
*
|
*
|
||||||
* @example {@paperscript}
|
* @example {@paperscript}
|
||||||
* var star = new Path.Star({
|
* var star = new Path.Star({
|
||||||
* center: view.center,
|
* center: view.center,
|
||||||
|
@ -140,17 +140,17 @@ var Group = Item.extend(/** @lends Group# */{
|
||||||
* radius2: 40,
|
* radius2: 40,
|
||||||
* fillColor: 'red'
|
* fillColor: 'red'
|
||||||
* });
|
* });
|
||||||
*
|
*
|
||||||
* var circle = new Path.Circle({
|
* var circle = new Path.Circle({
|
||||||
* center: view.center,
|
* center: view.center,
|
||||||
* radius: 25,
|
* radius: 25,
|
||||||
* strokeColor: 'black'
|
* strokeColor: 'black'
|
||||||
* });
|
* });
|
||||||
*
|
*
|
||||||
* // Create a group of the two items and clip it:
|
* // Create a group of the two items and clip it:
|
||||||
* var group = new Group(circle, star);
|
* var group = new Group(circle, star);
|
||||||
* group.clipped = true;
|
* group.clipped = true;
|
||||||
*
|
*
|
||||||
* // Lets animate the circle:
|
* // Lets animate the circle:
|
||||||
* function onFrame(event) {
|
* function onFrame(event) {
|
||||||
* var offset = Math.sin(event.count / 30) * 30;
|
* var offset = Math.sin(event.count / 30) * 30;
|
||||||
|
|
|
@ -53,7 +53,7 @@ var Layer = Group.extend(/** @lends Layer# */{
|
||||||
* @example {@paperscript}
|
* @example {@paperscript}
|
||||||
* var path = new Path([100, 100], [100, 200]);
|
* var path = new Path([100, 100], [100, 200]);
|
||||||
* var path2 = new Path([50, 150], [150, 150]);
|
* var path2 = new Path([50, 150], [150, 150]);
|
||||||
*
|
*
|
||||||
* // Create a layer. The properties in the object literal
|
* // Create a layer. The properties in the object literal
|
||||||
* // are set on the newly created layer.
|
* // are set on the newly created layer.
|
||||||
* var layer = new Layer({
|
* var layer = new Layer({
|
||||||
|
@ -98,7 +98,7 @@ var Layer = Group.extend(/** @lends Layer# */{
|
||||||
return false;
|
return false;
|
||||||
},
|
},
|
||||||
|
|
||||||
getNextSibling: function getNextSibling() {
|
getNextSibling: function getNextSibling() {
|
||||||
return this._parent ? getNextSibling.base.call(this)
|
return this._parent ? getNextSibling.base.call(this)
|
||||||
: this._project.layers[this._index + 1] || null;
|
: this._project.layers[this._index + 1] || null;
|
||||||
},
|
},
|
||||||
|
|
|
@ -40,36 +40,36 @@ var Raster = Item.extend(/** @lends Raster# */{
|
||||||
* @param {HTMLImageElement|Canvas|String} [source] the source of the raster
|
* @param {HTMLImageElement|Canvas|String} [source] the source of the raster
|
||||||
* @param {HTMLImageElement|Canvas|String} [position] the center position at
|
* @param {HTMLImageElement|Canvas|String} [position] the center position at
|
||||||
* which the raster item is placed.
|
* which the raster item is placed.
|
||||||
*
|
*
|
||||||
* @example {@paperscript height=300} // Creating a raster using a url
|
* @example {@paperscript height=300} // Creating a raster using a url
|
||||||
* var url = 'http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png';
|
* var url = 'http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png';
|
||||||
* var raster = new Raster(url);
|
* var raster = new Raster(url);
|
||||||
*
|
*
|
||||||
* // If you create a Raster using a url, you can use the onLoad
|
* // If you create a Raster using a url, you can use the onLoad
|
||||||
* // handler to do something once it is loaded:
|
* // handler to do something once it is loaded:
|
||||||
* raster.onLoad = function() {
|
* raster.onLoad = function() {
|
||||||
* console.log('The image has loaded.');
|
* console.log('The image has loaded.');
|
||||||
* };
|
* };
|
||||||
*
|
*
|
||||||
* @example // Creating a raster using the id of a DOM Image:
|
* @example // Creating a raster using the id of a DOM Image:
|
||||||
*
|
*
|
||||||
* // Create a raster using the id of the image:
|
* // Create a raster using the id of the image:
|
||||||
* var raster = new Raster('art');
|
* var raster = new Raster('art');
|
||||||
*
|
*
|
||||||
* @example // Creating a raster using a DOM Image:
|
* @example // Creating a raster using a DOM Image:
|
||||||
*
|
*
|
||||||
* // Find the element using its id:
|
* // Find the element using its id:
|
||||||
* var imageElement = document.getElementById('art');
|
* var imageElement = document.getElementById('art');
|
||||||
*
|
*
|
||||||
* // Create the raster:
|
* // Create the raster:
|
||||||
* var raster = new Raster(imageElement);
|
* var raster = new Raster(imageElement);
|
||||||
*
|
*
|
||||||
* @example {@paperscript height=300}
|
* @example {@paperscript height=300}
|
||||||
* var raster = new Raster({
|
* var raster = new Raster({
|
||||||
* source: 'http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png',
|
* source: 'http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png',
|
||||||
* position: view.center
|
* position: view.center
|
||||||
* });
|
* });
|
||||||
*
|
*
|
||||||
* raster.scale(0.5);
|
* raster.scale(0.5);
|
||||||
* raster.rotate(10);
|
* raster.rotate(10);
|
||||||
*/
|
*/
|
||||||
|
@ -274,15 +274,15 @@ var Raster = Item.extend(/** @lends Raster# */{
|
||||||
* ID of a DOM element to get the image from (either a DOM Image or a
|
* ID of a DOM element to get the image from (either a DOM Image or a
|
||||||
* Canvas). Reading this property will return the url of the source image or
|
* Canvas). Reading this property will return the url of the source image or
|
||||||
* a data-url.
|
* a data-url.
|
||||||
*
|
*
|
||||||
* @bean
|
* @bean
|
||||||
* @type HTMLImageElement|Canvas|String
|
* @type HTMLImageElement|Canvas|String
|
||||||
*
|
*
|
||||||
* @example {@paperscript}
|
* @example {@paperscript}
|
||||||
* var raster = new Raster();
|
* var raster = new Raster();
|
||||||
* raster.source = 'http://paperjs.org/about/resources/paper-js.gif';
|
* raster.source = 'http://paperjs.org/about/resources/paper-js.gif';
|
||||||
* raster.position = view.center;
|
* raster.position = view.center;
|
||||||
*
|
*
|
||||||
* @example {@paperscript}
|
* @example {@paperscript}
|
||||||
* var raster = new Raster({
|
* var raster = new Raster({
|
||||||
* source: 'http://paperjs.org/about/resources/paper-js.gif',
|
* source: 'http://paperjs.org/about/resources/paper-js.gif',
|
||||||
|
@ -314,7 +314,7 @@ var Raster = Item.extend(/** @lends Raster# */{
|
||||||
// IE has naturalWidth / Height defined, but width / height set to 0
|
// IE has naturalWidth / Height defined, but width / height set to 0
|
||||||
// when the image is invisible in the document.
|
// when the image is invisible in the document.
|
||||||
if (image.naturalWidth && image.naturalHeight) {
|
if (image.naturalWidth && image.naturalHeight) {
|
||||||
// Fire load event delayed, so behavior is the same as when it's
|
// Fire load event delayed, so behavior is the same as when it's
|
||||||
// actually loaded and we give the code time to install event
|
// actually loaded and we give the code time to install event
|
||||||
setTimeout(loaded, 0);
|
setTimeout(loaded, 0);
|
||||||
} else {
|
} else {
|
||||||
|
@ -335,7 +335,7 @@ var Raster = Item.extend(/** @lends Raster# */{
|
||||||
// Preserve the data in this._data since canvas-node eats it.
|
// Preserve the data in this._data since canvas-node eats it.
|
||||||
// TODO: Fix canvas-node instead
|
// TODO: Fix canvas-node instead
|
||||||
image.src = this._data = src;
|
image.src = this._data = src;
|
||||||
// Fire load event delayed, so behavior is the same as when it's
|
// Fire load event delayed, so behavior is the same as when it's
|
||||||
// actually loaded and we give the code time to install event
|
// actually loaded and we give the code time to install event
|
||||||
setTimeout(loaded, 0);
|
setTimeout(loaded, 0);
|
||||||
} else if (/^https?:\/\//.test(src)) {
|
} else if (/^https?:\/\//.test(src)) {
|
||||||
|
|
|
@ -190,7 +190,7 @@ var Shape = Item.extend(/** @lends Shape# */{
|
||||||
ry = radius.height,
|
ry = radius.height,
|
||||||
kappa = /*#=*/ Numerical.KAPPA;
|
kappa = /*#=*/ Numerical.KAPPA;
|
||||||
if (type === 'ellipse') {
|
if (type === 'ellipse') {
|
||||||
// Approximate ellipse with four bezier curves and KAPPA.
|
// Approximate ellipse with four bezier curves and KAPPA.
|
||||||
var cx = rx * kappa,
|
var cx = rx * kappa,
|
||||||
cy = ry * kappa;
|
cy = ry * kappa;
|
||||||
ctx.moveTo(-rx, 0);
|
ctx.moveTo(-rx, 0);
|
||||||
|
|
|
@ -12,7 +12,7 @@
|
||||||
|
|
||||||
// Define default options for browser based compile-time preprocessing.
|
// Define default options for browser based compile-time preprocessing.
|
||||||
// These are also used for building, but some values are overridden
|
// These are also used for building, but some values are overridden
|
||||||
// (e.g. version, stats).
|
// (e.g. version, stats).
|
||||||
|
|
||||||
var __options = {
|
var __options = {
|
||||||
parser: 'acorn',
|
parser: 'acorn',
|
||||||
|
|
|
@ -37,15 +37,15 @@ var CompoundPath = PathItem.extend(/** @lends CompoundPath# */{
|
||||||
* center: new Point(50, 50),
|
* center: new Point(50, 50),
|
||||||
* radius: 30
|
* radius: 30
|
||||||
* });
|
* });
|
||||||
*
|
*
|
||||||
* var innerCircle = new Path.Circle({
|
* var innerCircle = new Path.Circle({
|
||||||
* center: new Point(50, 50),
|
* center: new Point(50, 50),
|
||||||
* radius: 10
|
* radius: 10
|
||||||
* });
|
* });
|
||||||
*
|
*
|
||||||
* var compoundPath = new CompoundPath([circle, innerCircle]);
|
* var compoundPath = new CompoundPath([circle, innerCircle]);
|
||||||
* compoundPath.fillColor = 'red';
|
* compoundPath.fillColor = 'red';
|
||||||
*
|
*
|
||||||
* // Move the inner circle 5pt to the right:
|
* // Move the inner circle 5pt to the right:
|
||||||
* compoundPath.children[1].position.x += 5;
|
* compoundPath.children[1].position.x += 5;
|
||||||
*/
|
*/
|
||||||
|
@ -143,7 +143,8 @@ var CompoundPath = PathItem.extend(/** @lends CompoundPath# */{
|
||||||
},
|
},
|
||||||
|
|
||||||
setClockwise: function(clockwise) {
|
setClockwise: function(clockwise) {
|
||||||
if (this.isClockwise() != !!clockwise)
|
/*jshint -W018 */
|
||||||
|
if (this.isClockwise() !== !!clockwise)
|
||||||
this.reverse();
|
this.reverse();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -44,7 +44,7 @@ Path.inject({ statics: new function() {
|
||||||
return createPath(segments, true, args);
|
return createPath(segments, true, args);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
return /** @lends Path */{
|
return /** @lends Path */{
|
||||||
/**
|
/**
|
||||||
* {@grouptitle Shaped Paths}
|
* {@grouptitle Shaped Paths}
|
||||||
|
@ -52,7 +52,7 @@ Path.inject({ statics: new function() {
|
||||||
* Creates a linear path item from two points describing a line.
|
* Creates a linear path item from two points describing a line.
|
||||||
*
|
*
|
||||||
* @name Path.Line
|
* @name Path.Line
|
||||||
* @param {Point} from the line's starting point
|
* @param {Point} from the line's starting point
|
||||||
* @param {Point} to the line's ending point
|
* @param {Point} to the line's ending point
|
||||||
* @return {Path} the newly created path
|
* @return {Path} the newly created path
|
||||||
*
|
*
|
||||||
|
|
100
src/path/Path.js
100
src/path/Path.js
|
@ -796,7 +796,7 @@ var Path = PathItem.extend(/** @lends Path# */{
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Specifies whether the path and all its segments are selected. Cannot be
|
* Specifies whether the path and all its segments are selected. Cannot be
|
||||||
* {@code true} on an empty path.
|
* {@code true} on an empty path.
|
||||||
*
|
*
|
||||||
* @type Boolean
|
* @type Boolean
|
||||||
|
@ -947,7 +947,7 @@ var Path = PathItem.extend(/** @lends Path# */{
|
||||||
* if (path) {
|
* if (path) {
|
||||||
* path.selected = false;
|
* path.selected = false;
|
||||||
* }
|
* }
|
||||||
*
|
*
|
||||||
* // Create a new path and add the position of the mouse
|
* // Create a new path and add the position of the mouse
|
||||||
* // as its first segment. Select it, so we can see the
|
* // as its first segment. Select it, so we can see the
|
||||||
* // segment points:
|
* // segment points:
|
||||||
|
@ -957,13 +957,13 @@ var Path = PathItem.extend(/** @lends Path# */{
|
||||||
* selected: true
|
* selected: true
|
||||||
* });
|
* });
|
||||||
* }
|
* }
|
||||||
*
|
*
|
||||||
* function onMouseDrag(event) {
|
* function onMouseDrag(event) {
|
||||||
* // On every drag event, add a segment to the path
|
* // On every drag event, add a segment to the path
|
||||||
* // at the position of the mouse:
|
* // at the position of the mouse:
|
||||||
* path.add(event.point);
|
* path.add(event.point);
|
||||||
* }
|
* }
|
||||||
*
|
*
|
||||||
* function onMouseUp(event) {
|
* function onMouseUp(event) {
|
||||||
* // When the mouse is released, simplify the path:
|
* // When the mouse is released, simplify the path:
|
||||||
* path.simplify();
|
* path.simplify();
|
||||||
|
@ -982,42 +982,42 @@ var Path = PathItem.extend(/** @lends Path# */{
|
||||||
/**
|
/**
|
||||||
* Splits the path at the given offset. After splitting, the path will be
|
* Splits the path at the given offset. After splitting, the path will be
|
||||||
* open. If the path was open already, splitting will result in two paths.
|
* open. If the path was open already, splitting will result in two paths.
|
||||||
*
|
*
|
||||||
* @name Path#split
|
* @name Path#split
|
||||||
* @function
|
* @function
|
||||||
* @param {Number} offset the offset at which to split the path
|
* @param {Number} offset the offset at which to split the path
|
||||||
* as a number between 0 and {@link Path#length}
|
* as a number between 0 and {@link Path#length}
|
||||||
* @return {Path} the newly created path after splitting, if any
|
* @return {Path} the newly created path after splitting, if any
|
||||||
*
|
*
|
||||||
* @example {@paperscript} // Splitting an open path
|
* @example {@paperscript} // Splitting an open path
|
||||||
* var path = new Path();
|
* var path = new Path();
|
||||||
* path.strokeColor = 'black';
|
* path.strokeColor = 'black';
|
||||||
* path.add(20, 20);
|
* path.add(20, 20);
|
||||||
*
|
*
|
||||||
* // Add an arc through {x: 90, y: 80} to {x: 160, y: 20}
|
* // Add an arc through {x: 90, y: 80} to {x: 160, y: 20}
|
||||||
* path.arcTo([90, 80], [160, 20]);
|
* path.arcTo([90, 80], [160, 20]);
|
||||||
*
|
*
|
||||||
* // Split the path at 30% of its length:
|
* // Split the path at 30% of its length:
|
||||||
* var path2 = path.split(path.length * 0.3);
|
* var path2 = path.split(path.length * 0.3);
|
||||||
* path2.strokeColor = 'red';
|
* path2.strokeColor = 'red';
|
||||||
*
|
*
|
||||||
* // Move the newly created path 40px to the right:
|
* // Move the newly created path 40px to the right:
|
||||||
* path2.position.x += 40;
|
* path2.position.x += 40;
|
||||||
*
|
*
|
||||||
* @example {@paperscript} // Splitting a closed path
|
* @example {@paperscript} // Splitting a closed path
|
||||||
* var path = new Path.Rectangle({
|
* var path = new Path.Rectangle({
|
||||||
* from: [20, 20],
|
* from: [20, 20],
|
||||||
* to: [80, 80],
|
* to: [80, 80],
|
||||||
* strokeColor: 'black'
|
* strokeColor: 'black'
|
||||||
* });
|
* });
|
||||||
*
|
*
|
||||||
* // Split the path at 60% of its length:
|
* // Split the path at 60% of its length:
|
||||||
* path.split(path.length * 0.6);
|
* path.split(path.length * 0.6);
|
||||||
*
|
*
|
||||||
* // Move the first segment, to show where the path
|
* // Move the first segment, to show where the path
|
||||||
* // was split:
|
* // was split:
|
||||||
* path.firstSegment.point.x += 20;
|
* path.firstSegment.point.x += 20;
|
||||||
*
|
*
|
||||||
* // Select the first segment:
|
* // Select the first segment:
|
||||||
* path.firstSegment.selected = true;
|
* path.firstSegment.selected = true;
|
||||||
*/
|
*/
|
||||||
|
@ -1025,27 +1025,27 @@ var Path = PathItem.extend(/** @lends Path# */{
|
||||||
* Splits the path at the given curve location. After splitting, the path
|
* Splits the path at the given curve location. After splitting, the path
|
||||||
* will be open. If the path was open already, splitting will result in two
|
* will be open. If the path was open already, splitting will result in two
|
||||||
* paths.
|
* paths.
|
||||||
*
|
*
|
||||||
* @name Path#split
|
* @name Path#split
|
||||||
* @function
|
* @function
|
||||||
* @param {CurveLocation} location the curve location at which to split
|
* @param {CurveLocation} location the curve location at which to split
|
||||||
* the path
|
* the path
|
||||||
* @return {Path} the newly created path after splitting, if any
|
* @return {Path} the newly created path after splitting, if any
|
||||||
*
|
*
|
||||||
* @example {@paperscript}
|
* @example {@paperscript}
|
||||||
* var path = new Path.Circle({
|
* var path = new Path.Circle({
|
||||||
* center: view.center,
|
* center: view.center,
|
||||||
* radius: 40,
|
* radius: 40,
|
||||||
* strokeColor: 'black'
|
* strokeColor: 'black'
|
||||||
* });
|
* });
|
||||||
*
|
*
|
||||||
* var pointOnCircle = view.center + {
|
* var pointOnCircle = view.center + {
|
||||||
* length: 40,
|
* length: 40,
|
||||||
* angle: 30
|
* angle: 30
|
||||||
* };
|
* };
|
||||||
*
|
*
|
||||||
* var curveLocation = path.getNearestLocation(pointOnCircle);
|
* var curveLocation = path.getNearestLocation(pointOnCircle);
|
||||||
*
|
*
|
||||||
* path.split(curveLocation);
|
* path.split(curveLocation);
|
||||||
* path.lastSegment.selected = true;
|
* path.lastSegment.selected = true;
|
||||||
*/
|
*/
|
||||||
|
@ -1053,37 +1053,37 @@ var Path = PathItem.extend(/** @lends Path# */{
|
||||||
* Splits the path at the given curve index and parameter. After splitting,
|
* Splits the path at the given curve index and parameter. After splitting,
|
||||||
* the path will be open. If the path was open already, splitting will
|
* the path will be open. If the path was open already, splitting will
|
||||||
* result in two paths.
|
* result in two paths.
|
||||||
*
|
*
|
||||||
* @example {@paperscript} // Splitting an open path
|
* @example {@paperscript} // Splitting an open path
|
||||||
* // Draw a V shaped path:
|
* // Draw a V shaped path:
|
||||||
* var path = new Path([20, 20], [50, 80], [80, 20]);
|
* var path = new Path([20, 20], [50, 80], [80, 20]);
|
||||||
* path.strokeColor = 'black';
|
* path.strokeColor = 'black';
|
||||||
*
|
*
|
||||||
* // Split the path half-way down its second curve:
|
* // Split the path half-way down its second curve:
|
||||||
* var path2 = path.split(1, 0.5);
|
* var path2 = path.split(1, 0.5);
|
||||||
*
|
*
|
||||||
* // Give the resulting path a red stroke-color
|
* // Give the resulting path a red stroke-color
|
||||||
* // and move it 20px to the right:
|
* // and move it 20px to the right:
|
||||||
* path2.strokeColor = 'red';
|
* path2.strokeColor = 'red';
|
||||||
* path2.position.x += 20;
|
* path2.position.x += 20;
|
||||||
*
|
*
|
||||||
* @example {@paperscript} // Splitting a closed path
|
* @example {@paperscript} // Splitting a closed path
|
||||||
* var path = new Path.Rectangle({
|
* var path = new Path.Rectangle({
|
||||||
* from: [20, 20],
|
* from: [20, 20],
|
||||||
* to: [80, 80],
|
* to: [80, 80],
|
||||||
* strokeColor: 'black'
|
* strokeColor: 'black'
|
||||||
* });
|
* });
|
||||||
*
|
*
|
||||||
* // Split the path half-way down its second curve:
|
* // Split the path half-way down its second curve:
|
||||||
* path.split(2, 0.5);
|
* path.split(2, 0.5);
|
||||||
*
|
*
|
||||||
* // Move the first segment, to show where the path
|
* // Move the first segment, to show where the path
|
||||||
* // was split:
|
* // was split:
|
||||||
* path.firstSegment.point.x += 20;
|
* path.firstSegment.point.x += 20;
|
||||||
*
|
*
|
||||||
* // Select the first segment:
|
* // Select the first segment:
|
||||||
* path.firstSegment.selected = true;
|
* path.firstSegment.selected = true;
|
||||||
*
|
*
|
||||||
* @param {Number} index the index of the curve in the {@link Path#curves}
|
* @param {Number} index the index of the curve in the {@link Path#curves}
|
||||||
* array at which to split
|
* array at which to split
|
||||||
* @param {Number} parameter the parameter at which the curve will be split
|
* @param {Number} parameter the parameter at which the curve will be split
|
||||||
|
@ -1119,7 +1119,7 @@ var Path = PathItem.extend(/** @lends Path# */{
|
||||||
// parameter, which are removed from the current path. Pass true
|
// parameter, which are removed from the current path. Pass true
|
||||||
// for includeCurves, since we want to preserve and move them to
|
// for includeCurves, since we want to preserve and move them to
|
||||||
// the new path through _add(), allowing us to have CurveLocation
|
// the new path through _add(), allowing us to have CurveLocation
|
||||||
// keep the connection to the new path through moved curves.
|
// keep the connection to the new path through moved curves.
|
||||||
var segs = this.removeSegments(index, this._segments.length, true),
|
var segs = this.removeSegments(index, this._segments.length, true),
|
||||||
path;
|
path;
|
||||||
if (this._closed) {
|
if (this._closed) {
|
||||||
|
@ -1130,7 +1130,7 @@ var Path = PathItem.extend(/** @lends Path# */{
|
||||||
// will happen below.
|
// will happen below.
|
||||||
path = this;
|
path = this;
|
||||||
} else if (index > 0) {
|
} else if (index > 0) {
|
||||||
// Pass true for _preserve, in case of CompoundPath, to avoid
|
// Pass true for _preserve, in case of CompoundPath, to avoid
|
||||||
// reversing of path direction, which would mess with segs!
|
// reversing of path direction, which would mess with segs!
|
||||||
// Use _clone to copy over all other attributes, including style
|
// Use _clone to copy over all other attributes, including style
|
||||||
path = this._clone(new Path().insertAbove(this, true));
|
path = this._clone(new Path().insertAbove(this, true));
|
||||||
|
@ -1202,12 +1202,12 @@ var Path = PathItem.extend(/** @lends Path# */{
|
||||||
* segments: [[30, 25], [30, 75]],
|
* segments: [[30, 25], [30, 75]],
|
||||||
* strokeColor: 'black'
|
* strokeColor: 'black'
|
||||||
* });
|
* });
|
||||||
*
|
*
|
||||||
* var path2 = new Path({
|
* var path2 = new Path({
|
||||||
* segments: [[200, 25], [200, 75]],
|
* segments: [[200, 25], [200, 75]],
|
||||||
* strokeColor: 'black'
|
* strokeColor: 'black'
|
||||||
* });
|
* });
|
||||||
*
|
*
|
||||||
* // Join the paths:
|
* // Join the paths:
|
||||||
* path.join(path2);
|
* path.join(path2);
|
||||||
*
|
*
|
||||||
|
@ -1218,19 +1218,19 @@ var Path = PathItem.extend(/** @lends Path# */{
|
||||||
* segments: [[30, 25], [30, 75]],
|
* segments: [[30, 25], [30, 75]],
|
||||||
* strokeColor: 'black'
|
* strokeColor: 'black'
|
||||||
* });
|
* });
|
||||||
*
|
*
|
||||||
* var path2 = new Path({
|
* var path2 = new Path({
|
||||||
* segments: [[30, 25], [80, 25]],
|
* segments: [[30, 25], [80, 25]],
|
||||||
* strokeColor: 'black'
|
* strokeColor: 'black'
|
||||||
* });
|
* });
|
||||||
*
|
*
|
||||||
* // Join the paths:
|
* // Join the paths:
|
||||||
* path.join(path2);
|
* path.join(path2);
|
||||||
*
|
*
|
||||||
* // After joining, path with have 3 segments, since it
|
* // After joining, path with have 3 segments, since it
|
||||||
* // shared its first segment point with the first
|
* // shared its first segment point with the first
|
||||||
* // segment point of path2.
|
* // segment point of path2.
|
||||||
*
|
*
|
||||||
* // Select the path to show that they have joined:
|
* // Select the path to show that they have joined:
|
||||||
* path.selected = true;
|
* path.selected = true;
|
||||||
*
|
*
|
||||||
|
@ -1240,18 +1240,18 @@ var Path = PathItem.extend(/** @lends Path# */{
|
||||||
* segments: [[30, 25], [80, 25], [80, 75]],
|
* segments: [[30, 25], [80, 25], [80, 75]],
|
||||||
* strokeColor: 'black'
|
* strokeColor: 'black'
|
||||||
* });
|
* });
|
||||||
*
|
*
|
||||||
* var path2 = new Path({
|
* var path2 = new Path({
|
||||||
* segments: [[30, 25], [30, 75], [80, 75]],
|
* segments: [[30, 25], [30, 75], [80, 75]],
|
||||||
* strokeColor: 'black'
|
* strokeColor: 'black'
|
||||||
* });
|
* });
|
||||||
*
|
*
|
||||||
* // Join the paths:
|
* // Join the paths:
|
||||||
* path.join(path2);
|
* path.join(path2);
|
||||||
*
|
*
|
||||||
* // Because the paths were joined at two points, the path is closed
|
* // Because the paths were joined at two points, the path is closed
|
||||||
* // and has 4 segments.
|
* // and has 4 segments.
|
||||||
*
|
*
|
||||||
* // Select the path to show that they have joined:
|
* // Select the path to show that they have joined:
|
||||||
* path.selected = true;
|
* path.selected = true;
|
||||||
*/
|
*/
|
||||||
|
@ -1408,17 +1408,17 @@ var Path = PathItem.extend(/** @lends Path# */{
|
||||||
* var path = new Path({
|
* var path = new Path({
|
||||||
* strokeColor: 'black'
|
* strokeColor: 'black'
|
||||||
* });
|
* });
|
||||||
*
|
*
|
||||||
* path.add(new Point(40, 100));
|
* path.add(new Point(40, 100));
|
||||||
* path.arcTo(new Point(150, 100));
|
* path.arcTo(new Point(150, 100));
|
||||||
*
|
*
|
||||||
* // We're going to be working with a third of the length
|
* // We're going to be working with a third of the length
|
||||||
* // of the path as the offset:
|
* // of the path as the offset:
|
||||||
* var offset = path.length / 3;
|
* var offset = path.length / 3;
|
||||||
*
|
*
|
||||||
* // Find the point on the path:
|
* // Find the point on the path:
|
||||||
* var point = path.getPointAt(offset);
|
* var point = path.getPointAt(offset);
|
||||||
*
|
*
|
||||||
* // Create a small circle shaped path at the point:
|
* // Create a small circle shaped path at the point:
|
||||||
* var circle = new Path.Circle({
|
* var circle = new Path.Circle({
|
||||||
* center: point,
|
* center: point,
|
||||||
|
@ -1632,7 +1632,7 @@ var Path = PathItem.extend(/** @lends Path# */{
|
||||||
* @param point {Point} the point for which we search the nearest point
|
* @param point {Point} the point for which we search the nearest point
|
||||||
* @return {Point} the point on the path that's the closest to the specified
|
* @return {Point} the point on the path that's the closest to the specified
|
||||||
* point
|
* point
|
||||||
*
|
*
|
||||||
* @example {@paperscript height=200}
|
* @example {@paperscript height=200}
|
||||||
* var star = new Path.Star({
|
* var star = new Path.Star({
|
||||||
* center: view.center,
|
* center: view.center,
|
||||||
|
@ -1641,18 +1641,18 @@ var Path = PathItem.extend(/** @lends Path# */{
|
||||||
* radius2: 60,
|
* radius2: 60,
|
||||||
* strokeColor: 'black'
|
* strokeColor: 'black'
|
||||||
* });
|
* });
|
||||||
*
|
*
|
||||||
* var circle = new Path.Circle({
|
* var circle = new Path.Circle({
|
||||||
* center: view.center,
|
* center: view.center,
|
||||||
* radius: 3,
|
* radius: 3,
|
||||||
* fillColor: 'red'
|
* fillColor: 'red'
|
||||||
* });
|
* });
|
||||||
*
|
*
|
||||||
* function onMouseMove(event) {
|
* function onMouseMove(event) {
|
||||||
* // Get the nearest point from the mouse position
|
* // Get the nearest point from the mouse position
|
||||||
* // to the star shaped path:
|
* // to the star shaped path:
|
||||||
* var nearestPoint = star.getNearestPoint(event.point);
|
* var nearestPoint = star.getNearestPoint(event.point);
|
||||||
*
|
*
|
||||||
* // Move the red circle to the nearest point:
|
* // Move the red circle to the nearest point:
|
||||||
* circle.position = nearestPoint;
|
* circle.position = nearestPoint;
|
||||||
* }
|
* }
|
||||||
|
@ -1821,7 +1821,7 @@ var Path = PathItem.extend(/** @lends Path# */{
|
||||||
&& segment._index < numSegments - 1) {
|
&& segment._index < numSegments - 1) {
|
||||||
// It's a join. See that it's not a round one (one of
|
// It's a join. See that it's not a round one (one of
|
||||||
// the handles has to be zero too for this!)
|
// the handles has to be zero too for this!)
|
||||||
if (join !== 'round' && (segment._handleIn.isZero()
|
if (join !== 'round' && (segment._handleIn.isZero()
|
||||||
|| segment._handleOut.isZero()))
|
|| segment._handleOut.isZero()))
|
||||||
// _addBevelJoin() handles both 'bevel' and 'miter'!
|
// _addBevelJoin() handles both 'bevel' and 'miter'!
|
||||||
Path._addBevelJoin(segment, join, radius, miterLimit,
|
Path._addBevelJoin(segment, join, radius, miterLimit,
|
||||||
|
@ -2036,7 +2036,7 @@ var Path = PathItem.extend(/** @lends Path# */{
|
||||||
&& dashArray && dashArray.length;
|
&& dashArray && dashArray.length;
|
||||||
|
|
||||||
function getOffset(i) {
|
function getOffset(i) {
|
||||||
// Negative modulo is necessary since we're stepping back
|
// Negative modulo is necessary since we're stepping back
|
||||||
// in the dash sequence first.
|
// in the dash sequence first.
|
||||||
return dashArray[((i % dashLength) + dashLength) % dashLength];
|
return dashArray[((i % dashLength) + dashLength) % dashLength];
|
||||||
}
|
}
|
||||||
|
@ -2248,7 +2248,7 @@ var Path = PathItem.extend(/** @lends Path# */{
|
||||||
// are considered abstract methods of PathItem and need to be defined in
|
// are considered abstract methods of PathItem and need to be defined in
|
||||||
// all implementing classes.
|
// all implementing classes.
|
||||||
moveTo: function(/* point */) {
|
moveTo: function(/* point */) {
|
||||||
// moveTo should only be called at the beginning of paths. But it
|
// moveTo should only be called at the beginning of paths. But it
|
||||||
// can ce called again if there is nothing drawn yet, in which case
|
// can ce called again if there is nothing drawn yet, in which case
|
||||||
// the first segment gets readjusted.
|
// the first segment gets readjusted.
|
||||||
var segments = this._segments;
|
var segments = this._segments;
|
||||||
|
@ -2653,7 +2653,7 @@ statics: {
|
||||||
if (cap === 'round') {
|
if (cap === 'round') {
|
||||||
addRound(segment);
|
addRound(segment);
|
||||||
} else {
|
} else {
|
||||||
Path._addSquareCap(segment, cap, radius, add);
|
Path._addSquareCap(segment, cap, radius, add);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -32,7 +32,7 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
PathItem.inject(new function() {
|
PathItem.inject(new function() {
|
||||||
// Boolean operators return true if a curve with the given winding
|
// Boolean operators return true if a curve with the given winding
|
||||||
// contribution contributes to the final result or not. They are called
|
// contribution contributes to the final result or not. They are called
|
||||||
// for each curve in the graph after curves in the operands are
|
// for each curve in the graph after curves in the operands are
|
||||||
// split at intersections.
|
// split at intersections.
|
||||||
|
@ -114,7 +114,7 @@ PathItem.inject(new function() {
|
||||||
k = 0;
|
k = 0;
|
||||||
do {
|
do {
|
||||||
if (lengths[k] >= length) {
|
if (lengths[k] >= length) {
|
||||||
if (k > 0)
|
if (k > 0)
|
||||||
length -= lengths[k - 1];
|
length -= lengths[k - 1];
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
@ -125,7 +125,7 @@ PathItem.inject(new function() {
|
||||||
path = curve._path;
|
path = curve._path;
|
||||||
if (path._parent instanceof CompoundPath)
|
if (path._parent instanceof CompoundPath)
|
||||||
path = path._parent;
|
path = path._parent;
|
||||||
// While subtracting, we need to omit this curve if this
|
// While subtracting, we need to omit this curve if this
|
||||||
// curve is contributing to the second operand and is outside
|
// curve is contributing to the second operand and is outside
|
||||||
// the first operand.
|
// the first operand.
|
||||||
windings[j] = subtract && _path2
|
windings[j] = subtract && _path2
|
||||||
|
@ -153,7 +153,7 @@ PathItem.inject(new function() {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Private method for splitting a PathItem at the given intersections.
|
* Private method for splitting a PathItem at the given intersections.
|
||||||
* The routine works for both self intersections and intersections
|
* The routine works for both self intersections and intersections
|
||||||
* between PathItems.
|
* between PathItems.
|
||||||
* @param {CurveLocation[]} intersections Array of CurveLocation objects
|
* @param {CurveLocation[]} intersections Array of CurveLocation objects
|
||||||
*/
|
*/
|
||||||
|
@ -162,7 +162,7 @@ PathItem.inject(new function() {
|
||||||
linearSegments;
|
linearSegments;
|
||||||
|
|
||||||
function resetLinear() {
|
function resetLinear() {
|
||||||
// Reset linear segments if they were part of a linear curve
|
// Reset linear segments if they were part of a linear curve
|
||||||
// and if we are done with the entire curve.
|
// and if we are done with the entire curve.
|
||||||
for (var i = 0, l = linearSegments.length; i < l; i++) {
|
for (var i = 0, l = linearSegments.length; i < l; i++) {
|
||||||
var segment = linearSegments[i];
|
var segment = linearSegments[i];
|
||||||
|
@ -272,7 +272,7 @@ PathItem.inject(new function() {
|
||||||
// compare the endpoints of the curve to determine if the
|
// compare the endpoints of the curve to determine if the
|
||||||
// ray from query point along +-x direction will intersect
|
// ray from query point along +-x direction will intersect
|
||||||
// the monotone curve. Results in quite significant speedup.
|
// the monotone curve. Results in quite significant speedup.
|
||||||
if (winding && (winding === 1
|
if (winding && (winding === 1
|
||||||
&& y >= values[1] && y <= values[7]
|
&& y >= values[1] && y <= values[7]
|
||||||
|| y >= values[7] && y <= values[1])
|
|| y >= values[7] && y <= values[1])
|
||||||
&& Curve.solveCubic(values, 1, y, roots, 0,
|
&& Curve.solveCubic(values, 1, y, roots, 0,
|
||||||
|
@ -306,13 +306,13 @@ PathItem.inject(new function() {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Private method to trace closed contours from a set of segments according
|
* Private method to trace closed contours from a set of segments according
|
||||||
* to a set of constraints—winding contribution and a custom operator.
|
* to a set of constraints—winding contribution and a custom operator.
|
||||||
*
|
*
|
||||||
* @param {Segment[]} segments Array of 'seed' segments for tracing closed
|
* @param {Segment[]} segments Array of 'seed' segments for tracing closed
|
||||||
* contours
|
* contours
|
||||||
* @param {Function} the operator function that receives as argument the
|
* @param {Function} the operator function that receives as argument the
|
||||||
* winding number contribution of a curve and returns a boolean value
|
* winding number contribution of a curve and returns a boolean value
|
||||||
* indicating whether the curve should be included in the final contour or
|
* indicating whether the curve should be included in the final contour or
|
||||||
* not
|
* not
|
||||||
* @return {Path[]} the contours traced
|
* @return {Path[]} the contours traced
|
||||||
|
@ -388,7 +388,7 @@ PathItem.inject(new function() {
|
||||||
// Switch to the intersection segment.
|
// Switch to the intersection segment.
|
||||||
seg._visited = interSeg._visited;
|
seg._visited = interSeg._visited;
|
||||||
seg = interSeg;
|
seg = interSeg;
|
||||||
if (nextSeg._visited)
|
if (nextSeg._visited)
|
||||||
dir = 1;
|
dir = 1;
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
@ -439,8 +439,8 @@ PathItem.inject(new function() {
|
||||||
* direction
|
* direction
|
||||||
* @param {Boolean} horizontal whether we need to consider this point
|
* @param {Boolean} horizontal whether we need to consider this point
|
||||||
* as part of a horizontal curve
|
* as part of a horizontal curve
|
||||||
* @param {Boolean} testContains whether we need to consider this point
|
* @param {Boolean} testContains whether we need to consider this point
|
||||||
* as part of stationary points on the curve itself, used when checking
|
* as part of stationary points on the curve itself, used when checking
|
||||||
* the winding about a point.
|
* the winding about a point.
|
||||||
* @return {Number} the winding number
|
* @return {Number} the winding number
|
||||||
*/
|
*/
|
||||||
|
@ -454,7 +454,7 @@ PathItem.inject(new function() {
|
||||||
*
|
*
|
||||||
* Merges the geometry of the specified path from this path's
|
* Merges the geometry of the specified path from this path's
|
||||||
* geometry and returns the result as a new path item.
|
* geometry and returns the result as a new path item.
|
||||||
*
|
*
|
||||||
* @param {PathItem} path the path to unite with
|
* @param {PathItem} path the path to unite with
|
||||||
* @return {PathItem} the resulting path item
|
* @return {PathItem} the resulting path item
|
||||||
*/
|
*/
|
||||||
|
@ -467,7 +467,7 @@ PathItem.inject(new function() {
|
||||||
/**
|
/**
|
||||||
* Intersects the geometry of the specified path with this path's
|
* Intersects the geometry of the specified path with this path's
|
||||||
* geometry and returns the result as a new path item.
|
* geometry and returns the result as a new path item.
|
||||||
*
|
*
|
||||||
* @param {PathItem} path the path to intersect with
|
* @param {PathItem} path the path to intersect with
|
||||||
* @return {PathItem} the resulting path item
|
* @return {PathItem} the resulting path item
|
||||||
*/
|
*/
|
||||||
|
@ -480,7 +480,7 @@ PathItem.inject(new function() {
|
||||||
/**
|
/**
|
||||||
* Subtracts the geometry of the specified path from this path's
|
* Subtracts the geometry of the specified path from this path's
|
||||||
* geometry and returns the result as a new path item.
|
* geometry and returns the result as a new path item.
|
||||||
*
|
*
|
||||||
* @param {PathItem} path the path to subtract
|
* @param {PathItem} path the path to subtract
|
||||||
* @return {PathItem} the resulting path item
|
* @return {PathItem} the resulting path item
|
||||||
*/
|
*/
|
||||||
|
@ -495,18 +495,18 @@ PathItem.inject(new function() {
|
||||||
/**
|
/**
|
||||||
* Excludes the intersection of the geometry of the specified path with
|
* Excludes the intersection of the geometry of the specified path with
|
||||||
* this path's geometry and returns the result as a new group item.
|
* this path's geometry and returns the result as a new group item.
|
||||||
*
|
*
|
||||||
* @param {PathItem} path the path to exclude the intersection of
|
* @param {PathItem} path the path to exclude the intersection of
|
||||||
* @return {Group} the resulting group item
|
* @return {Group} the resulting group item
|
||||||
*/
|
*/
|
||||||
exclude: function(path) {
|
exclude: function(path) {
|
||||||
return new Group([this.subtract(path), path.subtract(this)]);
|
return new Group([this.subtract(path), path.subtract(this)]);
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Splits the geometry of this path along the geometry of the specified
|
* Splits the geometry of this path along the geometry of the specified
|
||||||
* path returns the result as a new group item.
|
* path returns the result as a new group item.
|
||||||
*
|
*
|
||||||
* @param {PathItem} path the path to divide by
|
* @param {PathItem} path the path to divide by
|
||||||
* @return {Group} the resulting group item
|
* @return {Group} the resulting group item
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -155,7 +155,7 @@ var PathItem = Item.extend(/** @lends PathItem# */{
|
||||||
var path1 = loc1.getPath(),
|
var path1 = loc1.getPath(),
|
||||||
path2 = loc2.getPath();
|
path2 = loc2.getPath();
|
||||||
return path1 === path2
|
return path1 === path2
|
||||||
// We can add parameter (0 <= t <= 1) to index
|
// We can add parameter (0 <= t <= 1) to index
|
||||||
// (a integer) to compare both at the same time
|
// (a integer) to compare both at the same time
|
||||||
? (loc1.getIndex() + loc1.getParameter())
|
? (loc1.getIndex() + loc1.getParameter())
|
||||||
- (loc2.getIndex() + loc2.getParameter())
|
- (loc2.getIndex() + loc2.getParameter())
|
||||||
|
@ -313,7 +313,7 @@ var PathItem = Item.extend(/** @lends PathItem# */{
|
||||||
},
|
},
|
||||||
|
|
||||||
_contains: function(point) {
|
_contains: function(point) {
|
||||||
// NOTE: point is reverse transformed by _matrix, so we don't need to
|
// NOTE: point is reverse transformed by _matrix, so we don't need to
|
||||||
// apply here.
|
// apply here.
|
||||||
/*#*/ if (__options.nativeContains || !__options.booleanOperations) {
|
/*#*/ if (__options.nativeContains || !__options.booleanOperations) {
|
||||||
// To compare with native canvas approach:
|
// To compare with native canvas approach:
|
||||||
|
@ -573,7 +573,7 @@ var PathItem = Item.extend(/** @lends PathItem# */{
|
||||||
* @name PathItem#closePath
|
* @name PathItem#closePath
|
||||||
* @function
|
* @function
|
||||||
* @param {Boolean} join controls whether the method should attempt to merge
|
* @param {Boolean} join controls whether the method should attempt to merge
|
||||||
* the first segment with the last if they lie in the same location.
|
* the first segment with the last if they lie in the same location.
|
||||||
* @see Path#closed
|
* @see Path#closed
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
|
@ -64,12 +64,12 @@ var Segment = Base.extend(/** @lends Segment# */{
|
||||||
* point: [100, 50],
|
* point: [100, 50],
|
||||||
* handleOut: [80, 100]
|
* handleOut: [80, 100]
|
||||||
* });
|
* });
|
||||||
*
|
*
|
||||||
* var secondSegment = new Segment({
|
* var secondSegment = new Segment({
|
||||||
* point: [300, 50],
|
* point: [300, 50],
|
||||||
* handleIn: [-80, -100]
|
* handleIn: [-80, -100]
|
||||||
* });
|
* });
|
||||||
*
|
*
|
||||||
* var path = new Path({
|
* var path = new Path({
|
||||||
* segments: [firstSegment, secondSegment],
|
* segments: [firstSegment, secondSegment],
|
||||||
* strokeColor: 'black'
|
* strokeColor: 'black'
|
||||||
|
@ -98,15 +98,15 @@ var Segment = Base.extend(/** @lends Segment# */{
|
||||||
* var inY = -100;
|
* var inY = -100;
|
||||||
* var outX = 80;
|
* var outX = 80;
|
||||||
* var outY = 100;
|
* var outY = 100;
|
||||||
*
|
*
|
||||||
* var x = 100;
|
* var x = 100;
|
||||||
* var y = 50;
|
* var y = 50;
|
||||||
* var firstSegment = new Segment(x, y, inX, inY, outX, outY);
|
* var firstSegment = new Segment(x, y, inX, inY, outX, outY);
|
||||||
*
|
*
|
||||||
* var x2 = 300;
|
* var x2 = 300;
|
||||||
* var y2 = 50;
|
* var y2 = 50;
|
||||||
* var secondSegment = new Segment( x2, y2, inX, inY, outX, outY);
|
* var secondSegment = new Segment( x2, y2, inX, inY, outX, outY);
|
||||||
*
|
*
|
||||||
* var path = new Path(firstSegment, secondSegment);
|
* var path = new Path(firstSegment, secondSegment);
|
||||||
* path.strokeColor = 'black';
|
* path.strokeColor = 'black';
|
||||||
* @ignore
|
* @ignore
|
||||||
|
@ -310,7 +310,7 @@ var Segment = Base.extend(/** @lends Segment# */{
|
||||||
* center: [80, 50],
|
* center: [80, 50],
|
||||||
* radius: 40
|
* radius: 40
|
||||||
* });
|
* });
|
||||||
*
|
*
|
||||||
* // Select the third segment point:
|
* // Select the third segment point:
|
||||||
* path.segments[2].selected = true;
|
* path.segments[2].selected = true;
|
||||||
*/
|
*/
|
||||||
|
@ -338,9 +338,9 @@ var Segment = Base.extend(/** @lends Segment# */{
|
||||||
} else {
|
} else {
|
||||||
state &= ~flag;
|
state &= ~flag;
|
||||||
}
|
}
|
||||||
// Set the selectio state even if path is not defined yet, to allow
|
// Set the selection state even if path is not defined yet, to allow
|
||||||
// selected segments to be inserted into paths and make JSON
|
// selected segments to be inserted into paths and make JSON
|
||||||
// deserialization work.
|
// deserialization work.
|
||||||
this._selectionState = state;
|
this._selectionState = state;
|
||||||
// If the selection state of the segment has changed, we need to let
|
// If the selection state of the segment has changed, we need to let
|
||||||
// it's path know and possibly add or remove it from
|
// it's path know and possibly add or remove it from
|
||||||
|
|
|
@ -24,7 +24,7 @@ var SegmentPoint = Point.extend({
|
||||||
x = y = 0;
|
x = y = 0;
|
||||||
} else if ((x = point[0]) !== undefined) { // Array-like
|
} else if ((x = point[0]) !== undefined) { // Array-like
|
||||||
y = point[1];
|
y = point[1];
|
||||||
} else {
|
} else {
|
||||||
// So we don't have to modify the point argument which causes
|
// So we don't have to modify the point argument which causes
|
||||||
// deoptimization:
|
// deoptimization:
|
||||||
var pt = point;
|
var pt = point;
|
||||||
|
|
|
@ -262,7 +262,7 @@ var Project = PaperScopeItem.extend(/** @lends Project# */{
|
||||||
/**
|
/**
|
||||||
* Perform a hit test on the items contained within the project at the
|
* Perform a hit test on the items contained within the project at the
|
||||||
* location of the specified point.
|
* location of the specified point.
|
||||||
*
|
*
|
||||||
* The options object allows you to control the specifics of the hit test
|
* The options object allows you to control the specifics of the hit test
|
||||||
* and may contain a combination of the following values:
|
* and may contain a combination of the following values:
|
||||||
* <b>options.tolerance:</b> {@code Number} – the tolerance of the hit test
|
* <b>options.tolerance:</b> {@code Number} – the tolerance of the hit test
|
||||||
|
|
|
@ -27,8 +27,8 @@ var Symbol = Base.extend(/** @lends Symbol# */{
|
||||||
*
|
*
|
||||||
* @param {Item} item the source item which is copied as the definition of
|
* @param {Item} item the source item which is copied as the definition of
|
||||||
* the symbol
|
* the symbol
|
||||||
* @param {Boolean} [dontCenter=false]
|
* @param {Boolean} [dontCenter=false]
|
||||||
*
|
*
|
||||||
* @example {@paperscript split=true height=240}
|
* @example {@paperscript split=true height=240}
|
||||||
* // Placing 100 instances of a symbol:
|
* // Placing 100 instances of a symbol:
|
||||||
* var path = new Path.Star(new Point(0, 0), 6, 5, 13);
|
* var path = new Path.Star(new Point(0, 0), 6, 5, 13);
|
||||||
|
|
|
@ -97,7 +97,7 @@ var Color = Base.extend(new function() {
|
||||||
cached = colorCache[string] = [
|
cached = colorCache[string] = [
|
||||||
data[0] / 255,
|
data[0] / 255,
|
||||||
data[1] / 255,
|
data[1] / 255,
|
||||||
data[2] / 255
|
data[2] / 255
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
components = cached.slice();
|
components = cached.slice();
|
||||||
|
@ -367,7 +367,7 @@ var Color = Base.extend(new function() {
|
||||||
* as an alternative to providing a gradient object<br>
|
* as an alternative to providing a gradient object<br>
|
||||||
*
|
*
|
||||||
* @name Color#initialize
|
* @name Color#initialize
|
||||||
* @param {Object} object an object describing the components and
|
* @param {Object} object an object describing the components and
|
||||||
* properties of the color.
|
* properties of the color.
|
||||||
*
|
*
|
||||||
* @example {@paperscript}
|
* @example {@paperscript}
|
||||||
|
@ -399,7 +399,7 @@ var Color = Base.extend(new function() {
|
||||||
* // the path and to position the gradient color:
|
* // the path and to position the gradient color:
|
||||||
* var topLeft = view.center - [80, 80];
|
* var topLeft = view.center - [80, 80];
|
||||||
* var bottomRight = view.center + [80, 80];
|
* var bottomRight = view.center + [80, 80];
|
||||||
*
|
*
|
||||||
* var path = new Path.Rectangle({
|
* var path = new Path.Rectangle({
|
||||||
* topLeft: topLeft,
|
* topLeft: topLeft,
|
||||||
* bottomRight: bottomRight,
|
* bottomRight: bottomRight,
|
||||||
|
@ -1087,7 +1087,7 @@ var Color = Base.extend(new function() {
|
||||||
* center: view.center,
|
* center: view.center,
|
||||||
* radius: view.bounds.height * 0.4
|
* radius: view.bounds.height * 0.4
|
||||||
* });
|
* });
|
||||||
*
|
*
|
||||||
* path.fillColor = {
|
* path.fillColor = {
|
||||||
* gradient: {
|
* gradient: {
|
||||||
* stops: ['yellow', 'red', 'black'],
|
* stops: ['yellow', 'red', 'black'],
|
||||||
|
@ -1096,7 +1096,7 @@ var Color = Base.extend(new function() {
|
||||||
* origin: path.position,
|
* origin: path.position,
|
||||||
* destination: path.bounds.rightCenter
|
* destination: path.bounds.rightCenter
|
||||||
* };
|
* };
|
||||||
*
|
*
|
||||||
* function onMouseMove(event) {
|
* function onMouseMove(event) {
|
||||||
* // Set the origin highlight of the path's gradient color
|
* // Set the origin highlight of the path's gradient color
|
||||||
* // to the position of the mouse:
|
* // to the position of the mouse:
|
||||||
|
|
|
@ -14,7 +14,7 @@
|
||||||
* @name Gradient
|
* @name Gradient
|
||||||
*
|
*
|
||||||
* @class The Gradient object.
|
* @class The Gradient object.
|
||||||
*
|
*
|
||||||
* @classexample {@paperscript height=300}
|
* @classexample {@paperscript height=300}
|
||||||
* // Applying a linear gradient color containing evenly distributed
|
* // Applying a linear gradient color containing evenly distributed
|
||||||
* // color stops:
|
* // color stops:
|
||||||
|
@ -23,7 +23,7 @@
|
||||||
* // the path and to position the gradient color:
|
* // the path and to position the gradient color:
|
||||||
* var topLeft = view.center - [80, 80];
|
* var topLeft = view.center - [80, 80];
|
||||||
* var bottomRight = view.center + [80, 80];
|
* var bottomRight = view.center + [80, 80];
|
||||||
*
|
*
|
||||||
* // Create a rectangle shaped path between
|
* // Create a rectangle shaped path between
|
||||||
* // the topLeft and bottomRight points:
|
* // the topLeft and bottomRight points:
|
||||||
* var path = new Path.Rectangle({
|
* var path = new Path.Rectangle({
|
||||||
|
@ -39,7 +39,7 @@
|
||||||
* destination: bottomRight
|
* destination: bottomRight
|
||||||
* }
|
* }
|
||||||
* });
|
* });
|
||||||
*
|
*
|
||||||
* @classexample {@paperscript height=300}
|
* @classexample {@paperscript height=300}
|
||||||
* // Create a circle shaped path at the center of the view,
|
* // Create a circle shaped path at the center of the view,
|
||||||
* // using 40% of the height of the view as its radius
|
* // using 40% of the height of the view as its radius
|
||||||
|
@ -48,7 +48,7 @@
|
||||||
* center: view.center,
|
* center: view.center,
|
||||||
* radius: view.bounds.height * 0.4
|
* radius: view.bounds.height * 0.4
|
||||||
* });
|
* });
|
||||||
*
|
*
|
||||||
* // Fill the path with a radial gradient color with three stops:
|
* // Fill the path with a radial gradient color with three stops:
|
||||||
* // yellow from 0% to 5%, mix between red from 5% to 20%,
|
* // yellow from 0% to 5%, mix between red from 5% to 20%,
|
||||||
* // mix between red and black from 20% to 100%:
|
* // mix between red and black from 20% to 100%:
|
||||||
|
|
|
@ -56,7 +56,7 @@ var GradientStop = Base.extend(/** @lends GradientStop# */{
|
||||||
},
|
},
|
||||||
|
|
||||||
_serialize: function(options, dictionary) {
|
_serialize: function(options, dictionary) {
|
||||||
return Base.serialize([this._color, this._rampPoint], options, true,
|
return Base.serialize([this._color, this._rampPoint], options, true,
|
||||||
dictionary);
|
dictionary);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -88,7 +88,7 @@ var GradientStop = Base.extend(/** @lends GradientStop# */{
|
||||||
* center: view.center,
|
* center: view.center,
|
||||||
* radius: view.bounds.height * 0.4
|
* radius: view.bounds.height * 0.4
|
||||||
* });
|
* });
|
||||||
*
|
*
|
||||||
* path.fillColor = {
|
* path.fillColor = {
|
||||||
* gradient: {
|
* gradient: {
|
||||||
* stops: [['yellow', 0.05], ['red', 0.2], ['black', 1]],
|
* stops: [['yellow', 0.05], ['red', 0.2], ['black', 1]],
|
||||||
|
@ -97,15 +97,15 @@ var GradientStop = Base.extend(/** @lends GradientStop# */{
|
||||||
* origin: path.position,
|
* origin: path.position,
|
||||||
* destination: path.bounds.rightCenter
|
* destination: path.bounds.rightCenter
|
||||||
* };
|
* };
|
||||||
*
|
*
|
||||||
* var gradient = path.fillColor.gradient;
|
* var gradient = path.fillColor.gradient;
|
||||||
*
|
*
|
||||||
* // This function is called each frame of the animation:
|
* // This function is called each frame of the animation:
|
||||||
* function onFrame(event) {
|
* function onFrame(event) {
|
||||||
* var blackStop = gradient.stops[2];
|
* var blackStop = gradient.stops[2];
|
||||||
* // Animate the rampPoint between 0.7 and 0.9:
|
* // Animate the rampPoint between 0.7 and 0.9:
|
||||||
* blackStop.rampPoint = Math.sin(event.time * 5) * 0.1 + 0.8;
|
* blackStop.rampPoint = Math.sin(event.time * 5) * 0.1 + 0.8;
|
||||||
*
|
*
|
||||||
* // Animate the rampPoint between 0.2 and 0.4
|
* // Animate the rampPoint between 0.2 and 0.4
|
||||||
* var redStop = gradient.stops[1];
|
* var redStop = gradient.stops[1];
|
||||||
* redStop.rampPoint = Math.sin(event.time * 3) * 0.1 + 0.3;
|
* redStop.rampPoint = Math.sin(event.time * 3) * 0.1 + 0.3;
|
||||||
|
@ -137,7 +137,7 @@ var GradientStop = Base.extend(/** @lends GradientStop# */{
|
||||||
* center: view.center,
|
* center: view.center,
|
||||||
* radius: view.bounds.height * 0.4
|
* radius: view.bounds.height * 0.4
|
||||||
* });
|
* });
|
||||||
*
|
*
|
||||||
* path.fillColor = {
|
* path.fillColor = {
|
||||||
* gradient: {
|
* gradient: {
|
||||||
* stops: [['yellow', 0.05], ['red', 0.2], ['black', 1]],
|
* stops: [['yellow', 0.05], ['red', 0.2], ['black', 1]],
|
||||||
|
@ -146,15 +146,15 @@ var GradientStop = Base.extend(/** @lends GradientStop# */{
|
||||||
* origin: path.position,
|
* origin: path.position,
|
||||||
* destination: path.bounds.rightCenter
|
* destination: path.bounds.rightCenter
|
||||||
* };
|
* };
|
||||||
*
|
*
|
||||||
* var redStop = path.fillColor.gradient.stops[1];
|
* var redStop = path.fillColor.gradient.stops[1];
|
||||||
* var blackStop = path.fillColor.gradient.stops[2];
|
* var blackStop = path.fillColor.gradient.stops[2];
|
||||||
*
|
*
|
||||||
* // This function is called each frame of the animation:
|
* // This function is called each frame of the animation:
|
||||||
* function onFrame(event) {
|
* function onFrame(event) {
|
||||||
* // Animate the rampPoint between 0.7 and 0.9:
|
* // Animate the rampPoint between 0.7 and 0.9:
|
||||||
* blackStop.rampPoint = Math.sin(event.time * 5) * 0.1 + 0.8;
|
* blackStop.rampPoint = Math.sin(event.time * 5) * 0.1 + 0.8;
|
||||||
*
|
*
|
||||||
* // Animate the rampPoint between 0.2 and 0.4
|
* // Animate the rampPoint between 0.2 and 0.4
|
||||||
* redStop.rampPoint = Math.sin(event.time * 3) * 0.1 + 0.3;
|
* redStop.rampPoint = Math.sin(event.time * 3) * 0.1 + 0.3;
|
||||||
* }
|
* }
|
||||||
|
|
|
@ -43,20 +43,20 @@
|
||||||
* fillColor: 'red',
|
* fillColor: 'red',
|
||||||
* justification: 'center'
|
* justification: 'center'
|
||||||
* };
|
* };
|
||||||
*
|
*
|
||||||
* @classexample {@paperscript} // Styling groups
|
* @classexample {@paperscript} // Styling groups
|
||||||
* var path1 = new Path.Circle({
|
* var path1 = new Path.Circle({
|
||||||
* center: [100, 50],
|
* center: [100, 50],
|
||||||
* radius: 30
|
* radius: 30
|
||||||
* });
|
* });
|
||||||
*
|
*
|
||||||
* var path2 = new Path.Rectangle({
|
* var path2 = new Path.Rectangle({
|
||||||
* from: [170, 20],
|
* from: [170, 20],
|
||||||
* to: [230, 80]
|
* to: [230, 80]
|
||||||
* });
|
* });
|
||||||
*
|
*
|
||||||
* var group = new Group(path1, path2);
|
* var group = new Group(path1, path2);
|
||||||
*
|
*
|
||||||
* // All styles set on a group are automatically
|
* // All styles set on a group are automatically
|
||||||
* // set on the children of the group:
|
* // set on the children of the group:
|
||||||
* group.style = {
|
* group.style = {
|
||||||
|
@ -65,7 +65,7 @@
|
||||||
* strokeWidth: 4,
|
* strokeWidth: 4,
|
||||||
* strokeCap: 'round'
|
* strokeCap: 'round'
|
||||||
* };
|
* };
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
var Style = Base.extend(new function() {
|
var Style = Base.extend(new function() {
|
||||||
// windingRule / resolution / fillOverprint / strokeOverprint are currently
|
// windingRule / resolution / fillOverprint / strokeOverprint are currently
|
||||||
|
@ -161,7 +161,7 @@ var Style = Base.extend(new function() {
|
||||||
value._owner = owner;
|
value._owner = owner;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Note: We do not convert the values to Colors in the
|
// Note: We do not convert the values to Colors in the
|
||||||
// setter. This only happens once the getter is called.
|
// setter. This only happens once the getter is called.
|
||||||
this._values[key] = value;
|
this._values[key] = value;
|
||||||
// Notify the owner of the style change STYLE is always set,
|
// Notify the owner of the style change STYLE is always set,
|
||||||
|
|
|
@ -310,7 +310,7 @@ new function() {
|
||||||
: type === 'color'
|
: type === 'color'
|
||||||
? value.gradient
|
? value.gradient
|
||||||
? exportGradient(value, item)
|
? exportGradient(value, item)
|
||||||
// true for noAlpha, see above
|
// true for noAlpha, see above
|
||||||
: value.toCSS(true)
|
: value.toCSS(true)
|
||||||
: type === 'array'
|
: type === 'array'
|
||||||
? value.join(',')
|
? value.join(',')
|
||||||
|
|
|
@ -300,7 +300,7 @@ new function() {
|
||||||
|
|
||||||
// Attributes and Styles
|
// Attributes and Styles
|
||||||
|
|
||||||
// NOTE: Parmeter sequence for all apply*() functions is:
|
// NOTE: Parmeter sequence for all apply*() functions is:
|
||||||
// (item, value, name, node) rather than (item, node, name, value),
|
// (item, value, name, node) rather than (item, node, name, value),
|
||||||
// so we can ommit the less likely parameters from right to left.
|
// so we can ommit the less likely parameters from right to left.
|
||||||
|
|
||||||
|
@ -508,7 +508,7 @@ new function() {
|
||||||
|
|
||||||
var definitions = {};
|
var definitions = {};
|
||||||
function getDefinition(value) {
|
function getDefinition(value) {
|
||||||
// When url() comes from a style property, '#'' seems to be missing on
|
// When url() comes from a style property, '#'' seems to be missing on
|
||||||
// WebKit, so let's make it optional here:
|
// WebKit, so let's make it optional here:
|
||||||
var match = value && value.match(/\((?:#|)([^)']+)/);
|
var match = value && value.match(/\((?:#|)([^)']+)/);
|
||||||
return match && definitions[match[1]];
|
return match && definitions[match[1]];
|
||||||
|
|
|
@ -167,7 +167,7 @@ var Tool = PaperScopeItem.extend(/** @lends Tool# */{
|
||||||
* var path = new Path({
|
* var path = new Path({
|
||||||
* strokeColor: 'black'
|
* strokeColor: 'black'
|
||||||
* });
|
* });
|
||||||
*
|
*
|
||||||
* function onMouseDrag(event) {
|
* function onMouseDrag(event) {
|
||||||
* // Add a segment to the path at the position of the mouse:
|
* // Add a segment to the path at the position of the mouse:
|
||||||
* path.add(event.point);
|
* path.add(event.point);
|
||||||
|
@ -192,7 +192,7 @@ var Tool = PaperScopeItem.extend(/** @lends Tool# */{
|
||||||
* radius: 10,
|
* radius: 10,
|
||||||
* fillColor: 'black'
|
* fillColor: 'black'
|
||||||
* });
|
* });
|
||||||
*
|
*
|
||||||
* function onMouseMove(event) {
|
* function onMouseMove(event) {
|
||||||
* // Whenever the user moves the mouse, move the path
|
* // Whenever the user moves the mouse, move the path
|
||||||
* // to that position:
|
* // to that position:
|
||||||
|
@ -408,7 +408,7 @@ var Tool = PaperScopeItem.extend(/** @lends Tool# */{
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
* {@grouptitle Event Handling}
|
* {@grouptitle Event Handling}
|
||||||
*
|
*
|
||||||
* Attach an event handler to the tool.
|
* Attach an event handler to the tool.
|
||||||
*
|
*
|
||||||
* @name Tool#attach
|
* @name Tool#attach
|
||||||
|
|
|
@ -169,7 +169,7 @@ var ToolEvent = Event.extend(/** @lends ToolEvent# */{
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The item at the position of the mouse (if any).
|
* The item at the position of the mouse (if any).
|
||||||
*
|
*
|
||||||
* If the item is contained within one or more {@link Group} or
|
* If the item is contained within one or more {@link Group} or
|
||||||
* {@link CompoundPath} items, the most top level group or compound path
|
* {@link CompoundPath} items, the most top level group or compound path
|
||||||
* that it is contained within is returned.
|
* that it is contained within is returned.
|
||||||
|
@ -193,7 +193,7 @@ var ToolEvent = Event.extend(/** @lends ToolEvent# */{
|
||||||
}
|
}
|
||||||
return this._item;
|
return this._item;
|
||||||
},
|
},
|
||||||
|
|
||||||
setItem: function(item) {
|
setItem: function(item) {
|
||||||
this._item = item;
|
this._item = item;
|
||||||
},
|
},
|
||||||
|
|
|
@ -20,14 +20,14 @@ var CanvasView = View.extend(/** @lends CanvasView# */{
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Creates a view object that wraps a canvas element.
|
* Creates a view object that wraps a canvas element.
|
||||||
*
|
*
|
||||||
* @name CanvasView#initialize
|
* @name CanvasView#initialize
|
||||||
* @param {HTMLCanvasElement} canvas the canvas object that this view should
|
* @param {HTMLCanvasElement} canvas the canvas object that this view should
|
||||||
* wrap
|
* wrap
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Creates a view object that wraps a newly created canvas element.
|
* Creates a view object that wraps a newly created canvas element.
|
||||||
*
|
*
|
||||||
* @name CanvasView#initialize
|
* @name CanvasView#initialize
|
||||||
* @param {Size} size the size of the canvas to be created
|
* @param {Size} size the size of the canvas to be created
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -207,4 +207,4 @@ var Component = Base.extend(Callback, /** @lends Component# */{
|
||||||
reset: function() {
|
reset: function() {
|
||||||
this.setValue(this._defaultValue);
|
this.setValue(this._defaultValue);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -172,4 +172,4 @@ var Key = new function() {
|
||||||
return !!keyMap[key];
|
return !!keyMap[key];
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
|
@ -181,7 +181,7 @@ var View = Base.extend(Callback, /** @lends View# */{
|
||||||
onResize: {}
|
onResize: {}
|
||||||
},
|
},
|
||||||
|
|
||||||
// These are default values for event related properties on the prototype.
|
// These are default values for event related properties on the prototype.
|
||||||
// Writing item._count++ does not change the defaults, it creates / updates
|
// Writing item._count++ does not change the defaults, it creates / updates
|
||||||
// the property on the instance. Useful!
|
// the property on the instance. Useful!
|
||||||
_animate: false,
|
_animate: false,
|
||||||
|
@ -550,7 +550,7 @@ var View = Base.extend(Callback, /** @lends View# */{
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* {@grouptitle Event Handling}
|
* {@grouptitle Event Handling}
|
||||||
*
|
*
|
||||||
* Attach an event handler to the view.
|
* Attach an event handler to the view.
|
||||||
*
|
*
|
||||||
* @name View#attach
|
* @name View#attach
|
||||||
|
@ -559,18 +559,18 @@ var View = Base.extend(Callback, /** @lends View# */{
|
||||||
* @param {String('frame', 'resize')} type the event type
|
* @param {String('frame', 'resize')} type the event type
|
||||||
* @param {Function} function The function to be called when the event
|
* @param {Function} function The function to be called when the event
|
||||||
* occurs
|
* occurs
|
||||||
*
|
*
|
||||||
* @example {@paperscript}
|
* @example {@paperscript}
|
||||||
* // Create a rectangle shaped path with its top left point at:
|
* // Create a rectangle shaped path with its top left point at:
|
||||||
* // {x: 50, y: 25} and a size of {width: 50, height: 50}
|
* // {x: 50, y: 25} and a size of {width: 50, height: 50}
|
||||||
* var path = new Path.Rectangle(new Point(50, 25), new Size(50, 50));
|
* var path = new Path.Rectangle(new Point(50, 25), new Size(50, 50));
|
||||||
* path.fillColor = 'black';
|
* path.fillColor = 'black';
|
||||||
*
|
*
|
||||||
* var frameHandler = function(event) {
|
* var frameHandler = function(event) {
|
||||||
* // Every frame, rotate the path by 3 degrees:
|
* // Every frame, rotate the path by 3 degrees:
|
||||||
* path.rotate(3);
|
* path.rotate(3);
|
||||||
* };
|
* };
|
||||||
*
|
*
|
||||||
* view.on('frame', frameHandler);
|
* view.on('frame', frameHandler);
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
|
@ -585,12 +585,12 @@ var View = Base.extend(Callback, /** @lends View# */{
|
||||||
* // {x: 50, y: 25} and a size of {width: 50, height: 50}
|
* // {x: 50, y: 25} and a size of {width: 50, height: 50}
|
||||||
* var path = new Path.Rectangle(new Point(50, 25), new Size(50, 50));
|
* var path = new Path.Rectangle(new Point(50, 25), new Size(50, 50));
|
||||||
* path.fillColor = 'black';
|
* path.fillColor = 'black';
|
||||||
*
|
*
|
||||||
* var frameHandler = function(event) {
|
* var frameHandler = function(event) {
|
||||||
* // Every frame, rotate the path by 3 degrees:
|
* // Every frame, rotate the path by 3 degrees:
|
||||||
* path.rotate(3);
|
* path.rotate(3);
|
||||||
* };
|
* };
|
||||||
*
|
*
|
||||||
* view.on({
|
* view.on({
|
||||||
* frame: frameHandler
|
* frame: frameHandler
|
||||||
* });
|
* });
|
||||||
|
@ -604,22 +604,22 @@ var View = Base.extend(Callback, /** @lends View# */{
|
||||||
* @function
|
* @function
|
||||||
* @param {String('frame', 'resize')} type the event type
|
* @param {String('frame', 'resize')} type the event type
|
||||||
* @param {Function} function The function to be detached
|
* @param {Function} function The function to be detached
|
||||||
*
|
*
|
||||||
* @example {@paperscript}
|
* @example {@paperscript}
|
||||||
* // Create a rectangle shaped path with its top left point at:
|
* // Create a rectangle shaped path with its top left point at:
|
||||||
* // {x: 50, y: 25} and a size of {width: 50, height: 50}
|
* // {x: 50, y: 25} and a size of {width: 50, height: 50}
|
||||||
* var path = new Path.Rectangle(new Point(50, 25), new Size(50, 50));
|
* var path = new Path.Rectangle(new Point(50, 25), new Size(50, 50));
|
||||||
* path.fillColor = 'black';
|
* path.fillColor = 'black';
|
||||||
*
|
*
|
||||||
* var frameHandler = function(event) {
|
* var frameHandler = function(event) {
|
||||||
* // Every frame, rotate the path by 3 degrees:
|
* // Every frame, rotate the path by 3 degrees:
|
||||||
* path.rotate(3);
|
* path.rotate(3);
|
||||||
* };
|
* };
|
||||||
*
|
*
|
||||||
* view.on({
|
* view.on({
|
||||||
* frame: frameHandler
|
* frame: frameHandler
|
||||||
* });
|
* });
|
||||||
*
|
*
|
||||||
* // When the user presses the mouse,
|
* // When the user presses the mouse,
|
||||||
* // detach the frame handler from the view:
|
* // detach the frame handler from the view:
|
||||||
* function onMouseDown(event) {
|
* function onMouseDown(event) {
|
||||||
|
|
|
@ -140,7 +140,7 @@ var Numerical = new function() {
|
||||||
x = nx >= b ? 0.5 * (a + b) : nx;
|
x = nx >= b ? 0.5 * (a + b) : nx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Return the best result even though we haven't gotten close
|
// Return the best result even though we haven't gotten close
|
||||||
// enough to the root... (In paper.js this never seems to happen).
|
// enough to the root... (In paper.js this never seems to happen).
|
||||||
return x;
|
return x;
|
||||||
},
|
},
|
||||||
|
|
|
@ -139,7 +139,7 @@ function compareStyles(style, style2, checkIdentity) {
|
||||||
if (style[key].type === 'gradient' && checkIdentity) {
|
if (style[key].type === 'gradient' && checkIdentity) {
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return style[key].gradient === style2[key].gradient;
|
return style[key].gradient === style2[key].gradient;
|
||||||
}, true, 'The ' + key
|
}, true, 'The ' + key
|
||||||
+ '.gradient should point to the same object:');
|
+ '.gradient should point to the same object:');
|
||||||
}
|
}
|
||||||
compareColors(style[key], style2[key],
|
compareColors(style[key], style2[key],
|
||||||
|
@ -402,4 +402,4 @@ function createSVG(xml) {
|
||||||
return new DOMParser().parseFromString(
|
return new DOMParser().parseFromString(
|
||||||
'<svg xmlns="http://www.w3.org/2000/svg">' + xml + '</svg>',
|
'<svg xmlns="http://www.w3.org/2000/svg">' + xml + '</svg>',
|
||||||
'text/xml');
|
'text/xml');
|
||||||
}
|
}
|
||||||
|
|
|
@ -85,4 +85,4 @@ test('Cloning with non-standard clockwise settings', function() {
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return path3.clockwise;
|
return path3.clockwise;
|
||||||
}, true);
|
}, true);
|
||||||
});
|
});
|
||||||
|
|
|
@ -107,4 +107,4 @@ test('group.insertChildren(0, otherGroup.children)', function() {
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return group.children.length;
|
return group.children.length;
|
||||||
}, 0);
|
}, 0);
|
||||||
});
|
});
|
||||||
|
|
|
@ -14,7 +14,7 @@ module('HitResult');
|
||||||
|
|
||||||
test('hitting a filled shape', function() {
|
test('hitting a filled shape', function() {
|
||||||
var path = new Path.Circle([50, 50], 50);
|
var path = new Path.Circle([50, 50], 50);
|
||||||
|
|
||||||
var hitResult = path.hitTest([75, 75]);
|
var hitResult = path.hitTest([75, 75]);
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return hitResult == null;
|
return hitResult == null;
|
||||||
|
@ -45,7 +45,7 @@ test('the item on top should be returned', function() {
|
||||||
|
|
||||||
test('hitting a stroked path', function() {
|
test('hitting a stroked path', function() {
|
||||||
var path = new Path([0, 0], [50, 0]);
|
var path = new Path([0, 0], [50, 0]);
|
||||||
|
|
||||||
// We are hit testing with an offset of 5pt on a path with a stroke width
|
// We are hit testing with an offset of 5pt on a path with a stroke width
|
||||||
// of 10:
|
// of 10:
|
||||||
|
|
||||||
|
@ -68,7 +68,7 @@ test('hitting a stroked path', function() {
|
||||||
test('hitting a selected path', function() {
|
test('hitting a selected path', function() {
|
||||||
var path = new Path.Circle([50, 50], 50);
|
var path = new Path.Circle([50, 50], 50);
|
||||||
path.fillColor = 'red';
|
path.fillColor = 'red';
|
||||||
|
|
||||||
var hitResult = paper.project.hitTest([75, 75], {
|
var hitResult = paper.project.hitTest([75, 75], {
|
||||||
selected: true
|
selected: true
|
||||||
});
|
});
|
||||||
|
@ -90,16 +90,16 @@ test('hitting path segments', function() {
|
||||||
var path = new Path([0, 0], [10, 10], [20, 0]);
|
var path = new Path([0, 0], [10, 10], [20, 0]);
|
||||||
|
|
||||||
var hitResult = paper.project.hitTest([10, 10]);
|
var hitResult = paper.project.hitTest([10, 10]);
|
||||||
|
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return !!hitResult;
|
return !!hitResult;
|
||||||
}, true, 'A HitResult should be returned.');
|
}, true, 'A HitResult should be returned.');
|
||||||
|
|
||||||
if (hitResult) {
|
if (hitResult) {
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return hitResult.type;
|
return hitResult.type;
|
||||||
}, 'segment');
|
}, 'segment');
|
||||||
|
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return hitResult.item == path;
|
return hitResult.item == path;
|
||||||
}, true);
|
}, true);
|
||||||
|
@ -117,7 +117,7 @@ test('hitting the center of a path', function() {
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return !!hitResult;
|
return !!hitResult;
|
||||||
}, true, 'A HitResult should be returned.');
|
}, true, 'A HitResult should be returned.');
|
||||||
|
|
||||||
if (hitResult) {
|
if (hitResult) {
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return hitResult.point.toString();
|
return hitResult.point.toString();
|
||||||
|
@ -148,12 +148,12 @@ test('hitting the center of a path with tolerance', function() {
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return !!hitResult;
|
return !!hitResult;
|
||||||
}, true, 'A HitResult should be returned.');
|
}, true, 'A HitResult should be returned.');
|
||||||
|
|
||||||
if (hitResult) {
|
if (hitResult) {
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return !!hitResult.point;
|
return !!hitResult.point;
|
||||||
}, true, 'HitResult#point should not be empty');
|
}, true, 'HitResult#point should not be empty');
|
||||||
|
|
||||||
if (hitResult.point) {
|
if (hitResult.point) {
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return hitResult.point.toString();
|
return hitResult.point.toString();
|
||||||
|
@ -186,12 +186,12 @@ test('hitting path handles', function() {
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return !!hitResult;
|
return !!hitResult;
|
||||||
}, true, 'A HitResult should be returned (1)');
|
}, true, 'A HitResult should be returned (1)');
|
||||||
|
|
||||||
if (hitResult) {
|
if (hitResult) {
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return hitResult.type;
|
return hitResult.type;
|
||||||
}, 'handle-out');
|
}, 'handle-out');
|
||||||
|
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return hitResult.item == path;
|
return hitResult.item == path;
|
||||||
}, true);
|
}, true);
|
||||||
|
@ -226,16 +226,16 @@ test('hitting path handles (2)', function() {
|
||||||
var hitResult = paper.project.hitTest([50, 50], {
|
var hitResult = paper.project.hitTest([50, 50], {
|
||||||
handles: true
|
handles: true
|
||||||
});
|
});
|
||||||
|
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return !!hitResult;
|
return !!hitResult;
|
||||||
}, true, 'A HitResult should be returned (1)');
|
}, true, 'A HitResult should be returned (1)');
|
||||||
|
|
||||||
if (hitResult) {
|
if (hitResult) {
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return hitResult.type;
|
return hitResult.type;
|
||||||
}, 'handle-out');
|
}, 'handle-out');
|
||||||
|
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return hitResult.item == path;
|
return hitResult.item == path;
|
||||||
}, true);
|
}, true);
|
||||||
|
@ -316,12 +316,12 @@ test('hitting path ends', function() {
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return !!hitResult;
|
return !!hitResult;
|
||||||
}, true, 'A HitResult should be returned (1)');
|
}, true, 'A HitResult should be returned (1)');
|
||||||
|
|
||||||
if (hitResult) {
|
if (hitResult) {
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return hitResult.type;
|
return hitResult.type;
|
||||||
}, 'segment');
|
}, 'segment');
|
||||||
|
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return hitResult.segment == path.lastSegment;
|
return hitResult.segment == path.lastSegment;
|
||||||
}, true);
|
}, true);
|
||||||
|
@ -358,7 +358,7 @@ test('hitting path bounding box', function() {
|
||||||
});
|
});
|
||||||
|
|
||||||
equals(!!hitResult, true, 'A HitResult should be returned');
|
equals(!!hitResult, true, 'A HitResult should be returned');
|
||||||
|
|
||||||
if (hitResult) {
|
if (hitResult) {
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return hitResult.type;
|
return hitResult.type;
|
||||||
|
@ -388,7 +388,7 @@ test('hitting raster bounding box', function() {
|
||||||
});
|
});
|
||||||
|
|
||||||
equals(!!hitResult, true, 'A HitResult should be returned');
|
equals(!!hitResult, true, 'A HitResult should be returned');
|
||||||
|
|
||||||
if (hitResult) {
|
if (hitResult) {
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return hitResult.type;
|
return hitResult.type;
|
||||||
|
@ -416,14 +416,14 @@ test('hitting guides', function() {
|
||||||
|
|
||||||
equals(result && result.item, copy,
|
equals(result && result.item, copy,
|
||||||
'The copy should be returned, because it is on top.');
|
'The copy should be returned, because it is on top.');
|
||||||
|
|
||||||
path.guide = true;
|
path.guide = true;
|
||||||
|
|
||||||
var result = paper.project.hitTest(path.position, {
|
var result = paper.project.hitTest(path.position, {
|
||||||
guides: true,
|
guides: true,
|
||||||
fill: true
|
fill: true
|
||||||
});
|
});
|
||||||
|
|
||||||
equals(result && result.item, path,
|
equals(result && result.item, path,
|
||||||
'The path should be returned, because it is a guide.');
|
'The path should be returned, because it is a guide.');
|
||||||
});
|
});
|
||||||
|
@ -433,27 +433,27 @@ test('hitting raster items', function() {
|
||||||
var path = new Path.Rectangle(new Point(), new Size(320, 240));
|
var path = new Path.Rectangle(new Point(), new Size(320, 240));
|
||||||
path.fillColor = 'red';
|
path.fillColor = 'red';
|
||||||
var raster = path.rasterize(72);
|
var raster = path.rasterize(72);
|
||||||
|
|
||||||
var hitResult = paper.project.hitTest(new Point(160, 120));
|
var hitResult = paper.project.hitTest(new Point(160, 120));
|
||||||
|
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return hitResult && hitResult.item == raster;
|
return hitResult && hitResult.item == raster;
|
||||||
}, true, 'Hit raster item before moving');
|
}, true, 'Hit raster item before moving');
|
||||||
|
|
||||||
// Move the raster:
|
// Move the raster:
|
||||||
raster.translate(100, 100);
|
raster.translate(100, 100);
|
||||||
|
|
||||||
var hitResult = paper.project.hitTest(new Point(160, 120));
|
var hitResult = paper.project.hitTest(new Point(160, 120));
|
||||||
|
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return hitResult && hitResult.item == raster;
|
return hitResult && hitResult.item == raster;
|
||||||
}, true, 'Hit raster item after moving');
|
}, true, 'Hit raster item after moving');
|
||||||
});
|
});
|
||||||
|
|
||||||
test('hitting path with a text item in the project', function() {
|
test('hitting path with a text item in the project', function() {
|
||||||
var path = new Path.Rectangle(new Point(50, 50), new Point(100, 100));
|
var path = new Path.Rectangle(new Point(50, 50), new Point(100, 100));
|
||||||
path.fillColor = 'blue';
|
path.fillColor = 'blue';
|
||||||
|
|
||||||
var hitResult = paper.project.hitTest(new Point(75, 75));
|
var hitResult = paper.project.hitTest(new Point(75, 75));
|
||||||
|
|
||||||
equals(function() {
|
equals(function() {
|
||||||
|
@ -464,7 +464,7 @@ test('hitting path with a text item in the project', function() {
|
||||||
text1.content = "Text 1";
|
text1.content = "Text 1";
|
||||||
|
|
||||||
var hitResult = paper.project.hitTest(new Point(75, 75));
|
var hitResult = paper.project.hitTest(new Point(75, 75));
|
||||||
|
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return !!hitResult;
|
return !!hitResult;
|
||||||
}, true, 'A hitresult should be returned.');
|
}, true, 'A hitresult should be returned.');
|
||||||
|
@ -472,7 +472,7 @@ test('hitting path with a text item in the project', function() {
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return !!hitResult && hitResult.item == path;
|
return !!hitResult && hitResult.item == path;
|
||||||
}, true, 'We should have hit the path');
|
}, true, 'We should have hit the path');
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
test('Check hit testing of items that come after a transformed group.', function() {
|
test('Check hit testing of items that come after a transformed group.', function() {
|
||||||
|
@ -641,4 +641,4 @@ test('Hit testing fill with tolerance', function() {
|
||||||
}, true);
|
}, true);
|
||||||
});
|
});
|
||||||
|
|
||||||
// TODO: project.hitTest(point, {type: AnItemType});
|
// TODO: project.hitTest(point, {type: AnItemType});
|
||||||
|
|
|
@ -80,7 +80,7 @@ test('Item#insertAbove(item) / Item#insertBelow(item)', function() {
|
||||||
testMove(function() { item2.insertBelow(item0) }, [1,2,0]);
|
testMove(function() { item2.insertBelow(item0) }, [1,2,0]);
|
||||||
testMove(function() { item2.insertBelow(item1) }, [0,2,1]);
|
testMove(function() { item2.insertBelow(item1) }, [0,2,1]);
|
||||||
testMove(function() { item2.insertBelow(item2) }, [0,1,2]);
|
testMove(function() { item2.insertBelow(item2) }, [0,1,2]);
|
||||||
|
|
||||||
testMove(function() { item0.insertAbove(item0) }, [0,1,2]);
|
testMove(function() { item0.insertAbove(item0) }, [0,1,2]);
|
||||||
testMove(function() { item0.insertAbove(item1) }, [1,0,2]);
|
testMove(function() { item0.insertAbove(item1) }, [1,0,2]);
|
||||||
testMove(function() { item0.insertAbove(item2) }, [2,0,1]);
|
testMove(function() { item0.insertAbove(item2) }, [2,0,1]);
|
||||||
|
|
|
@ -27,13 +27,13 @@ test('Circles', function() {
|
||||||
var path = new Path.Ellipse(rectangle);
|
var path = new Path.Ellipse(rectangle);
|
||||||
path.fillColor = 'black';
|
path.fillColor = 'black';
|
||||||
console.log('JSON', path.exportJSON());
|
console.log('JSON', path.exportJSON());
|
||||||
|
|
||||||
var topLeft = new Point(5, 400);
|
var topLeft = new Point(5, 400);
|
||||||
var size = new Size(100, 50);
|
var size = new Size(100, 50);
|
||||||
var rectangle = new Rectangle(topLeft, size);
|
var rectangle = new Rectangle(topLeft, size);
|
||||||
var path = new Path.Ellipse(rectangle);
|
var path = new Path.Ellipse(rectangle);
|
||||||
path.fillColor = 'yellow';
|
path.fillColor = 'yellow';
|
||||||
|
|
||||||
var path = new Path.Circle(new Point(50, 50), 25);
|
var path = new Path.Circle(new Point(50, 50), 25);
|
||||||
path.fillColor = 'red';
|
path.fillColor = 'red';
|
||||||
|
|
||||||
|
@ -90,7 +90,7 @@ test('Rectangle testing', function() {
|
||||||
path1.opacity = .1;
|
path1.opacity = .1;
|
||||||
path1.dashArray = [5, 2];
|
path1.dashArray = [5, 2];
|
||||||
path1.dashOffset = 0;
|
path1.dashOffset = 0;
|
||||||
|
|
||||||
var point2 = new Point(75, 75);
|
var point2 = new Point(75, 75);
|
||||||
var point22 = new Point(100, 100);
|
var point22 = new Point(100, 100);
|
||||||
var path2 = new Path.Rectangle(point2, point22);
|
var path2 = new Path.Rectangle(point2, point22);
|
||||||
|
@ -99,13 +99,13 @@ test('Rectangle testing', function() {
|
||||||
path2.fillColor = 'blue';
|
path2.fillColor = 'blue';
|
||||||
path2.name = 'square2';
|
path2.name = 'square2';
|
||||||
path2.strokeCap = 'butt';
|
path2.strokeCap = 'butt';
|
||||||
|
|
||||||
var point3 = new Point(150, 150);
|
var point3 = new Point(150, 150);
|
||||||
var size3 = new Size(50, 50);
|
var size3 = new Size(50, 50);
|
||||||
var rectangle3 = new Rectangle(point3, size3);
|
var rectangle3 = new Rectangle(point3, size3);
|
||||||
var path3 = new Path.Rectangle(rectangle3);
|
var path3 = new Path.Rectangle(rectangle3);
|
||||||
path3.strokeColor = 'blue';
|
path3.strokeColor = 'blue';
|
||||||
|
|
||||||
var point4 = new Point(200, 200);
|
var point4 = new Point(200, 200);
|
||||||
var size4 = new Size(100, 100);
|
var size4 = new Size(100, 100);
|
||||||
var rectangle4 = new Rectangle(point4, size4);
|
var rectangle4 = new Rectangle(point4, size4);
|
||||||
|
@ -135,7 +135,7 @@ test('PointText testing', function() {
|
||||||
var text = new PointText(new Point(50, 100));
|
var text = new PointText(new Point(50, 100));
|
||||||
text.fillColor = 'black';
|
text.fillColor = 'black';
|
||||||
text.content = 'This is a test';
|
text.content = 'This is a test';
|
||||||
|
|
||||||
var text = new PointText(new Point(100, 150));
|
var text = new PointText(new Point(100, 150));
|
||||||
text.fillColor = 'red';
|
text.fillColor = 'red';
|
||||||
text.strokeWidth = '4';
|
text.strokeWidth = '4';
|
||||||
|
@ -207,4 +207,4 @@ test('Color', function() {
|
||||||
fillColor: new Color(1, 1, 0, 0.5)
|
fillColor: new Color(1, 1, 0, 0.5)
|
||||||
});
|
});
|
||||||
testExportImportJSON(paper.project);
|
testExportImportJSON(paper.project);
|
||||||
});
|
});
|
||||||
|
|
|
@ -156,7 +156,7 @@ test('path.bounds & path.strokeBounds with stroke styles', function() {
|
||||||
compareRectangles(path.bounds,
|
compareRectangles(path.bounds,
|
||||||
{ x: 199.01325, y: 166.78419, width: 113.50622, height: 90.96766 },
|
{ x: 199.01325, y: 166.78419, width: 113.50622, height: 90.96766 },
|
||||||
'square/round path.bounds');
|
'square/round path.bounds');
|
||||||
compareRectangles(path.strokeBounds,
|
compareRectangles(path.strokeBounds,
|
||||||
{ x: 178.06332, y: 151.78419, width: 149.45615, height: 120.96766 },
|
{ x: 178.06332, y: 151.78419, width: 149.45615, height: 120.96766 },
|
||||||
'square/strokeBounds path.bounds');
|
'square/strokeBounds path.bounds');
|
||||||
|
|
||||||
|
@ -226,4 +226,4 @@ test('path.strokeBounds with rectangles', function() {
|
||||||
compareRectangles(path.strokeBounds,
|
compareRectangles(path.strokeBounds,
|
||||||
{ x: 75, y: 75, width: 150, height: 150 },
|
{ x: 75, y: 75, width: 150, height: 150 },
|
||||||
'path.strokeBounds');
|
'path.strokeBounds');
|
||||||
});
|
});
|
||||||
|
|
|
@ -34,7 +34,7 @@ test('path.curves synchronisation', function() {
|
||||||
path.removeSegments(1, 2);
|
path.removeSegments(1, 2);
|
||||||
equals(path.segments.toString(), "{ point: { x: 0, y: 100 } },{ point: { x: 100, y: 100 } }", "path.segments: path.add(new Point(100, 100));\npath.removeSegments(1, 2);");
|
equals(path.segments.toString(), "{ point: { x: 0, y: 100 } },{ point: { x: 100, y: 100 } }", "path.segments: path.add(new Point(100, 100));\npath.removeSegments(1, 2);");
|
||||||
equals(path.curves.toString(), "{ point1: { x: 0, y: 100 }, point2: { x: 100, y: 100 } },{ point1: { x: 100, y: 100 }, point2: { x: 0, y: 100 } }", "path.curves: path.add(new Point(100, 100));\npath.removeSegments(1, 2);");
|
equals(path.curves.toString(), "{ point1: { x: 0, y: 100 }, point2: { x: 100, y: 100 } },{ point1: { x: 100, y: 100 }, point2: { x: 0, y: 100 } }", "path.curves: path.add(new Point(100, 100));\npath.removeSegments(1, 2);");
|
||||||
|
|
||||||
// Transform the path, and the curves length should be invalidated (first, force-cache the first segment's length by accessing it
|
// Transform the path, and the curves length should be invalidated (first, force-cache the first segment's length by accessing it
|
||||||
var length = path.curves[0].length;
|
var length = path.curves[0].length;
|
||||||
ok(path.curves[0]._length, 'Curve length does not appear to be cached');
|
ok(path.curves[0]._length, 'Curve length does not appear to be cached');
|
||||||
|
@ -47,7 +47,7 @@ test('path.curves synchronisation', function() {
|
||||||
var path = new Path(points);
|
var path = new Path(points);
|
||||||
equals(path.segments.length, 40, 'segments.length');
|
equals(path.segments.length, 40, 'segments.length');
|
||||||
equals(path.curves.length, 39, 'curves.length');
|
equals(path.curves.length, 39, 'curves.length');
|
||||||
path.removeSegments();
|
path.removeSegments();
|
||||||
equals(path.segments.length, 0, 'segments.length');
|
equals(path.segments.length, 0, 'segments.length');
|
||||||
equals(path.curves.length, 0, 'curves.length');
|
equals(path.curves.length, 0, 'curves.length');
|
||||||
});
|
});
|
||||||
|
|
|
@ -61,4 +61,4 @@ test('path.arcTo(from, through, to); where from, through and to all share the sa
|
||||||
error = e;
|
error = e;
|
||||||
}
|
}
|
||||||
equals(error != null, true, 'We expect this arcTo() command to throw an error');
|
equals(error != null, true, 'We expect this arcTo() command to throw an error');
|
||||||
});
|
});
|
||||||
|
|
|
@ -91,7 +91,7 @@ test('compare invalid line path functions', function() {
|
||||||
shape.setAttribute('y1', y1);
|
shape.setAttribute('y1', y1);
|
||||||
shape.setAttribute('x2', x2);
|
shape.setAttribute('x2', x2);
|
||||||
shape.setAttribute('y2', y2);
|
shape.setAttribute('y2', y2);
|
||||||
|
|
||||||
var line = new Path.Line([x1, y1], [x2, y2]);
|
var line = new Path.Line([x1, y1], [x2, y2]);
|
||||||
|
|
||||||
var exportedLine = line.exportSVG();
|
var exportedLine = line.exportSVG();
|
||||||
|
@ -129,7 +129,7 @@ test('compare rectangle values', function() {
|
||||||
var point = new Point(100, 100);
|
var point = new Point(100, 100);
|
||||||
var size = new Size(100, 100);
|
var size = new Size(100, 100);
|
||||||
var path = new Path.Rectangle(point, size);
|
var path = new Path.Rectangle(point, size);
|
||||||
|
|
||||||
var exportedRectangle = path.exportSVG();
|
var exportedRectangle = path.exportSVG();
|
||||||
|
|
||||||
var shapex1 = shape.getAttribute('x');
|
var shapex1 = shape.getAttribute('x');
|
||||||
|
@ -393,7 +393,7 @@ test('compare circle values', function() {
|
||||||
var shape = document.createElementNS(svgns, 'circle');
|
var shape = document.createElementNS(svgns, 'circle');
|
||||||
var cx = 100,
|
var cx = 100,
|
||||||
cy = 80,
|
cy = 80,
|
||||||
r = 50;
|
r = 50;
|
||||||
shape.setAttribute('cx', cx);
|
shape.setAttribute('cx', cx);
|
||||||
shape.setAttribute('cy', cy);
|
shape.setAttribute('cy', cy);
|
||||||
shape.setAttribute('r', r);
|
shape.setAttribute('r', r);
|
||||||
|
@ -444,7 +444,7 @@ test('compare polygon values', function() {
|
||||||
var exportedPoints = shape.getAttribute('points');
|
var exportedPoints = shape.getAttribute('points');
|
||||||
|
|
||||||
equals(svgPoints, exportedPoints);
|
equals(svgPoints, exportedPoints);
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
test('compare negative polygon values', function() {
|
test('compare negative polygon values', function() {
|
||||||
|
|
|
@ -92,7 +92,7 @@ test('compare negative rectangle values', function() {
|
||||||
var size = new Size(width, height);
|
var size = new Size(width, height);
|
||||||
var rectangle = new Rectangle(topLeft, size);
|
var rectangle = new Rectangle(topLeft, size);
|
||||||
var realRectangle = new Shape.Rectangle(rectangle);
|
var realRectangle = new Shape.Rectangle(rectangle);
|
||||||
|
|
||||||
compareItems(importedRectangle, realRectangle);
|
compareItems(importedRectangle, realRectangle);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -107,7 +107,7 @@ test('compare invalid rectangle values', function() {
|
||||||
shape.setAttribute('height', null);
|
shape.setAttribute('height', null);
|
||||||
|
|
||||||
var importedRectangle = paper.project.importSVG(shape);
|
var importedRectangle = paper.project.importSVG(shape);
|
||||||
|
|
||||||
var topLeft = new Point(0, 0);
|
var topLeft = new Point(0, 0);
|
||||||
var size = new Size(0, 0);
|
var size = new Size(0, 0);
|
||||||
var rectangle = new Rectangle(topLeft, size);
|
var rectangle = new Rectangle(topLeft, size);
|
||||||
|
@ -264,7 +264,7 @@ test('compare circle values', function() {
|
||||||
var shape = document.createElementNS(svgns, 'circle');
|
var shape = document.createElementNS(svgns, 'circle');
|
||||||
var cx = 100,
|
var cx = 100,
|
||||||
cy = 80,
|
cy = 80,
|
||||||
r = 50;
|
r = 50;
|
||||||
shape.setAttribute('cx', cx);
|
shape.setAttribute('cx', cx);
|
||||||
shape.setAttribute('cy', cy);
|
shape.setAttribute('cy', cy);
|
||||||
shape.setAttribute('r', r);
|
shape.setAttribute('r', r);
|
||||||
|
|
|
@ -74,4 +74,4 @@ test('segment.selected', function() {
|
||||||
path.segments[0].point.selected = false;
|
path.segments[0].point.selected = false;
|
||||||
equals(function() {
|
equals(function() {
|
||||||
return path.segments[0].point.selected;
|
return path.segments[0].point.selected;
|
||||||
}, false);});
|
}, false);});
|
||||||
|
|
|
@ -34,4 +34,4 @@ test('new Size(new Point(10, 20))', function() {
|
||||||
test('new Size({ x: 10, y: 20})', function() {
|
test('new Size({ x: 10, y: 20})', function() {
|
||||||
var size = new Size({x: 10, y: 20});
|
var size = new Size({x: 10, y: 20});
|
||||||
equals(size.toString(), '{ width: 10, height: 20 }');
|
equals(size.toString(), '{ width: 10, height: 20 }');
|
||||||
});
|
});
|
||||||
|
|
|
@ -177,4 +177,4 @@ test('setting group styles 2', function() {
|
||||||
|
|
||||||
// The second path still has its strokeColor set to red:
|
// The second path still has its strokeColor set to red:
|
||||||
compareColors(secondPath.strokeColor, 'red', 'secondPath.strokeColor');
|
compareColors(secondPath.strokeColor, 'red', 'secondPath.strokeColor');
|
||||||
});
|
});
|
||||||
|
|
|
@ -54,4 +54,4 @@
|
||||||
|
|
||||||
/*#*/ include('SVGImport.js');
|
/*#*/ include('SVGImport.js');
|
||||||
/*#*/ include('SVGExport.js');
|
/*#*/ include('SVGExport.js');
|
||||||
/*#*/ include('JSON.js');
|
/*#*/ include('JSON.js');
|
||||||
|
|
Loading…
Reference in a new issue