mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-03 19:45:44 -05:00
Remove tabs in examples in favor of 4 spaces.
To remove all these annoying JSHint complaints.
This commit is contained in:
Jürg Lehni
parent
fa9786b344
commit
59da291d54
25 changed files with 793 additions and 793 deletions
|
|
@ -79,8 +79,8 @@ var Point = Base.extend(/** @lends Point# */{
|
|||
* // properties:
|
||||
*
|
||||
* var point = new Point({
|
||||
* length: 10,
|
||||
* angle: 90
|
||||
* length: 10,
|
||||
* angle: 90
|
||||
* });
|
||||
* console.log(point.length); // 10
|
||||
* console.log(point.angle); // 90
|
||||
|
|
@ -89,8 +89,8 @@ var Point = Base.extend(/** @lends Point# */{
|
|||
* // Creating a point at x: 10, y: 20 using an object literal:
|
||||
*
|
||||
* var point = new Point({
|
||||
* x: 10,
|
||||
* y: 20
|
||||
* x: 10,
|
||||
* y: 20
|
||||
* });
|
||||
* console.log(point.x); // 10
|
||||
* console.log(point.y); // 20
|
||||
|
|
@ -99,8 +99,8 @@ var Point = Base.extend(/** @lends Point# */{
|
|||
* // Passing an object to a functionality that expects a point:
|
||||
*
|
||||
* var center = {
|
||||
* x: 50,
|
||||
* y: 50
|
||||
* x: 50,
|
||||
* y: 50
|
||||
* };
|
||||
*
|
||||
* // Creates a circle shaped path at x: 50, y: 50
|
||||
|
|
@ -366,8 +366,8 @@ var Point = Base.extend(/** @lends Point# */{
|
|||
*
|
||||
* @example
|
||||
* var point = new Point({
|
||||
* angle: 10,
|
||||
* length: 20
|
||||
* angle: 10,
|
||||
* length: 20
|
||||
* });
|
||||
* console.log(point.quadrant); // 1
|
||||
*
|
||||
|
|
|
|||
|
|
@ -41,14 +41,14 @@ var Rectangle = Base.extend(/** @lends Rectangle# */{
|
|||
*
|
||||
* @example // Create a rectangle between {x: 20, y: 20} and {x: 80, y:80}
|
||||
* var rectangle = new Rectangle({
|
||||
* point: [20, 20],
|
||||
* size: [60, 60]
|
||||
* point: [20, 20],
|
||||
* size: [60, 60]
|
||||
* });
|
||||
*
|
||||
* @example // Create a rectangle between {x: 20, y: 20} and {x: 80, y:80}
|
||||
* var rectangle = new Rectangle({
|
||||
* from: [20, 20],
|
||||
* to: [80, 80]
|
||||
* from: [20, 20],
|
||||
* to: [80, 80]
|
||||
* });
|
||||
*/
|
||||
/**
|
||||
|
|
@ -511,15 +511,15 @@ var Rectangle = Base.extend(/** @lends Rectangle# */{
|
|||
* circle.fillColor = 'red';
|
||||
*
|
||||
* function onMouseMove(event) {
|
||||
* // Check whether the mouse position intersects with the
|
||||
* // bounding box of the item:
|
||||
* if (circle.bounds.contains(event.point)) {
|
||||
* // If it intersects, fill it with green:
|
||||
* circle.fillColor = 'green';
|
||||
* } else {
|
||||
* // If it doesn't intersect, fill it with red:
|
||||
* circle.fillColor = 'red';
|
||||
* }
|
||||
* // Check whether the mouse position intersects with the
|
||||
* // bounding box of the item:
|
||||
* if (circle.bounds.contains(event.point)) {
|
||||
* // If it intersects, fill it with green:
|
||||
* circle.fillColor = 'green';
|
||||
* } else {
|
||||
* // If it doesn't intersect, fill it with red:
|
||||
* circle.fillColor = 'red';
|
||||
* }
|
||||
* }
|
||||
*/
|
||||
/**
|
||||
|
|
@ -538,8 +538,8 @@ var Rectangle = Base.extend(/** @lends Rectangle# */{
|
|||
*
|
||||
* // All newly created paths will inherit these styles:
|
||||
* project.currentStyle = {
|
||||
* fillColor: 'green',
|
||||
* strokeColor: 'black'
|
||||
* fillColor: 'green',
|
||||
* strokeColor: 'black'
|
||||
* };
|
||||
*
|
||||
* // Create a circle shaped path at {x: 80, y: 50}
|
||||
|
|
@ -551,20 +551,20 @@ var Rectangle = Base.extend(/** @lends Rectangle# */{
|
|||
* var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
*
|
||||
* function onMouseMove(event) {
|
||||
* // Move the circle to the position of the mouse:
|
||||
* circle.position = event.point;
|
||||
* // Move the circle to the position of the mouse:
|
||||
* circle.position = event.point;
|
||||
*
|
||||
* // Check whether the bounding box of the smaller circle
|
||||
* // is contained within the bounding box of the larger item:
|
||||
* if (largeCircle.bounds.contains(circle.bounds)) {
|
||||
* // If it does, fill it with green:
|
||||
* circle.fillColor = 'green';
|
||||
* largeCircle.fillColor = 'green';
|
||||
* } else {
|
||||
* // If doesn't, fill it with red:
|
||||
* circle.fillColor = 'red';
|
||||
* largeCircle.fillColor = 'red';
|
||||
* }
|
||||
* // Check whether the bounding box of the smaller circle
|
||||
* // is contained within the bounding box of the larger item:
|
||||
* if (largeCircle.bounds.contains(circle.bounds)) {
|
||||
* // If it does, fill it with green:
|
||||
* circle.fillColor = 'green';
|
||||
* largeCircle.fillColor = 'green';
|
||||
* } else {
|
||||
* // If doesn't, fill it with red:
|
||||
* circle.fillColor = 'red';
|
||||
* largeCircle.fillColor = 'red';
|
||||
* }
|
||||
* }
|
||||
*/
|
||||
contains: function(arg) {
|
||||
|
|
@ -608,8 +608,8 @@ var Rectangle = Base.extend(/** @lends Rectangle# */{
|
|||
*
|
||||
* // All newly created paths will inherit these styles:
|
||||
* project.currentStyle = {
|
||||
* fillColor: 'green',
|
||||
* strokeColor: 'black'
|
||||
* fillColor: 'green',
|
||||
* strokeColor: 'black'
|
||||
* };
|
||||
*
|
||||
* // Create a circle shaped path at {x: 80, y: 50}
|
||||
|
|
@ -621,20 +621,20 @@ var Rectangle = Base.extend(/** @lends Rectangle# */{
|
|||
* var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
*
|
||||
* function onMouseMove(event) {
|
||||
* // Move the circle to the position of the mouse:
|
||||
* circle.position = event.point;
|
||||
* // Move the circle to the position of the mouse:
|
||||
* circle.position = event.point;
|
||||
*
|
||||
* // Check whether the bounding box of the two circle
|
||||
* // shaped paths intersect:
|
||||
* if (largeCircle.bounds.intersects(circle.bounds)) {
|
||||
* // If it does, fill it with green:
|
||||
* circle.fillColor = 'green';
|
||||
* largeCircle.fillColor = 'green';
|
||||
* } else {
|
||||
* // If doesn't, fill it with red:
|
||||
* circle.fillColor = 'red';
|
||||
* largeCircle.fillColor = 'red';
|
||||
* }
|
||||
* // Check whether the bounding box of the two circle
|
||||
* // shaped paths intersect:
|
||||
* if (largeCircle.bounds.intersects(circle.bounds)) {
|
||||
* // If it does, fill it with green:
|
||||
* circle.fillColor = 'green';
|
||||
* largeCircle.fillColor = 'green';
|
||||
* } else {
|
||||
* // If doesn't, fill it with red:
|
||||
* circle.fillColor = 'red';
|
||||
* largeCircle.fillColor = 'red';
|
||||
* }
|
||||
* }
|
||||
*/
|
||||
intersects: function(/* rect */) {
|
||||
|
|
|
|||
|
|
@ -67,8 +67,8 @@ var Size = Base.extend(/** @lends Size# */{
|
|||
* // Creating a size of width: 10, height: 20 using an object literal:
|
||||
*
|
||||
* var size = new Size({
|
||||
* width: 10,
|
||||
* height: 20
|
||||
* width: 10,
|
||||
* height: 20
|
||||
* });
|
||||
* console.log(size.width); // 10
|
||||
* console.log(size.height); // 20
|
||||
|
|
|
|||
|
|
@ -54,19 +54,19 @@ var Group = Item.extend(/** @lends Group# */{
|
|||
* var group = new Group();
|
||||
*
|
||||
* function onMouseDown(event) {
|
||||
* // Create a new circle shaped path at the position
|
||||
* // of the mouse:
|
||||
* var path = new Path.Circle(event.point, 5);
|
||||
* path.fillColor = 'black';
|
||||
* // Create a new circle shaped path at the position
|
||||
* // of the mouse:
|
||||
* var path = new Path.Circle(event.point, 5);
|
||||
* path.fillColor = 'black';
|
||||
*
|
||||
* // Add the path to the group's children list:
|
||||
* group.addChild(path);
|
||||
* // Add the path to the group's children list:
|
||||
* group.addChild(path);
|
||||
* }
|
||||
*
|
||||
* function onFrame(event) {
|
||||
* // Rotate the group by 1 degree from
|
||||
* // the centerpoint of the view:
|
||||
* group.rotate(1, view.center);
|
||||
* // Rotate the group by 1 degree from
|
||||
* // the centerpoint of the view:
|
||||
* group.rotate(1, view.center);
|
||||
* }
|
||||
*/
|
||||
/**
|
||||
|
|
@ -82,11 +82,11 @@ var Group = Item.extend(/** @lends Group# */{
|
|||
*
|
||||
* // Create a group from the two paths:
|
||||
* var group = new Group({
|
||||
* children: [path, path2],
|
||||
* // Set the stroke color of all items in the group:
|
||||
* strokeColor: 'black',
|
||||
* // Move the group to the center of the view:
|
||||
* position: view.center
|
||||
* children: [path, path2],
|
||||
* // Set the stroke color of all items in the group:
|
||||
* strokeColor: 'black',
|
||||
* // Move the group to the center of the view:
|
||||
* position: view.center
|
||||
* });
|
||||
*/
|
||||
initialize: function Group(arg) {
|
||||
|
|
@ -134,17 +134,17 @@ var Group = Item.extend(/** @lends Group# */{
|
|||
*
|
||||
* @example {@paperscript}
|
||||
* var star = new Path.Star({
|
||||
* center: view.center,
|
||||
* points: 6,
|
||||
* radius1: 20,
|
||||
* radius2: 40,
|
||||
* fillColor: 'red'
|
||||
* center: view.center,
|
||||
* points: 6,
|
||||
* radius1: 20,
|
||||
* radius2: 40,
|
||||
* fillColor: 'red'
|
||||
* });
|
||||
*
|
||||
* var circle = new Path.Circle({
|
||||
* center: view.center,
|
||||
* radius: 25,
|
||||
* strokeColor: 'black'
|
||||
* center: view.center,
|
||||
* radius: 25,
|
||||
* strokeColor: 'black'
|
||||
* });
|
||||
*
|
||||
* // Create a group of the two items and clip it:
|
||||
|
|
@ -153,8 +153,8 @@ var Group = Item.extend(/** @lends Group# */{
|
|||
*
|
||||
* // Lets animate the circle:
|
||||
* function onFrame(event) {
|
||||
* var offset = Math.sin(event.count / 30) * 30;
|
||||
* circle.position.x = view.center.x + offset;
|
||||
* var offset = Math.sin(event.count / 30) * 30;
|
||||
* circle.position.x = view.center.x + offset;
|
||||
* }
|
||||
*/
|
||||
isClipped: function() {
|
||||
|
|
|
|||
576
src/item/Item.js
576
src/item/Item.js
File diff suppressed because it is too large
Load diff
|
|
@ -57,9 +57,9 @@ var Layer = Group.extend(/** @lends Layer# */{
|
|||
* // Create a layer. The properties in the object literal
|
||||
* // are set on the newly created layer.
|
||||
* var layer = new Layer({
|
||||
* children: [path, path2],
|
||||
* strokeColor: 'black',
|
||||
* position: view.center
|
||||
* children: [path, path2],
|
||||
* strokeColor: 'black',
|
||||
* position: view.center
|
||||
* });
|
||||
*/
|
||||
initialize: function Layer(arg) {
|
||||
|
|
|
|||
|
|
@ -39,12 +39,12 @@ var PlacedSymbol = Item.extend(/** @lends PlacedSymbol# */{
|
|||
* // Placing 100 instances of a symbol:
|
||||
* // Create a star shaped path at {x: 0, y: 0}:
|
||||
* var path = new Path.Star({
|
||||
* center: new Point(0, 0),
|
||||
* points: 6,
|
||||
* radius1: 5,
|
||||
* radius2: 13,
|
||||
* fillColor: 'white',
|
||||
* strokeColor: 'black'
|
||||
* center: new Point(0, 0),
|
||||
* points: 6,
|
||||
* radius1: 5,
|
||||
* radius2: 13,
|
||||
* fillColor: 'white',
|
||||
* strokeColor: 'black'
|
||||
* });
|
||||
*
|
||||
* // Create a symbol from the path:
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ var Raster = Item.extend(/** @lends Raster# */{
|
|||
* // If you create a Raster using a url, you can use the onLoad
|
||||
* // handler to do something once it is loaded:
|
||||
* 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:
|
||||
|
|
@ -66,8 +66,8 @@ var Raster = Item.extend(/** @lends Raster# */{
|
|||
*
|
||||
* @example {@paperscript height=300}
|
||||
* var raster = new Raster({
|
||||
* source: 'http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png',
|
||||
* position: view.center
|
||||
* source: 'http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png',
|
||||
* position: view.center
|
||||
* });
|
||||
*
|
||||
* raster.scale(0.5);
|
||||
|
|
@ -285,8 +285,8 @@ var Raster = Item.extend(/** @lends Raster# */{
|
|||
*
|
||||
* @example {@paperscript}
|
||||
* var raster = new Raster({
|
||||
* source: 'http://paperjs.org/about/resources/paper-js.gif',
|
||||
* position: view.center
|
||||
* source: 'http://paperjs.org/about/resources/paper-js.gif',
|
||||
* position: view.center
|
||||
* });
|
||||
*/
|
||||
getSource: function() {
|
||||
|
|
|
|||
|
|
@ -364,9 +364,9 @@ statics: new function() {
|
|||
*
|
||||
* @example {@paperscript}
|
||||
* var shape = new Shape.Circle({
|
||||
* center: [80, 50],
|
||||
* radius: 30,
|
||||
* strokeColor: 'black'
|
||||
* center: [80, 50],
|
||||
* radius: 30,
|
||||
* strokeColor: 'black'
|
||||
* });
|
||||
*/
|
||||
Circle: function(/* center, radius */) {
|
||||
|
|
@ -437,33 +437,33 @@ statics: new function() {
|
|||
*
|
||||
* @example {@paperscript}
|
||||
* var shape = new Shape.Rectangle({
|
||||
* point: [20, 20],
|
||||
* size: [60, 60],
|
||||
* strokeColor: 'black'
|
||||
* point: [20, 20],
|
||||
* size: [60, 60],
|
||||
* strokeColor: 'black'
|
||||
* });
|
||||
*
|
||||
* @example {@paperscript}
|
||||
* var shape = new Shape.Rectangle({
|
||||
* from: [20, 20],
|
||||
* to: [80, 80],
|
||||
* strokeColor: 'black'
|
||||
* from: [20, 20],
|
||||
* to: [80, 80],
|
||||
* strokeColor: 'black'
|
||||
* });
|
||||
*
|
||||
* @example {@paperscript}
|
||||
* var shape = new Shape.Rectangle({
|
||||
* rectangle: {
|
||||
* topLeft: [20, 20],
|
||||
* bottomRight: [80, 80]
|
||||
* },
|
||||
* strokeColor: 'black'
|
||||
* rectangle: {
|
||||
* topLeft: [20, 20],
|
||||
* bottomRight: [80, 80]
|
||||
* },
|
||||
* strokeColor: 'black'
|
||||
* });
|
||||
*
|
||||
* @example {@paperscript}
|
||||
* var shape = new Shape.Rectangle({
|
||||
* topLeft: [20, 20],
|
||||
* bottomRight: [80, 80],
|
||||
* radius: 10,
|
||||
* strokeColor: 'black'
|
||||
* bottomRight: [80, 80],
|
||||
* radius: 10,
|
||||
* strokeColor: 'black'
|
||||
* });
|
||||
*/
|
||||
Rectangle: function(/* rectangle */) {
|
||||
|
|
@ -497,16 +497,16 @@ statics: new function() {
|
|||
*
|
||||
* @example {@paperscript}
|
||||
* var shape = new Shape.Ellipse({
|
||||
* point: [20, 20],
|
||||
* size: [180, 60],
|
||||
* fillColor: 'black'
|
||||
* point: [20, 20],
|
||||
* size: [180, 60],
|
||||
* fillColor: 'black'
|
||||
* });
|
||||
*
|
||||
* @example {@paperscript} // Placing by center and radius
|
||||
* var shape = new Shape.Ellipse({
|
||||
* center: [110, 50],
|
||||
* radius: [90, 30],
|
||||
* fillColor: 'black'
|
||||
* center: [110, 50],
|
||||
* radius: [90, 30],
|
||||
* fillColor: 'black'
|
||||
* });
|
||||
*/
|
||||
Ellipse: function(/* rectangle */) {
|
||||
|
|
|
|||
|
|
@ -34,13 +34,13 @@ var CompoundPath = PathItem.extend(/** @lends CompoundPath# */{
|
|||
* @example {@paperscript}
|
||||
* // Create a circle shaped path with a hole in it:
|
||||
* var circle = new Path.Circle({
|
||||
* center: new Point(50, 50),
|
||||
* radius: 30
|
||||
* center: new Point(50, 50),
|
||||
* radius: 30
|
||||
* });
|
||||
*
|
||||
* var innerCircle = new Path.Circle({
|
||||
* center: new Point(50, 50),
|
||||
* radius: 10
|
||||
* center: new Point(50, 50),
|
||||
* radius: 10
|
||||
* });
|
||||
*
|
||||
* var compoundPath = new CompoundPath([circle, innerCircle]);
|
||||
|
|
@ -60,18 +60,18 @@ var CompoundPath = PathItem.extend(/** @lends CompoundPath# */{
|
|||
*
|
||||
* @example {@paperscript}
|
||||
* var path = new CompoundPath({
|
||||
* children: [
|
||||
* new Path.Circle({
|
||||
* center: new Point(50, 50),
|
||||
* radius: 30
|
||||
* }),
|
||||
* new Path.Circle({
|
||||
* center: new Point(50, 50),
|
||||
* radius: 10
|
||||
* })
|
||||
* ],
|
||||
* fillColor: 'black',
|
||||
* selected: true
|
||||
* children: [
|
||||
* new Path.Circle({
|
||||
* center: new Point(50, 50),
|
||||
* radius: 30
|
||||
* }),
|
||||
* new Path.Circle({
|
||||
* center: new Point(50, 50),
|
||||
* radius: 10
|
||||
* })
|
||||
* ],
|
||||
* fillColor: 'black',
|
||||
* selected: true
|
||||
* });
|
||||
*/
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -73,9 +73,9 @@ Path.inject({ statics: new function() {
|
|||
*
|
||||
* @example {@paperscript}
|
||||
* var path = new Path.Line({
|
||||
* from: [20, 20],
|
||||
* to: [80, 80],
|
||||
* strokeColor: 'black'
|
||||
* from: [20, 20],
|
||||
* to: [80, 80],
|
||||
* strokeColor: 'black'
|
||||
* });
|
||||
*/
|
||||
Line: function(/* from, to */) {
|
||||
|
|
@ -108,9 +108,9 @@ Path.inject({ statics: new function() {
|
|||
*
|
||||
* @example {@paperscript}
|
||||
* var path = new Path.Circle({
|
||||
* center: [80, 50],
|
||||
* radius: 30,
|
||||
* strokeColor: 'black'
|
||||
* center: [80, 50],
|
||||
* radius: 30,
|
||||
* strokeColor: 'black'
|
||||
* });
|
||||
*/
|
||||
Circle: function(/* center, radius */) {
|
||||
|
|
@ -180,33 +180,33 @@ Path.inject({ statics: new function() {
|
|||
*
|
||||
* @example {@paperscript}
|
||||
* var path = new Path.Rectangle({
|
||||
* point: [20, 20],
|
||||
* size: [60, 60],
|
||||
* strokeColor: 'black'
|
||||
* point: [20, 20],
|
||||
* size: [60, 60],
|
||||
* strokeColor: 'black'
|
||||
* });
|
||||
*
|
||||
* @example {@paperscript}
|
||||
* var path = new Path.Rectangle({
|
||||
* from: [20, 20],
|
||||
* to: [80, 80],
|
||||
* strokeColor: 'black'
|
||||
* from: [20, 20],
|
||||
* to: [80, 80],
|
||||
* strokeColor: 'black'
|
||||
* });
|
||||
*
|
||||
* @example {@paperscript}
|
||||
* var path = new Path.Rectangle({
|
||||
* rectangle: {
|
||||
* topLeft: [20, 20],
|
||||
* bottomRight: [80, 80]
|
||||
* },
|
||||
* strokeColor: 'black'
|
||||
* rectangle: {
|
||||
* topLeft: [20, 20],
|
||||
* bottomRight: [80, 80]
|
||||
* },
|
||||
* strokeColor: 'black'
|
||||
* });
|
||||
*
|
||||
* @example {@paperscript}
|
||||
* var path = new Path.Rectangle({
|
||||
* topLeft: [20, 20],
|
||||
* bottomRight: [80, 80],
|
||||
* radius: 10,
|
||||
* strokeColor: 'black'
|
||||
* bottomRight: [80, 80],
|
||||
* radius: 10,
|
||||
* strokeColor: 'black'
|
||||
* });
|
||||
*/
|
||||
Rectangle: function(/* rectangle */) {
|
||||
|
|
@ -273,16 +273,16 @@ Path.inject({ statics: new function() {
|
|||
*
|
||||
* @example {@paperscript}
|
||||
* var path = new Path.Ellipse({
|
||||
* point: [20, 20],
|
||||
* size: [180, 60],
|
||||
* fillColor: 'black'
|
||||
* point: [20, 20],
|
||||
* size: [180, 60],
|
||||
* fillColor: 'black'
|
||||
* });
|
||||
*
|
||||
* @example {@paperscript} // Placing by center and radius
|
||||
* var shape = new Path.Ellipse({
|
||||
* center: [110, 50],
|
||||
* radius: [90, 30],
|
||||
* fillColor: 'black'
|
||||
* center: [110, 50],
|
||||
* radius: [90, 30],
|
||||
* fillColor: 'black'
|
||||
* });
|
||||
*/
|
||||
Ellipse: function(/* rectangle */) {
|
||||
|
|
@ -323,10 +323,10 @@ Path.inject({ statics: new function() {
|
|||
*
|
||||
* @example {@paperscript}
|
||||
* var path = new Path.Arc({
|
||||
* from: [20, 20],
|
||||
* through: [60, 20],
|
||||
* to: [80, 80],
|
||||
* strokeColor: 'black'
|
||||
* from: [20, 20],
|
||||
* through: [60, 20],
|
||||
* to: [80, 80],
|
||||
* strokeColor: 'black'
|
||||
* });
|
||||
*/
|
||||
Arc: function(/* from, through, to */) {
|
||||
|
|
@ -369,10 +369,10 @@ Path.inject({ statics: new function() {
|
|||
*
|
||||
* @example {@paperscript}
|
||||
* var triangle = new Path.RegularPolygon({
|
||||
* center: [50, 50],
|
||||
* sides: 10,
|
||||
* radius: 40,
|
||||
* fillColor: 'black'
|
||||
* center: [50, 50],
|
||||
* sides: 10,
|
||||
* radius: 40,
|
||||
* fillColor: 'black'
|
||||
* });
|
||||
*/
|
||||
RegularPolygon: function(/* center, sides, radius */) {
|
||||
|
|
@ -423,11 +423,11 @@ Path.inject({ statics: new function() {
|
|||
*
|
||||
* @example {@paperscript}
|
||||
* var path = new Path.Star({
|
||||
* center: [50, 50],
|
||||
* points: 12,
|
||||
* radius1: 25,
|
||||
* radius2: 40,
|
||||
* fillColor: 'black'
|
||||
* center: [50, 50],
|
||||
* points: 12,
|
||||
* radius1: 25,
|
||||
* radius2: 40,
|
||||
* fillColor: 'black'
|
||||
* });
|
||||
*/
|
||||
Star: function(/* center, points, radius1, radius2 */) {
|
||||
|
|
|
|||
264
src/path/Path.js
264
src/path/Path.js
|
|
@ -57,18 +57,18 @@ var Path = PathItem.extend(/** @lends Path# */{
|
|||
*
|
||||
* @example {@paperscript}
|
||||
* var path = new Path({
|
||||
* segments: [[20, 20], [80, 80], [140, 20]],
|
||||
* fillColor: 'black',
|
||||
* closed: true
|
||||
* segments: [[20, 20], [80, 80], [140, 20]],
|
||||
* fillColor: 'black',
|
||||
* closed: true
|
||||
* });
|
||||
*
|
||||
* @example {@paperscript}
|
||||
* var path = new Path({
|
||||
* segments: [[20, 20], [80, 80], [140, 20]],
|
||||
* strokeColor: 'red',
|
||||
* strokeWidth: 20,
|
||||
* strokeCap: 'round',
|
||||
* selected: true
|
||||
* segments: [[20, 20], [80, 80], [140, 20]],
|
||||
* strokeColor: 'red',
|
||||
* strokeWidth: 20,
|
||||
* strokeCap: 'round',
|
||||
* selected: true
|
||||
* });
|
||||
*/
|
||||
/**
|
||||
|
|
@ -471,7 +471,7 @@ var Path = PathItem.extend(/** @lends Path# */{
|
|||
* @example {@paperscript}
|
||||
* // Adding segments to a path using point objects:
|
||||
* var path = new Path({
|
||||
* strokeColor: 'black'
|
||||
* strokeColor: 'black'
|
||||
* });
|
||||
*
|
||||
* // Add a segment at {x: 30, y: 75}
|
||||
|
|
@ -484,7 +484,7 @@ var Path = PathItem.extend(/** @lends Path# */{
|
|||
* @example {@paperscript}
|
||||
* // Adding segments to a path using arrays containing number pairs:
|
||||
* var path = new Path({
|
||||
* strokeColor: 'black'
|
||||
* strokeColor: 'black'
|
||||
* });
|
||||
*
|
||||
* // Add a segment at {x: 30, y: 75}
|
||||
|
|
@ -497,7 +497,7 @@ var Path = PathItem.extend(/** @lends Path# */{
|
|||
* @example {@paperscript}
|
||||
* // Adding segments to a path using objects:
|
||||
* var path = new Path({
|
||||
* strokeColor: 'black'
|
||||
* strokeColor: 'black'
|
||||
* });
|
||||
*
|
||||
* // Add a segment at {x: 30, y: 75}
|
||||
|
|
@ -510,7 +510,7 @@ var Path = PathItem.extend(/** @lends Path# */{
|
|||
* @example {@paperscript}
|
||||
* // Adding a segment with handles to a path:
|
||||
* var path = new Path({
|
||||
* strokeColor: 'black'
|
||||
* strokeColor: 'black'
|
||||
* });
|
||||
*
|
||||
* path.add(new Point(30, 75));
|
||||
|
|
@ -598,7 +598,7 @@ var Path = PathItem.extend(/** @lends Path# */{
|
|||
* @example {@paperscript}
|
||||
* // Adding an array of Point objects:
|
||||
* var path = new Path({
|
||||
* strokeColor: 'black'
|
||||
* strokeColor: 'black'
|
||||
* });
|
||||
* var points = [new Point(30, 50), new Point(170, 50)];
|
||||
* path.addSegments(points);
|
||||
|
|
@ -606,7 +606,7 @@ var Path = PathItem.extend(/** @lends Path# */{
|
|||
* @example {@paperscript}
|
||||
* // Adding an array of [x, y] arrays:
|
||||
* var path = new Path({
|
||||
* strokeColor: 'black'
|
||||
* strokeColor: 'black'
|
||||
* });
|
||||
* var array = [[30, 75], [100, 20], [170, 75]];
|
||||
* path.addSegments(array);
|
||||
|
|
@ -615,7 +615,7 @@ var Path = PathItem.extend(/** @lends Path# */{
|
|||
* // Adding segments from one path to another:
|
||||
*
|
||||
* var path = new Path({
|
||||
* strokeColor: 'black'
|
||||
* strokeColor: 'black'
|
||||
* });
|
||||
* path.addSegments([[30, 75], [100, 20], [170, 75]]);
|
||||
*
|
||||
|
|
@ -659,9 +659,9 @@ var Path = PathItem.extend(/** @lends Path# */{
|
|||
* // Create a circle shaped path at { x: 80, y: 50 }
|
||||
* // with a radius of 35:
|
||||
* var path = new Path.Circle({
|
||||
* center: new Point(80, 50),
|
||||
* radius: 35,
|
||||
* strokeColor: 'black'
|
||||
* center: new Point(80, 50),
|
||||
* radius: 35,
|
||||
* strokeColor: 'black'
|
||||
* });
|
||||
*
|
||||
* // Remove its second segment:
|
||||
|
|
@ -696,9 +696,9 @@ var Path = PathItem.extend(/** @lends Path# */{
|
|||
* // Create a circle shaped path at { x: 80, y: 50 }
|
||||
* // with a radius of 35:
|
||||
* var path = new Path.Circle({
|
||||
* center: new Point(80, 50),
|
||||
* radius: 35,
|
||||
* strokeColor: 'black'
|
||||
* center: new Point(80, 50),
|
||||
* radius: 35,
|
||||
* strokeColor: 'black'
|
||||
* });
|
||||
*
|
||||
* // Remove the segments from index 1 till index 2:
|
||||
|
|
@ -774,16 +774,16 @@ var Path = PathItem.extend(/** @lends Path# */{
|
|||
* @example {@paperscript}
|
||||
* // Selecting an item:
|
||||
* var path = new Path.Circle({
|
||||
* center: new Size(80, 50),
|
||||
* radius: 35
|
||||
* center: new Size(80, 50),
|
||||
* radius: 35
|
||||
* });
|
||||
* path.selected = true; // Select the path
|
||||
*
|
||||
* @example {@paperscript}
|
||||
* // A path is selected, if one or more of its segments is selected:
|
||||
* var path = new Path.Circle({
|
||||
* center: new Size(80, 50),
|
||||
* radius: 35
|
||||
* center: new Size(80, 50),
|
||||
* radius: 35
|
||||
* });
|
||||
*
|
||||
* // Select the second segment of the path:
|
||||
|
|
@ -791,7 +791,7 @@ var Path = PathItem.extend(/** @lends Path# */{
|
|||
*
|
||||
* // If the path is selected (which it is), set its fill color to red:
|
||||
* if (path.selected) {
|
||||
* path.fillColor = 'red';
|
||||
* path.fillColor = 'red';
|
||||
* }
|
||||
*
|
||||
*/
|
||||
|
|
@ -805,14 +805,14 @@ var Path = PathItem.extend(/** @lends Path# */{
|
|||
* @example {@paperscript}
|
||||
* // A path is fully selected, if all of its segments are selected:
|
||||
* var path = new Path.Circle({
|
||||
* center: new Size(80, 50),
|
||||
* radius: 35
|
||||
* center: new Size(80, 50),
|
||||
* radius: 35
|
||||
* });
|
||||
* path.fullySelected = true;
|
||||
*
|
||||
* var path2 = new Path.Circle({
|
||||
* center: new Size(180, 50),
|
||||
* radius: 35
|
||||
* center: new Size(180, 50),
|
||||
* radius: 35
|
||||
* });
|
||||
*
|
||||
* // Deselect the second segment of the second path:
|
||||
|
|
@ -821,14 +821,14 @@ var Path = PathItem.extend(/** @lends Path# */{
|
|||
* // If the path is fully selected (which it is),
|
||||
* // set its fill color to red:
|
||||
* if (path.fullySelected) {
|
||||
* path.fillColor = 'red';
|
||||
* path.fillColor = 'red';
|
||||
* }
|
||||
*
|
||||
* // If the second path is fully selected (which it isn't, since we just
|
||||
* // deselected its second segment),
|
||||
* // set its fill color to red:
|
||||
* if (path2.fullySelected) {
|
||||
* path2.fillColor = 'red';
|
||||
* path2.fillColor = 'red';
|
||||
* }
|
||||
*/
|
||||
isFullySelected: function() {
|
||||
|
|
@ -885,8 +885,8 @@ var Path = PathItem.extend(/** @lends Path# */{
|
|||
* // Create a circle shaped path at { x: 80, y: 50 }
|
||||
* // with a radius of 35:
|
||||
* var path = new Path.Circle({
|
||||
* center: new Size(80, 50),
|
||||
* radius: 35
|
||||
* center: new Size(80, 50),
|
||||
* radius: 35
|
||||
* });
|
||||
*
|
||||
* // Select the path, so we can inspect its segments:
|
||||
|
|
@ -943,31 +943,31 @@ var Path = PathItem.extend(/** @lends Path# */{
|
|||
*
|
||||
* var path;
|
||||
* function onMouseDown(event) {
|
||||
* // If we already made a path before, deselect it:
|
||||
* if (path) {
|
||||
* path.selected = false;
|
||||
* }
|
||||
* // If we already made a path before, deselect it:
|
||||
* if (path) {
|
||||
* path.selected = false;
|
||||
* }
|
||||
*
|
||||
* // Create a new path and add the position of the mouse
|
||||
* // as its first segment. Select it, so we can see the
|
||||
* // segment points:
|
||||
* path = new Path({
|
||||
* segments: [event.point],
|
||||
* strokeColor: 'black',
|
||||
* selected: true
|
||||
* });
|
||||
* // Create a new path and add the position of the mouse
|
||||
* // as its first segment. Select it, so we can see the
|
||||
* // segment points:
|
||||
* path = new Path({
|
||||
* segments: [event.point],
|
||||
* strokeColor: 'black',
|
||||
* selected: true
|
||||
* });
|
||||
* }
|
||||
*
|
||||
* function onMouseDrag(event) {
|
||||
* // On every drag event, add a segment to the path
|
||||
* // at the position of the mouse:
|
||||
* path.add(event.point);
|
||||
* // On every drag event, add a segment to the path
|
||||
* // at the position of the mouse:
|
||||
* path.add(event.point);
|
||||
* }
|
||||
*
|
||||
* function onMouseUp(event) {
|
||||
* // When the mouse is released, simplify the path:
|
||||
* path.simplify();
|
||||
* path.selected = true;
|
||||
* // When the mouse is released, simplify the path:
|
||||
* path.simplify();
|
||||
* path.selected = true;
|
||||
* }
|
||||
*/
|
||||
simplify: function(tolerance) {
|
||||
|
|
@ -1006,9 +1006,9 @@ var Path = PathItem.extend(/** @lends Path# */{
|
|||
*
|
||||
* @example {@paperscript} // Splitting a closed path
|
||||
* var path = new Path.Rectangle({
|
||||
* from: [20, 20],
|
||||
* to: [80, 80],
|
||||
* strokeColor: 'black'
|
||||
* from: [20, 20],
|
||||
* to: [80, 80],
|
||||
* strokeColor: 'black'
|
||||
* });
|
||||
*
|
||||
* // Split the path at 60% of its length:
|
||||
|
|
@ -1034,14 +1034,14 @@ var Path = PathItem.extend(/** @lends Path# */{
|
|||
*
|
||||
* @example {@paperscript}
|
||||
* var path = new Path.Circle({
|
||||
* center: view.center,
|
||||
* radius: 40,
|
||||
* strokeColor: 'black'
|
||||
* center: view.center,
|
||||
* radius: 40,
|
||||
* strokeColor: 'black'
|
||||
* });
|
||||
*
|
||||
* var pointOnCircle = view.center + {
|
||||
* length: 40,
|
||||
* angle: 30
|
||||
* length: 40,
|
||||
* angle: 30
|
||||
* };
|
||||
*
|
||||
* var curveLocation = path.getNearestLocation(pointOnCircle);
|
||||
|
|
@ -1069,9 +1069,9 @@ var Path = PathItem.extend(/** @lends Path# */{
|
|||
*
|
||||
* @example {@paperscript} // Splitting a closed path
|
||||
* var path = new Path.Rectangle({
|
||||
* from: [20, 20],
|
||||
* to: [80, 80],
|
||||
* strokeColor: 'black'
|
||||
* from: [20, 20],
|
||||
* to: [80, 80],
|
||||
* strokeColor: 'black'
|
||||
* });
|
||||
*
|
||||
* // Split the path half-way down its second curve:
|
||||
|
|
@ -1199,13 +1199,13 @@ var Path = PathItem.extend(/** @lends Path# */{
|
|||
* @example {@paperscript}
|
||||
* // Joining two paths:
|
||||
* var path = new Path({
|
||||
* segments: [[30, 25], [30, 75]],
|
||||
* strokeColor: 'black'
|
||||
* segments: [[30, 25], [30, 75]],
|
||||
* strokeColor: 'black'
|
||||
* });
|
||||
*
|
||||
* var path2 = new Path({
|
||||
* segments: [[200, 25], [200, 75]],
|
||||
* strokeColor: 'black'
|
||||
* segments: [[200, 25], [200, 75]],
|
||||
* strokeColor: 'black'
|
||||
* });
|
||||
*
|
||||
* // Join the paths:
|
||||
|
|
@ -1215,13 +1215,13 @@ var Path = PathItem.extend(/** @lends Path# */{
|
|||
* // Joining two paths that share a point at the start or end of their
|
||||
* // segments array:
|
||||
* var path = new Path({
|
||||
* segments: [[30, 25], [30, 75]],
|
||||
* strokeColor: 'black'
|
||||
* segments: [[30, 25], [30, 75]],
|
||||
* strokeColor: 'black'
|
||||
* });
|
||||
*
|
||||
* var path2 = new Path({
|
||||
* segments: [[30, 25], [80, 25]],
|
||||
* strokeColor: 'black'
|
||||
* segments: [[30, 25], [80, 25]],
|
||||
* strokeColor: 'black'
|
||||
* });
|
||||
*
|
||||
* // Join the paths:
|
||||
|
|
@ -1237,13 +1237,13 @@ var Path = PathItem.extend(/** @lends Path# */{
|
|||
* @example {@paperscript}
|
||||
* // Joining two paths that connect at two points:
|
||||
* var path = new Path({
|
||||
* segments: [[30, 25], [80, 25], [80, 75]],
|
||||
* strokeColor: 'black'
|
||||
* segments: [[30, 25], [80, 25], [80, 75]],
|
||||
* strokeColor: 'black'
|
||||
* });
|
||||
*
|
||||
* var path2 = new Path({
|
||||
* segments: [[30, 25], [30, 75], [80, 75]],
|
||||
* strokeColor: 'black'
|
||||
* segments: [[30, 25], [30, 75], [80, 75]],
|
||||
* strokeColor: 'black'
|
||||
* });
|
||||
*
|
||||
* // Join the paths:
|
||||
|
|
@ -1406,7 +1406,7 @@ var Path = PathItem.extend(/** @lends Path# */{
|
|||
*
|
||||
* // Create an arc shaped path:
|
||||
* var path = new Path({
|
||||
* strokeColor: 'black'
|
||||
* strokeColor: 'black'
|
||||
* });
|
||||
*
|
||||
* path.add(new Point(40, 100));
|
||||
|
|
@ -1421,9 +1421,9 @@ var Path = PathItem.extend(/** @lends Path# */{
|
|||
*
|
||||
* // Create a small circle shaped path at the point:
|
||||
* var circle = new Path.Circle({
|
||||
* center: point,
|
||||
* radius: 3,
|
||||
* fillColor: 'red'
|
||||
* center: point,
|
||||
* radius: 3,
|
||||
* fillColor: 'red'
|
||||
* });
|
||||
*
|
||||
* @example {@paperscript height=150}
|
||||
|
|
@ -1431,7 +1431,7 @@ var Path = PathItem.extend(/** @lends Path# */{
|
|||
*
|
||||
* // Create an arc shaped path:
|
||||
* var path = new Path({
|
||||
* strokeColor: 'black'
|
||||
* strokeColor: 'black'
|
||||
* });
|
||||
*
|
||||
* path.add(new Point(40, 100));
|
||||
|
|
@ -1440,17 +1440,17 @@ var Path = PathItem.extend(/** @lends Path# */{
|
|||
* var amount = 5;
|
||||
* var length = path.length;
|
||||
* for (var i = 0; i < amount + 1; i++) {
|
||||
* var offset = i / amount * length;
|
||||
* var offset = i / amount * length;
|
||||
*
|
||||
* // Find the point on the path at the given offset:
|
||||
* var point = path.getPointAt(offset);
|
||||
* // Find the point on the path at the given offset:
|
||||
* var point = path.getPointAt(offset);
|
||||
*
|
||||
* // Create a small circle shaped path at the point:
|
||||
* var circle = new Path.Circle({
|
||||
* center: point,
|
||||
* radius: 3,
|
||||
* fillColor: 'red'
|
||||
* });
|
||||
* // Create a small circle shaped path at the point:
|
||||
* var circle = new Path.Circle({
|
||||
* center: point,
|
||||
* radius: 3,
|
||||
* fillColor: 'red'
|
||||
* });
|
||||
* }
|
||||
*/
|
||||
getPointAt: function(offset, isParameter) {
|
||||
|
|
@ -1470,7 +1470,7 @@ var Path = PathItem.extend(/** @lends Path# */{
|
|||
*
|
||||
* // Create an arc shaped path:
|
||||
* var path = new Path({
|
||||
* strokeColor: 'black'
|
||||
* strokeColor: 'black'
|
||||
* });
|
||||
*
|
||||
* path.add(new Point(40, 100));
|
||||
|
|
@ -1490,8 +1490,8 @@ var Path = PathItem.extend(/** @lends Path# */{
|
|||
* tangent.length = 60;
|
||||
*
|
||||
* var line = new Path({
|
||||
* segments: [point, point + tangent],
|
||||
* strokeColor: 'red'
|
||||
* segments: [point, point + tangent],
|
||||
* strokeColor: 'red'
|
||||
* })
|
||||
*
|
||||
* @example {@paperscript height=200}
|
||||
|
|
@ -1499,7 +1499,7 @@ var Path = PathItem.extend(/** @lends Path# */{
|
|||
*
|
||||
* // Create an arc shaped path:
|
||||
* var path = new Path({
|
||||
* strokeColor: 'black'
|
||||
* strokeColor: 'black'
|
||||
* });
|
||||
*
|
||||
* path.add(new Point(40, 100));
|
||||
|
|
@ -1508,21 +1508,21 @@ var Path = PathItem.extend(/** @lends Path# */{
|
|||
* var amount = 6;
|
||||
* var length = path.length;
|
||||
* for (var i = 0; i < amount + 1; i++) {
|
||||
* var offset = i / amount * length;
|
||||
* var offset = i / amount * length;
|
||||
*
|
||||
* // Find the point on the path at the given offset:
|
||||
* var point = path.getPointAt(offset);
|
||||
* // Find the point on the path at the given offset:
|
||||
* var point = path.getPointAt(offset);
|
||||
*
|
||||
* // Find the normal vector on the path at the given offset:
|
||||
* var tangent = path.getTangentAt(offset);
|
||||
* // Find the normal vector on the path at the given offset:
|
||||
* var tangent = path.getTangentAt(offset);
|
||||
*
|
||||
* // Make the tangent vector 60pt long:
|
||||
* tangent.length = 60;
|
||||
* // Make the tangent vector 60pt long:
|
||||
* tangent.length = 60;
|
||||
*
|
||||
* var line = new Path({
|
||||
* segments: [point, point + tangent],
|
||||
* strokeColor: 'red'
|
||||
* })
|
||||
* var line = new Path({
|
||||
* segments: [point, point + tangent],
|
||||
* strokeColor: 'red'
|
||||
* })
|
||||
* }
|
||||
*/
|
||||
getTangentAt: function(offset, isParameter) {
|
||||
|
|
@ -1542,7 +1542,7 @@ var Path = PathItem.extend(/** @lends Path# */{
|
|||
*
|
||||
* // Create an arc shaped path:
|
||||
* var path = new Path({
|
||||
* strokeColor: 'black'
|
||||
* strokeColor: 'black'
|
||||
* });
|
||||
*
|
||||
* path.add(new Point(40, 100));
|
||||
|
|
@ -1562,8 +1562,8 @@ var Path = PathItem.extend(/** @lends Path# */{
|
|||
* normal.length = 30;
|
||||
*
|
||||
* var line = new Path({
|
||||
* segments: [point, point + normal],
|
||||
* strokeColor: 'red'
|
||||
* segments: [point, point + normal],
|
||||
* strokeColor: 'red'
|
||||
* });
|
||||
*
|
||||
* @example {@paperscript height=200}
|
||||
|
|
@ -1571,7 +1571,7 @@ var Path = PathItem.extend(/** @lends Path# */{
|
|||
*
|
||||
* // Create an arc shaped path:
|
||||
* var path = new Path({
|
||||
* strokeColor: 'black'
|
||||
* strokeColor: 'black'
|
||||
* });
|
||||
*
|
||||
* path.add(new Point(40, 100));
|
||||
|
|
@ -1580,21 +1580,21 @@ var Path = PathItem.extend(/** @lends Path# */{
|
|||
* var amount = 10;
|
||||
* var length = path.length;
|
||||
* for (var i = 0; i < amount + 1; i++) {
|
||||
* var offset = i / amount * length;
|
||||
* var offset = i / amount * length;
|
||||
*
|
||||
* // Find the point on the path at the given offset:
|
||||
* var point = path.getPointAt(offset);
|
||||
* // Find the point on the path at the given offset:
|
||||
* var point = path.getPointAt(offset);
|
||||
*
|
||||
* // Find the normal vector on the path at the given offset:
|
||||
* var normal = path.getNormalAt(offset);
|
||||
* // Find the normal vector on the path at the given offset:
|
||||
* var normal = path.getNormalAt(offset);
|
||||
*
|
||||
* // Make the normal vector 30pt long:
|
||||
* normal.length = 30;
|
||||
* // Make the normal vector 30pt long:
|
||||
* normal.length = 30;
|
||||
*
|
||||
* var line = new Path({
|
||||
* segments: [point, point + normal],
|
||||
* strokeColor: 'red'
|
||||
* });
|
||||
* var line = new Path({
|
||||
* segments: [point, point + normal],
|
||||
* strokeColor: 'red'
|
||||
* });
|
||||
* }
|
||||
*/
|
||||
getNormalAt: function(offset, isParameter) {
|
||||
|
|
@ -1635,26 +1635,26 @@ var Path = PathItem.extend(/** @lends Path# */{
|
|||
*
|
||||
* @example {@paperscript height=200}
|
||||
* var star = new Path.Star({
|
||||
* center: view.center,
|
||||
* points: 10,
|
||||
* radius1: 30,
|
||||
* radius2: 60,
|
||||
* strokeColor: 'black'
|
||||
* center: view.center,
|
||||
* points: 10,
|
||||
* radius1: 30,
|
||||
* radius2: 60,
|
||||
* strokeColor: 'black'
|
||||
* });
|
||||
*
|
||||
* var circle = new Path.Circle({
|
||||
* center: view.center,
|
||||
* radius: 3,
|
||||
* fillColor: 'red'
|
||||
* center: view.center,
|
||||
* radius: 3,
|
||||
* fillColor: 'red'
|
||||
* });
|
||||
*
|
||||
* function onMouseMove(event) {
|
||||
* // Get the nearest point from the mouse position
|
||||
* // to the star shaped path:
|
||||
* var nearestPoint = star.getNearestPoint(event.point);
|
||||
* // Get the nearest point from the mouse position
|
||||
* // to the star shaped path:
|
||||
* var nearestPoint = star.getNearestPoint(event.point);
|
||||
*
|
||||
* // Move the red circle to the nearest point:
|
||||
* circle.position = nearestPoint;
|
||||
* // Move the red circle to the nearest point:
|
||||
* circle.position = nearestPoint;
|
||||
* }
|
||||
*/
|
||||
getNearestPoint: function(point) { // TODO: Fix argument assignment!
|
||||
|
|
|
|||
|
|
@ -47,19 +47,19 @@ var PathItem = Item.extend(/** @lends PathItem# */{
|
|||
* var intersectionGroup = new Group();
|
||||
*
|
||||
* function onFrame(event) {
|
||||
* secondPath.rotate(3);
|
||||
* secondPath.rotate(3);
|
||||
*
|
||||
* var intersections = path.getIntersections(secondPath);
|
||||
* intersectionGroup.removeChildren();
|
||||
* var intersections = path.getIntersections(secondPath);
|
||||
* intersectionGroup.removeChildren();
|
||||
*
|
||||
* for (var i = 0; i < intersections.length; i++) {
|
||||
* var intersectionPath = new Path.Circle({
|
||||
* center: intersections[i].point,
|
||||
* radius: 4,
|
||||
* fillColor: 'red'
|
||||
* });
|
||||
* intersectionGroup.addChild(intersectionPath);
|
||||
* }
|
||||
* for (var i = 0; i < intersections.length; i++) {
|
||||
* var intersectionPath = new Path.Circle({
|
||||
* center: intersections[i].point,
|
||||
* radius: 4,
|
||||
* fillColor: 'red'
|
||||
* });
|
||||
* intersectionGroup.addChild(intersectionPath);
|
||||
* }
|
||||
* }
|
||||
*/
|
||||
getIntersections: function(path, _expand) {
|
||||
|
|
@ -438,22 +438,22 @@ var PathItem = Item.extend(/** @lends PathItem# */{
|
|||
*
|
||||
* var myPath;
|
||||
* function onMouseMove(event) {
|
||||
* // If we created a path before, remove it:
|
||||
* if (myPath) {
|
||||
* myPath.remove();
|
||||
* }
|
||||
* // If we created a path before, remove it:
|
||||
* if (myPath) {
|
||||
* myPath.remove();
|
||||
* }
|
||||
*
|
||||
* // Create a new path and add a segment point to it
|
||||
* // at {x: 150, y: 150):
|
||||
* myPath = new Path();
|
||||
* myPath.add(150, 150);
|
||||
* // Create a new path and add a segment point to it
|
||||
* // at {x: 150, y: 150):
|
||||
* myPath = new Path();
|
||||
* myPath.add(150, 150);
|
||||
*
|
||||
* // Draw a curve through the position of the mouse to 'toPoint'
|
||||
* var toPoint = new Point(350, 150);
|
||||
* myPath.curveTo(event.point, toPoint);
|
||||
* // Draw a curve through the position of the mouse to 'toPoint'
|
||||
* var toPoint = new Point(350, 150);
|
||||
* myPath.curveTo(event.point, toPoint);
|
||||
*
|
||||
* // Select the path, so we can see its segments:
|
||||
* myPath.selected = true;
|
||||
* // Select the path, so we can see its segments:
|
||||
* myPath.selected = true;
|
||||
* }
|
||||
*/
|
||||
|
||||
|
|
@ -492,29 +492,29 @@ var PathItem = Item.extend(/** @lends PathItem# */{
|
|||
*
|
||||
* var myPath;
|
||||
* function onMouseDrag(event) {
|
||||
* // If we created a path before, remove it:
|
||||
* if (myPath) {
|
||||
* myPath.remove();
|
||||
* }
|
||||
* // If we created a path before, remove it:
|
||||
* if (myPath) {
|
||||
* myPath.remove();
|
||||
* }
|
||||
*
|
||||
* // Create a new path and add a segment point to it
|
||||
* // at {x: 150, y: 150):
|
||||
* myPath = new Path();
|
||||
* myPath.add(150, 150);
|
||||
* // Create a new path and add a segment point to it
|
||||
* // at {x: 150, y: 150):
|
||||
* myPath = new Path();
|
||||
* myPath.add(150, 150);
|
||||
*
|
||||
* // Draw an arc through the position of the mouse to 'toPoint'
|
||||
* var toPoint = new Point(350, 150);
|
||||
* myPath.arcTo(event.point, toPoint);
|
||||
* // Draw an arc through the position of the mouse to 'toPoint'
|
||||
* var toPoint = new Point(350, 150);
|
||||
* myPath.arcTo(event.point, toPoint);
|
||||
*
|
||||
* // Select the path, so we can see its segments:
|
||||
* myPath.selected = true;
|
||||
* // Select the path, so we can see its segments:
|
||||
* myPath.selected = true;
|
||||
* }
|
||||
*
|
||||
* // When the mouse is released, deselect the path
|
||||
* // and fill it with black.
|
||||
* function onMouseUp(event) {
|
||||
* myPath.selected = false;
|
||||
* myPath.fillColor = 'black';
|
||||
* myPath.selected = false;
|
||||
* myPath.fillColor = 'black';
|
||||
* }
|
||||
*/
|
||||
/**
|
||||
|
|
@ -553,15 +553,15 @@ var PathItem = Item.extend(/** @lends PathItem# */{
|
|||
* // When the user clicks, create a new path and add
|
||||
* // the current mouse position to it as its first segment:
|
||||
* function onMouseDown(event) {
|
||||
* myPath = new Path();
|
||||
* myPath.strokeColor = 'black';
|
||||
* myPath.add(event.point);
|
||||
* myPath = new Path();
|
||||
* myPath.strokeColor = 'black';
|
||||
* myPath.add(event.point);
|
||||
* }
|
||||
*
|
||||
* // On each mouse drag event, draw an arc to the current
|
||||
* // position of the mouse:
|
||||
* function onMouseDrag(event) {
|
||||
* myPath.arcTo(event.point);
|
||||
* myPath.arcTo(event.point);
|
||||
* }
|
||||
*/
|
||||
// DOCS: PathItem#arcTo(to, radius, rotation, clockwise, large)
|
||||
|
|
@ -621,14 +621,14 @@ var PathItem = Item.extend(/** @lends PathItem# */{
|
|||
*
|
||||
* // Loop 500 times:
|
||||
* for (var i = 0; i < 500; i++) {
|
||||
* // Create a vector with an ever increasing length
|
||||
* // and an angle in increments of 45 degrees
|
||||
* var vector = new Point({
|
||||
* angle: i * 45,
|
||||
* length: i / 2
|
||||
* });
|
||||
* // Add the vector relatively to the last segment point:
|
||||
* path.lineBy(vector);
|
||||
* // Create a vector with an ever increasing length
|
||||
* // and an angle in increments of 45 degrees
|
||||
* var vector = new Point({
|
||||
* angle: i * 45,
|
||||
* length: i / 2
|
||||
* });
|
||||
* // Add the vector relatively to the last segment point:
|
||||
* path.lineBy(vector);
|
||||
* }
|
||||
*
|
||||
* // Smooth the handles of the path:
|
||||
|
|
|
|||
|
|
@ -61,18 +61,18 @@ var Segment = Base.extend(/** @lends Segment# */{
|
|||
* @example {@paperscript}
|
||||
* // Creating segments using object notation:
|
||||
* var firstSegment = new Segment({
|
||||
* point: [100, 50],
|
||||
* handleOut: [80, 100]
|
||||
* point: [100, 50],
|
||||
* handleOut: [80, 100]
|
||||
* });
|
||||
*
|
||||
* var secondSegment = new Segment({
|
||||
* point: [300, 50],
|
||||
* handleIn: [-80, -100]
|
||||
* point: [300, 50],
|
||||
* handleIn: [-80, -100]
|
||||
* });
|
||||
*
|
||||
* var path = new Path({
|
||||
* segments: [firstSegment, secondSegment],
|
||||
* strokeColor: 'black'
|
||||
* segments: [firstSegment, secondSegment],
|
||||
* strokeColor: 'black'
|
||||
* });
|
||||
*/
|
||||
/**
|
||||
|
|
@ -307,8 +307,8 @@ var Segment = Base.extend(/** @lends Segment# */{
|
|||
* @bean
|
||||
* @example {@paperscript}
|
||||
* var path = new Path.Circle({
|
||||
* center: [80, 50],
|
||||
* radius: 40
|
||||
* center: [80, 50],
|
||||
* radius: 40
|
||||
* });
|
||||
*
|
||||
* // Select the third segment point:
|
||||
|
|
|
|||
|
|
@ -136,9 +136,9 @@ var Project = PaperScopeItem.extend(/** @lends Project# */{
|
|||
*
|
||||
* @example {@paperscript}
|
||||
* project.currentStyle = {
|
||||
* fillColor: 'red',
|
||||
* strokeColor: 'black',
|
||||
* strokeWidth: 5
|
||||
* fillColor: 'red',
|
||||
* strokeColor: 'black',
|
||||
* strokeWidth: 5
|
||||
* }
|
||||
*
|
||||
* // The following paths will take over all style properties of
|
||||
|
|
|
|||
|
|
@ -452,17 +452,17 @@ var Color = Base.extend(new function() {
|
|||
* // Create a circle shaped path at the center of the view
|
||||
* // with a radius of 80:
|
||||
* var path = new Path.Circle({
|
||||
* center: view.center,
|
||||
* radius: 80
|
||||
* center: view.center,
|
||||
* radius: 80
|
||||
* });
|
||||
*
|
||||
* // The stops array: yellow mixes with red between 0 and 15%,
|
||||
* // 15% to 30% is pure red, red mixes with black between 30% to 100%:
|
||||
* var stops = [
|
||||
* ['yellow', 0],
|
||||
* ['red', 0.15],
|
||||
* ['red', 0.3],
|
||||
* ['black', 0.9]
|
||||
* ['yellow', 0],
|
||||
* ['red', 0.15],
|
||||
* ['red', 0.3],
|
||||
* ['black', 0.9]
|
||||
* ];
|
||||
*
|
||||
* // Create a radial gradient using the color stops array:
|
||||
|
|
|
|||
|
|
@ -27,17 +27,17 @@
|
|||
* // Create a rectangle shaped path between
|
||||
* // the topLeft and bottomRight points:
|
||||
* var path = new Path.Rectangle({
|
||||
* topLeft: topLeft,
|
||||
* bottomRight: bottomRight,
|
||||
* // Fill the path with a gradient of three color stops
|
||||
* // that runs between the two points we defined earlier:
|
||||
* fillColor: {
|
||||
* gradient: {
|
||||
* stops: ['yellow', 'red', 'blue']
|
||||
* },
|
||||
* origin: topLeft,
|
||||
* destination: bottomRight
|
||||
* }
|
||||
* topLeft: topLeft,
|
||||
* bottomRight: bottomRight,
|
||||
* // Fill the path with a gradient of three color stops
|
||||
* // that runs between the two points we defined earlier:
|
||||
* fillColor: {
|
||||
* gradient: {
|
||||
* stops: ['yellow', 'red', 'blue']
|
||||
* },
|
||||
* origin: topLeft,
|
||||
* destination: bottomRight
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* @classexample {@paperscript height=300}
|
||||
|
|
@ -45,20 +45,20 @@
|
|||
* // using 40% of the height of the view as its radius
|
||||
* // and fill it with a radial gradient color:
|
||||
* var path = new Path.Circle({
|
||||
* center: view.center,
|
||||
* radius: view.bounds.height * 0.4
|
||||
* center: view.center,
|
||||
* radius: view.bounds.height * 0.4
|
||||
* });
|
||||
*
|
||||
* // Fill the path with a radial gradient color with three stops:
|
||||
* // yellow from 0% to 5%, mix between red from 5% to 20%,
|
||||
* // mix between red and black from 20% to 100%:
|
||||
* path.fillColor = {
|
||||
* gradient: {
|
||||
* stops: [['yellow', 0.05], ['red', 0.2], ['black', 1]],
|
||||
* radial: true
|
||||
* },
|
||||
* origin: path.position,
|
||||
* destination: path.bounds.rightCenter
|
||||
* gradient: {
|
||||
* stops: [['yellow', 0.05], ['red', 0.2], ['black', 1]],
|
||||
* radial: true
|
||||
* },
|
||||
* origin: path.position,
|
||||
* destination: path.bounds.rightCenter
|
||||
* };
|
||||
*/
|
||||
var Gradient = Base.extend(/** @lends Gradient# */{
|
||||
|
|
|
|||
|
|
@ -85,30 +85,30 @@ var GradientStop = Base.extend(/** @lends GradientStop# */{
|
|||
* // using 40% of the height of the view as its radius
|
||||
* // and fill it with a radial gradient color:
|
||||
* var path = new Path.Circle({
|
||||
* center: view.center,
|
||||
* radius: view.bounds.height * 0.4
|
||||
* center: view.center,
|
||||
* radius: view.bounds.height * 0.4
|
||||
* });
|
||||
*
|
||||
* path.fillColor = {
|
||||
* gradient: {
|
||||
* stops: [['yellow', 0.05], ['red', 0.2], ['black', 1]],
|
||||
* radial: true
|
||||
* },
|
||||
* origin: path.position,
|
||||
* destination: path.bounds.rightCenter
|
||||
* gradient: {
|
||||
* stops: [['yellow', 0.05], ['red', 0.2], ['black', 1]],
|
||||
* radial: true
|
||||
* },
|
||||
* origin: path.position,
|
||||
* destination: path.bounds.rightCenter
|
||||
* };
|
||||
*
|
||||
* var gradient = path.fillColor.gradient;
|
||||
*
|
||||
* // This function is called each frame of the animation:
|
||||
* function onFrame(event) {
|
||||
* var blackStop = gradient.stops[2];
|
||||
* // Animate the rampPoint between 0.7 and 0.9:
|
||||
* blackStop.rampPoint = Math.sin(event.time * 5) * 0.1 + 0.8;
|
||||
* var blackStop = gradient.stops[2];
|
||||
* // Animate the rampPoint between 0.7 and 0.9:
|
||||
* blackStop.rampPoint = Math.sin(event.time * 5) * 0.1 + 0.8;
|
||||
*
|
||||
* // Animate the rampPoint between 0.2 and 0.4
|
||||
* var redStop = gradient.stops[1];
|
||||
* redStop.rampPoint = Math.sin(event.time * 3) * 0.1 + 0.3;
|
||||
* // Animate the rampPoint between 0.2 and 0.4
|
||||
* var redStop = gradient.stops[1];
|
||||
* redStop.rampPoint = Math.sin(event.time * 3) * 0.1 + 0.3;
|
||||
* }
|
||||
*/
|
||||
getRampPoint: function() {
|
||||
|
|
@ -134,17 +134,17 @@ var GradientStop = Base.extend(/** @lends GradientStop# */{
|
|||
* // using 40% of the height of the view as its radius
|
||||
* // and fill it with a radial gradient color:
|
||||
* var path = new Path.Circle({
|
||||
* center: view.center,
|
||||
* radius: view.bounds.height * 0.4
|
||||
* center: view.center,
|
||||
* radius: view.bounds.height * 0.4
|
||||
* });
|
||||
*
|
||||
* path.fillColor = {
|
||||
* gradient: {
|
||||
* stops: [['yellow', 0.05], ['red', 0.2], ['black', 1]],
|
||||
* radial: true
|
||||
* },
|
||||
* origin: path.position,
|
||||
* destination: path.bounds.rightCenter
|
||||
* gradient: {
|
||||
* stops: [['yellow', 0.05], ['red', 0.2], ['black', 1]],
|
||||
* radial: true
|
||||
* },
|
||||
* origin: path.position,
|
||||
* destination: path.bounds.rightCenter
|
||||
* };
|
||||
*
|
||||
* var redStop = path.fillColor.gradient.stops[1];
|
||||
|
|
@ -152,11 +152,11 @@ var GradientStop = Base.extend(/** @lends GradientStop# */{
|
|||
*
|
||||
* // This function is called each frame of the animation:
|
||||
* function onFrame(event) {
|
||||
* // Animate the rampPoint between 0.7 and 0.9:
|
||||
* blackStop.rampPoint = Math.sin(event.time * 5) * 0.1 + 0.8;
|
||||
* // Animate the rampPoint between 0.7 and 0.9:
|
||||
* blackStop.rampPoint = Math.sin(event.time * 5) * 0.1 + 0.8;
|
||||
*
|
||||
* // Animate the rampPoint between 0.2 and 0.4
|
||||
* redStop.rampPoint = Math.sin(event.time * 3) * 0.1 + 0.3;
|
||||
* // Animate the rampPoint between 0.2 and 0.4
|
||||
* redStop.rampPoint = Math.sin(event.time * 3) * 0.1 + 0.3;
|
||||
* }
|
||||
*/
|
||||
getColor: function() {
|
||||
|
|
|
|||
|
|
@ -28,31 +28,31 @@
|
|||
*
|
||||
* var path = new Path.Circle(new Point(80, 50), 30);
|
||||
* path.style = {
|
||||
* fillColor: new Color(1, 0, 0),
|
||||
* strokeColor: 'black',
|
||||
* strokeWidth: 5
|
||||
* fillColor: new Color(1, 0, 0),
|
||||
* strokeColor: 'black',
|
||||
* strokeWidth: 5
|
||||
* };
|
||||
*
|
||||
* @classexample {@paperscript} // Styling text items
|
||||
* var text = new PointText(view.center);
|
||||
* text.content = 'Hello world.';
|
||||
* text.style = {
|
||||
* fontFamily: 'Courier New',
|
||||
* fontWeight: 'bold',
|
||||
* fontSize: 20,
|
||||
* fillColor: 'red',
|
||||
* justification: 'center'
|
||||
* fontFamily: 'Courier New',
|
||||
* fontWeight: 'bold',
|
||||
* fontSize: 20,
|
||||
* fillColor: 'red',
|
||||
* justification: 'center'
|
||||
* };
|
||||
*
|
||||
* @classexample {@paperscript} // Styling groups
|
||||
* var path1 = new Path.Circle({
|
||||
* center: [100, 50],
|
||||
* radius: 30
|
||||
* center: [100, 50],
|
||||
* radius: 30
|
||||
* });
|
||||
*
|
||||
* var path2 = new Path.Rectangle({
|
||||
* from: [170, 20],
|
||||
* to: [230, 80]
|
||||
* from: [170, 20],
|
||||
* to: [230, 80]
|
||||
* });
|
||||
*
|
||||
* var group = new Group(path1, path2);
|
||||
|
|
@ -60,10 +60,10 @@
|
|||
* // All styles set on a group are automatically
|
||||
* // set on the children of the group:
|
||||
* group.style = {
|
||||
* strokeColor: 'black',
|
||||
* dashArray: [4, 10],
|
||||
* strokeWidth: 4,
|
||||
* strokeCap: 'round'
|
||||
* strokeColor: 'black',
|
||||
* dashArray: [4, 10],
|
||||
* strokeWidth: 4,
|
||||
* strokeCap: 'round'
|
||||
* };
|
||||
*
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -46,12 +46,12 @@ var PointText = TextItem.extend(/** @lends PointText# */{
|
|||
*
|
||||
* @example {@paperscript}
|
||||
* var text = new PointText({
|
||||
* point: [50, 50],
|
||||
* content: 'The contents of the point text',
|
||||
* fillColor: 'black',
|
||||
* fontFamily: 'Courier New',
|
||||
* fontWeight: 'bold',
|
||||
* fontSize: 25
|
||||
* point: [50, 50],
|
||||
* content: 'The contents of the point text',
|
||||
* fillColor: 'black',
|
||||
* fontFamily: 'Courier New',
|
||||
* fontWeight: 'bold',
|
||||
* fontSize: 25
|
||||
* });
|
||||
*/
|
||||
initialize: function PointText() {
|
||||
|
|
|
|||
|
|
@ -81,9 +81,9 @@ var TextItem = Item.extend(/** @lends TextItem# */{
|
|||
* text.content = 'Move your mouse over the view, to see its position';
|
||||
*
|
||||
* function onMouseMove(event) {
|
||||
* // Each time the mouse is moved, set the content of
|
||||
* // the point text to describe the position of the mouse:
|
||||
* text.content = 'Your position is: ' + event.point.toString();
|
||||
* // Each time the mouse is moved, set the content of
|
||||
* // the point text to describe the position of the mouse:
|
||||
* text.content = 'Your position is: ' + event.point.toString();
|
||||
* }
|
||||
*/
|
||||
getContent: function() {
|
||||
|
|
|
|||
|
|
@ -31,15 +31,15 @@
|
|||
* tool.distanceThreshold = 10;
|
||||
*
|
||||
* function onMouseDown(event) {
|
||||
* // Create a new path every time the mouse is clicked
|
||||
* path = new Path();
|
||||
* path.add(event.point);
|
||||
* path.strokeColor = 'black';
|
||||
* // Create a new path every time the mouse is clicked
|
||||
* path = new Path();
|
||||
* path.add(event.point);
|
||||
* path.strokeColor = 'black';
|
||||
* }
|
||||
*
|
||||
* function onMouseDrag(event) {
|
||||
* // Add a point to the path every time the mouse is dragged
|
||||
* path.add(event.point);
|
||||
* // Add a point to the path every time the mouse is dragged
|
||||
* path.add(event.point);
|
||||
* }
|
||||
*/
|
||||
var Tool = PaperScopeItem.extend(/** @lends Tool# */{
|
||||
|
|
@ -141,13 +141,13 @@ var Tool = PaperScopeItem.extend(/** @lends Tool# */{
|
|||
* @example {@paperscript}
|
||||
* // Creating circle shaped paths where the user presses the mouse button:
|
||||
* function onMouseDown(event) {
|
||||
* // Create a new circle shaped path with a radius of 10
|
||||
* // at the position of the mouse (event.point):
|
||||
* var path = new Path.Circle({
|
||||
* center: event.point,
|
||||
* radius: 10,
|
||||
* fillColor: 'black'
|
||||
* });
|
||||
* // Create a new circle shaped path with a radius of 10
|
||||
* // at the position of the mouse (event.point):
|
||||
* var path = new Path.Circle({
|
||||
* center: event.point,
|
||||
* radius: 10,
|
||||
* fillColor: 'black'
|
||||
* });
|
||||
* }
|
||||
*/
|
||||
|
||||
|
|
@ -165,12 +165,12 @@ var Tool = PaperScopeItem.extend(/** @lends Tool# */{
|
|||
*
|
||||
* // Create an empty path:
|
||||
* var path = new Path({
|
||||
* strokeColor: 'black'
|
||||
* strokeColor: 'black'
|
||||
* });
|
||||
*
|
||||
* function onMouseDrag(event) {
|
||||
* // Add a segment to the path at the position of the mouse:
|
||||
* path.add(event.point);
|
||||
* // Add a segment to the path at the position of the mouse:
|
||||
* path.add(event.point);
|
||||
* }
|
||||
*/
|
||||
|
||||
|
|
@ -188,15 +188,15 @@ var Tool = PaperScopeItem.extend(/** @lends Tool# */{
|
|||
*
|
||||
* // Create a circle shaped path with a radius of 10 at {x: 0, y: 0}:
|
||||
* var path = new Path.Circle({
|
||||
* center: [0, 0],
|
||||
* radius: 10,
|
||||
* fillColor: 'black'
|
||||
* center: [0, 0],
|
||||
* radius: 10,
|
||||
* fillColor: 'black'
|
||||
* });
|
||||
*
|
||||
* function onMouseMove(event) {
|
||||
* // Whenever the user moves the mouse, move the path
|
||||
* // to that position:
|
||||
* path.position = event.point;
|
||||
* // Whenever the user moves the mouse, move the path
|
||||
* // to that position:
|
||||
* path.position = event.point;
|
||||
* }
|
||||
*/
|
||||
|
||||
|
|
@ -212,13 +212,13 @@ var Tool = PaperScopeItem.extend(/** @lends Tool# */{
|
|||
* @example {@paperscript}
|
||||
* // Creating circle shaped paths where the user releases the mouse:
|
||||
* function onMouseUp(event) {
|
||||
* // Create a new circle shaped path with a radius of 10
|
||||
* // at the position of the mouse (event.point):
|
||||
* var path = new Path.Circle({
|
||||
* center: event.point,
|
||||
* radius: 10,
|
||||
* fillColor: 'black'
|
||||
* });
|
||||
* // Create a new circle shaped path with a radius of 10
|
||||
* // at the position of the mouse (event.point):
|
||||
* var path = new Path.Circle({
|
||||
* center: event.point,
|
||||
* radius: 10,
|
||||
* fillColor: 'black'
|
||||
* });
|
||||
* }
|
||||
*/
|
||||
|
||||
|
|
@ -241,20 +241,20 @@ var Tool = PaperScopeItem.extend(/** @lends Tool# */{
|
|||
* // Scaling a path whenever the user presses the space bar:
|
||||
*
|
||||
* // Create a circle shaped path:
|
||||
* var path = new Path.Circle({
|
||||
* center: new Point(50, 50),
|
||||
* radius: 30,
|
||||
* fillColor: 'red'
|
||||
* });
|
||||
* var path = new Path.Circle({
|
||||
* center: new Point(50, 50),
|
||||
* radius: 30,
|
||||
* fillColor: 'red'
|
||||
* });
|
||||
*
|
||||
* function onKeyDown(event) {
|
||||
* if (event.key == 'space') {
|
||||
* // Scale the path by 110%:
|
||||
* path.scale(1.1);
|
||||
* if (event.key == 'space') {
|
||||
* // Scale the path by 110%:
|
||||
* path.scale(1.1);
|
||||
*
|
||||
* // Prevent the key event from bubbling
|
||||
* return false;
|
||||
* }
|
||||
* // Prevent the key event from bubbling
|
||||
* return false;
|
||||
* }
|
||||
* }
|
||||
*/
|
||||
|
||||
|
|
@ -273,9 +273,9 @@ var Tool = PaperScopeItem.extend(/** @lends Tool# */{
|
|||
*
|
||||
* @example
|
||||
* function onKeyUp(event) {
|
||||
* if (event.key == 'space') {
|
||||
* console.log('The spacebar was released!');
|
||||
* }
|
||||
* if (event.key == 'space') {
|
||||
* console.log('The spacebar was released!');
|
||||
* }
|
||||
* }
|
||||
*/
|
||||
|
||||
|
|
|
|||
|
|
@ -53,13 +53,13 @@ var ToolEvent = Event.extend(/** @lends ToolEvent# */{
|
|||
*
|
||||
* @example
|
||||
* function onMouseDrag(event) {
|
||||
* // the position of the mouse when it is dragged
|
||||
* console.log(event.point);
|
||||
* // the position of the mouse when it is dragged
|
||||
* console.log(event.point);
|
||||
* }
|
||||
*
|
||||
* function onMouseUp(event) {
|
||||
* // the position of the mouse when it is released
|
||||
* console.log(event.point);
|
||||
* // the position of the mouse when it is released
|
||||
* console.log(event.point);
|
||||
* }
|
||||
*
|
||||
* @type Point
|
||||
|
|
|
|||
|
|
@ -155,12 +155,12 @@ var Key = new function() {
|
|||
* // Whenever the user clicks, create a circle shaped path. If the
|
||||
* // 'a' key is pressed, fill it with red, otherwise fill it with blue:
|
||||
* function onMouseDown(event) {
|
||||
* var path = new Path.Circle(event.point, 10);
|
||||
* if (Key.isDown('a')) {
|
||||
* path.fillColor = 'red';
|
||||
* } else {
|
||||
* path.fillColor = 'blue';
|
||||
* }
|
||||
* var path = new Path.Circle(event.point, 10);
|
||||
* if (Key.isDown('a')) {
|
||||
* path.fillColor = 'red';
|
||||
* } else {
|
||||
* path.fillColor = 'blue';
|
||||
* }
|
||||
* }
|
||||
*/
|
||||
isDown: function(key) {
|
||||
|
|
|
|||
|
|
@ -520,8 +520,8 @@ var View = Base.extend(Callback, /** @lends View# */{
|
|||
* path.fillColor = 'black';
|
||||
*
|
||||
* function onFrame(event) {
|
||||
* // Every frame, rotate the path by 3 degrees:
|
||||
* path.rotate(3);
|
||||
* // Every frame, rotate the path by 3 degrees:
|
||||
* path.rotate(3);
|
||||
* }
|
||||
*
|
||||
* @name View#onFrame
|
||||
|
|
@ -540,8 +540,8 @@ var View = Base.extend(Callback, /** @lends View# */{
|
|||
* path.fillColor = 'red';
|
||||
*
|
||||
* function onResize(event) {
|
||||
* // Whenever the view is resized, move the path to its center:
|
||||
* path.position = view.center;
|
||||
* // Whenever the view is resized, move the path to its center:
|
||||
* path.position = view.center;
|
||||
* }
|
||||
*
|
||||
* @name View#onResize
|
||||
|
|
@ -567,8 +567,8 @@ var View = Base.extend(Callback, /** @lends View# */{
|
|||
* path.fillColor = 'black';
|
||||
*
|
||||
* var frameHandler = function(event) {
|
||||
* // Every frame, rotate the path by 3 degrees:
|
||||
* path.rotate(3);
|
||||
* // Every frame, rotate the path by 3 degrees:
|
||||
* path.rotate(3);
|
||||
* };
|
||||
*
|
||||
* view.on('frame', frameHandler);
|
||||
|
|
@ -587,12 +587,12 @@ var View = Base.extend(Callback, /** @lends View# */{
|
|||
* path.fillColor = 'black';
|
||||
*
|
||||
* var frameHandler = function(event) {
|
||||
* // Every frame, rotate the path by 3 degrees:
|
||||
* path.rotate(3);
|
||||
* // Every frame, rotate the path by 3 degrees:
|
||||
* path.rotate(3);
|
||||
* };
|
||||
*
|
||||
* view.on({
|
||||
* frame: frameHandler
|
||||
* frame: frameHandler
|
||||
* });
|
||||
*/
|
||||
|
||||
|
|
@ -612,18 +612,18 @@ var View = Base.extend(Callback, /** @lends View# */{
|
|||
* path.fillColor = 'black';
|
||||
*
|
||||
* var frameHandler = function(event) {
|
||||
* // Every frame, rotate the path by 3 degrees:
|
||||
* path.rotate(3);
|
||||
* // Every frame, rotate the path by 3 degrees:
|
||||
* path.rotate(3);
|
||||
* };
|
||||
*
|
||||
* view.on({
|
||||
* frame: frameHandler
|
||||
* frame: frameHandler
|
||||
* });
|
||||
*
|
||||
* // When the user presses the mouse,
|
||||
* // detach the frame handler from the view:
|
||||
* function onMouseDown(event) {
|
||||
* view.detach('frame');
|
||||
* view.detach('frame');
|
||||
* }
|
||||
*/
|
||||
/**
|
||||
|
|
|
|||
Loading…
Reference in a new issue