paper.js
This commit is contained in:
bach
parent
803e4407f4
commit
b1c9f6170b
BIN
paper.js/assets/paperjs-v0.12.17.zip.crdownload
Normal file
BIN
paper.js/assets/paperjs-v0.12.17.zip.crdownload
Normal file
Binary file not shown.
23
paper.js/assets/paperjs/LICENSE.txt
Normal file
23
paper.js/assets/paperjs/LICENSE.txt
Normal file
@ -0,0 +1,23 @@
|
||||
Copyright (c) 2011 - 2020, Jürg Lehni & Jonathan Puckey
|
||||
http://juerglehni.com/ & https://puckey.studio/
|
||||
All rights reserved.
|
||||
|
||||
The MIT License (MIT)
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
66
paper.js/assets/paperjs/dist/node/canvas.js
vendored
Normal file
66
paper.js/assets/paperjs/dist/node/canvas.js
vendored
Normal file
@ -0,0 +1,66 @@
|
||||
/*
|
||||
* Paper.js - The Swiss Army Knife of Vector Graphics Scripting.
|
||||
* http://paperjs.org/
|
||||
*
|
||||
* Copyright (c) 2011 - 2020, Jürg Lehni & Jonathan Puckey
|
||||
* http://juerglehni.com/ & https://puckey.studio/
|
||||
*
|
||||
* Distributed under the MIT license. See LICENSE file for details.
|
||||
*
|
||||
* All rights reserved.
|
||||
*/
|
||||
|
||||
// Add some useful extensions to HTMLCanvasElement:
|
||||
// - HTMLCanvasElement#type, so we can switch to a PDF canvas
|
||||
// - Various Node-Canvas methods, routed through from HTMLCanvasElement:
|
||||
// toBuffer, pngStream, createPNGStream, jpegStream, createJPEGStream
|
||||
|
||||
module.exports = function(self, requireName) {
|
||||
var Canvas;
|
||||
try {
|
||||
Canvas = require('canvas').Canvas;
|
||||
} catch(error) {
|
||||
// Remove `self.window`, so we still have the global `self` reference,
|
||||
// but no `window` object:
|
||||
// - On the browser, this corresponds to a worker context.
|
||||
// - On Node.js, it basically means the canvas is missing or not working
|
||||
// which can be treated the same way.
|
||||
delete self.window;
|
||||
// Check the required module's name to see if it contains canvas, and
|
||||
// only complain about its lack if the module requires it.
|
||||
if (/\bcanvas\b/.test(requireName)) {
|
||||
throw new Error('Unable to load canvas module.');
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
var HTMLCanvasElement = self.HTMLCanvasElement,
|
||||
idlUtils = require('jsdom/lib/jsdom/living/generated/utils');
|
||||
|
||||
// Add fake HTMLCanvasElement#type property:
|
||||
Object.defineProperty(HTMLCanvasElement.prototype, 'type', {
|
||||
get: function() {
|
||||
var canvas = idlUtils.implForWrapper(this)._canvas;
|
||||
return canvas && canvas.type || 'image';
|
||||
},
|
||||
|
||||
set: function(type) {
|
||||
// Allow replacement of internal node-canvas, so we can switch to a
|
||||
// PDF canvas.
|
||||
var impl = idlUtils.implForWrapper(this),
|
||||
size = impl._canvas || impl;
|
||||
impl._canvas = new Canvas(size.width, size.height, type);
|
||||
impl._context = null;
|
||||
}
|
||||
});
|
||||
|
||||
// Extend HTMLCanvasElement with useful methods from the underlying Canvas:
|
||||
var methods = ['toBuffer', 'pngStream', 'createPNGStream', 'jpegStream',
|
||||
'createJPEGStream'];
|
||||
methods.forEach(function(key) {
|
||||
HTMLCanvasElement.prototype[key] = function() {
|
||||
var canvas = idlUtils.implForWrapper(this)._canvas;
|
||||
return canvas[key].apply(canvas, arguments);
|
||||
};
|
||||
});
|
||||
};
|
||||
156
paper.js/assets/paperjs/dist/node/extend.js
vendored
Normal file
156
paper.js/assets/paperjs/dist/node/extend.js
vendored
Normal file
@ -0,0 +1,156 @@
|
||||
/*
|
||||
* Paper.js - The Swiss Army Knife of Vector Graphics Scripting.
|
||||
* http://paperjs.org/
|
||||
*
|
||||
* Copyright (c) 2011 - 2020, Jürg Lehni & Jonathan Puckey
|
||||
* http://juerglehni.com/ & https://puckey.studio/
|
||||
*
|
||||
* Distributed under the MIT license. See LICENSE file for details.
|
||||
*
|
||||
* All rights reserved.
|
||||
*/
|
||||
|
||||
var fs = require('fs'),
|
||||
path = require('path');
|
||||
|
||||
module.exports = function(paper) {
|
||||
if (paper.PaperScript) {
|
||||
var sourceMapSupport = 'require("source-map-support").install(paper.PaperScript.sourceMapSupport);\n',
|
||||
sourceMaps = {};
|
||||
|
||||
paper.PaperScript.sourceMapSupport = {
|
||||
retrieveSourceMap: function(source) {
|
||||
var map = sourceMaps[source];
|
||||
return map ? { url: source, map: map } : null;
|
||||
}
|
||||
};
|
||||
|
||||
// Register the .pjs extension for automatic compilation as PaperScript
|
||||
require.extensions['.pjs'] = function(module, filename) {
|
||||
// Requiring a PaperScript on Node.js returns an initialize method which
|
||||
// needs to receive a Canvas object when called and returns the
|
||||
// PaperScope.
|
||||
module.exports = function(canvas) {
|
||||
var source = fs.readFileSync(filename, 'utf8'),
|
||||
code = sourceMapSupport + source,
|
||||
compiled = paper.PaperScript.compile(code, {
|
||||
url: filename,
|
||||
source: source,
|
||||
sourceMaps: true,
|
||||
offset: -1 // remove sourceMapSupport...
|
||||
}),
|
||||
scope = new paper.PaperScope();
|
||||
// Keep track of sourceMaps so retrieveSourceMap() can link them up
|
||||
scope.setup(canvas);
|
||||
scope.__filename = filename;
|
||||
scope.__dirname = path.dirname(filename);
|
||||
// Expose core methods and values
|
||||
scope.require = require;
|
||||
scope.console = console;
|
||||
sourceMaps[filename] = compiled.map;
|
||||
paper.PaperScript.execute(compiled, scope);
|
||||
return scope;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
paper.PaperScope.inject({
|
||||
createCanvas: function(width, height, type) {
|
||||
// Do not use CanvasProvider.getCanvas(), since we may be changing
|
||||
// the underlying node-canvas when requesting PDF support, and don't
|
||||
// want to release it after back into the pool.
|
||||
var canvas = paper.document.createElement('canvas');
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
canvas.type = type;
|
||||
return canvas;
|
||||
},
|
||||
|
||||
/**
|
||||
* @deprecated, use use {@link #createCanvas(width, height)} instead.
|
||||
*/
|
||||
Canvas: '#createCanvas'
|
||||
});
|
||||
|
||||
// Override requestAnimationFrame() to avoid setInterval() timers.
|
||||
// NOTE: In Node.js, we only support manual updating for now, but
|
||||
// View#exportFrames() below offers a way to emulate animations by exporting
|
||||
// them frame by frame at the given frame-rate.
|
||||
paper.DomEvent.requestAnimationFrame = function(callback) {
|
||||
};
|
||||
|
||||
// Node.js based image exporting code.
|
||||
paper.CanvasView.inject({
|
||||
// DOCS: CanvasView#exportFrames(options);
|
||||
exportFrames: function(options) {
|
||||
options = paper.Base.set({
|
||||
fps: 30,
|
||||
prefix: 'frame-',
|
||||
amount: 1,
|
||||
format: 'png' // Supported: 'png' or 'jpeg'
|
||||
}, options);
|
||||
if (!options.directory)
|
||||
throw new Error('Missing options.directory');
|
||||
if (options.format && !/^(jpeg|png)$/.test(options.format))
|
||||
throw new Error('Unsupported format. Use "png" or "jpeg"');
|
||||
var view = this,
|
||||
count = 0,
|
||||
frameDuration = 1 / options.fps,
|
||||
startTime = Date.now(),
|
||||
lastTime = startTime,
|
||||
padding = options.padding || ((options.amount - 1) + '').length,
|
||||
paddedStr = Array(padding + 1).join('0');
|
||||
|
||||
// Start exporting frames by exporting the first frame:
|
||||
exportFrame(options);
|
||||
|
||||
function exportFrame() {
|
||||
// Convert to a Base object, for #toString()
|
||||
view.emit('frame', new paper.Base({
|
||||
delta: frameDuration,
|
||||
time: frameDuration * count,
|
||||
count: count
|
||||
}));
|
||||
var file = path.join(options.directory,
|
||||
options.prefix + (paddedStr + count).slice(-padding)
|
||||
+ '.' + options.format);
|
||||
var out = view.exportImage(file, function() {
|
||||
// Once the file has been closed, export the next fame:
|
||||
var then = Date.now();
|
||||
if (options.onProgress) {
|
||||
options.onProgress({
|
||||
count: count,
|
||||
amount: options.amount,
|
||||
percentage: Math.round((count + 1) / options.amount
|
||||
* 10000) / 100,
|
||||
time: then - startTime,
|
||||
delta: then - lastTime
|
||||
});
|
||||
}
|
||||
lastTime = then;
|
||||
if (++count < options.amount) {
|
||||
exportFrame();
|
||||
} else {
|
||||
// Call onComplete handler when finished:
|
||||
if (options.onComplete) {
|
||||
options.onComplete();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// DOCS: CanvasView#exportImage(path, callback);
|
||||
exportImage: function(path, callback) {
|
||||
this.update();
|
||||
var out = fs.createWriteStream(path),
|
||||
format = /\.jp(e?)g$/.test(path) ? 'jpeg' : 'png',
|
||||
stream = this._element[format + 'Stream']();
|
||||
stream.pipe(out);
|
||||
if (callback) {
|
||||
out.on('close', callback);
|
||||
}
|
||||
return out;
|
||||
}
|
||||
});
|
||||
};
|
||||
58
paper.js/assets/paperjs/dist/node/self.js
vendored
Normal file
58
paper.js/assets/paperjs/dist/node/self.js
vendored
Normal file
@ -0,0 +1,58 @@
|
||||
/*
|
||||
* Paper.js - The Swiss Army Knife of Vector Graphics Scripting.
|
||||
* http://paperjs.org/
|
||||
*
|
||||
* Copyright (c) 2011 - 2020, Jürg Lehni & Jonathan Puckey
|
||||
* http://juerglehni.com/ & https://puckey.studio/
|
||||
*
|
||||
* Distributed under the MIT license. See LICENSE file for details.
|
||||
*
|
||||
* All rights reserved.
|
||||
*/
|
||||
|
||||
// Node.js emulation layer of browser environment, based on jsdom with node-
|
||||
// canvas integration.
|
||||
|
||||
var path = require('path');
|
||||
// Determine the name by which name the module was required (either 'paper',
|
||||
// 'paper-jsdom' or 'paper-jsdom-canvas'), and use this to determine if error
|
||||
// exceptions should be thrown or if loading should fail silently.
|
||||
var parent = module.parent && module.parent.parent,
|
||||
requireName = parent && path.basename(path.dirname(parent.filename));
|
||||
requireName = /^paper/.test(requireName) ? requireName : 'paper';
|
||||
|
||||
var jsdom,
|
||||
self;
|
||||
|
||||
try {
|
||||
jsdom = require('jsdom');
|
||||
} catch(e) {
|
||||
// Check the required module's name to see if it contains jsdom, and only
|
||||
// complain about its lack if the module requires it.
|
||||
if (/\bjsdom\b/.test(requireName)) {
|
||||
throw new Error('Unable to load jsdom module.');
|
||||
}
|
||||
}
|
||||
|
||||
if (jsdom) {
|
||||
// Create our document and window objects through jsdom.
|
||||
/* global document:true, window:true */
|
||||
var document = new jsdom.JSDOM('<html><body></body></html>', {
|
||||
// Use the current working directory as the document's origin, so
|
||||
// requests to local files work correctly with CORS.
|
||||
url: 'file://' + process.cwd() + '/',
|
||||
resources: 'usable'
|
||||
});
|
||||
self = document.window;
|
||||
require('./canvas.js')(self, requireName);
|
||||
require('./xml.js')(self);
|
||||
} else {
|
||||
self = {
|
||||
navigator: {
|
||||
userAgent: 'Node.js (' + process.platform + '; U; rv:' +
|
||||
process.version + ')'
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
module.exports = self;
|
||||
40
paper.js/assets/paperjs/dist/node/xml.js
vendored
Normal file
40
paper.js/assets/paperjs/dist/node/xml.js
vendored
Normal file
@ -0,0 +1,40 @@
|
||||
/*
|
||||
* Paper.js - The Swiss Army Knife of Vector Graphics Scripting.
|
||||
* http://paperjs.org/
|
||||
*
|
||||
* Copyright (c) 2011 - 2020, Jürg Lehni & Jonathan Puckey
|
||||
* http://juerglehni.com/ & https://puckey.studio/
|
||||
*
|
||||
* Distributed under the MIT license. See LICENSE file for details.
|
||||
*
|
||||
* All rights reserved.
|
||||
*/
|
||||
|
||||
module.exports = function(self) {
|
||||
// Define XMLSerializer shim, to emulate browser behavior.
|
||||
// Effort to bring XMLSerializer to jsdom:
|
||||
// https://github.com/tmpvar/jsdom/issues/1368
|
||||
self.XMLSerializer = function XMLSerializer() {
|
||||
};
|
||||
|
||||
self.XMLSerializer.prototype = {
|
||||
serializeToString: function(node) {
|
||||
if (!node)
|
||||
return '';
|
||||
// Fix a jsdom issue where all SVG tagNames are lowercased:
|
||||
// https://github.com/tmpvar/jsdom/issues/620
|
||||
var text = node.outerHTML,
|
||||
tagNames = ['linearGradient', 'radialGradient', 'clipPath',
|
||||
'textPath'];
|
||||
for (var i = 0, l = tagNames.length; i < l; i++) {
|
||||
var tagName = tagNames[i];
|
||||
text = text.replace(
|
||||
new RegExp('(<|</)' + tagName.toLowerCase() + '\\b', 'g'),
|
||||
function(match, start) {
|
||||
return start + tagName;
|
||||
});
|
||||
}
|
||||
return text;
|
||||
}
|
||||
};
|
||||
};
|
||||
1
paper.js/assets/paperjs/dist/paper-core.d.ts
vendored
Normal file
1
paper.js/assets/paperjs/dist/paper-core.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
import './paper';
|
||||
15703
paper.js/assets/paperjs/dist/paper-core.js
vendored
Normal file
15703
paper.js/assets/paperjs/dist/paper-core.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
32
paper.js/assets/paperjs/dist/paper-core.min.js
vendored
Normal file
32
paper.js/assets/paperjs/dist/paper-core.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
17472
paper.js/assets/paperjs/dist/paper-full.js
vendored
Normal file
17472
paper.js/assets/paperjs/dist/paper-full.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
32
paper.js/assets/paperjs/dist/paper-full.min.js
vendored
Normal file
32
paper.js/assets/paperjs/dist/paper-full.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
7394
paper.js/assets/paperjs/dist/paper.d.ts
vendored
Normal file
7394
paper.js/assets/paperjs/dist/paper.d.ts
vendored
Normal file
File diff suppressed because it is too large
Load Diff
414
paper.js/assets/paperjs/docs/assets/css/docs.css
Normal file
414
paper.js/assets/paperjs/docs/assets/css/docs.css
Normal file
@ -0,0 +1,414 @@
|
||||
@charset "UTF-8";
|
||||
form,
|
||||
img,
|
||||
ul,
|
||||
ol,
|
||||
table,
|
||||
td,
|
||||
article,
|
||||
figure,
|
||||
figcaption {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0; }
|
||||
|
||||
a {
|
||||
outline: none;
|
||||
border: 0; }
|
||||
|
||||
ul,
|
||||
ol {
|
||||
list-style: none outside none; }
|
||||
|
||||
table {
|
||||
border-spacing: 0; }
|
||||
|
||||
td {
|
||||
vertical-align: top; }
|
||||
|
||||
html {
|
||||
-webkit-text-size-adjust: none; }
|
||||
|
||||
/* Content Styles */
|
||||
article {
|
||||
/* Text Content */ }
|
||||
article,
|
||||
article a {
|
||||
color: #333333; }
|
||||
article a {
|
||||
border-bottom: 1px solid; }
|
||||
article a:hover,
|
||||
article a:hover em {
|
||||
background: #e5e5e5; }
|
||||
article em {
|
||||
font-style: normal;
|
||||
background: #efefef; }
|
||||
article p,
|
||||
article ul,
|
||||
article ol {
|
||||
margin: 0 8px 16px 0; }
|
||||
article p.small,
|
||||
article ul.small,
|
||||
article ol.small {
|
||||
margin-bottom: 8px; }
|
||||
article figure,
|
||||
article .CodeMirror,
|
||||
article .paperscript {
|
||||
margin-bottom: 16px; }
|
||||
article ul,
|
||||
article ol {
|
||||
padding: 0;
|
||||
list-style: none outside none; }
|
||||
article ul ul,
|
||||
article ul ol,
|
||||
article ol ul,
|
||||
article ol ol {
|
||||
margin-bottom: 0; }
|
||||
article ul > li {
|
||||
margin-left: 1em;
|
||||
position: relative; }
|
||||
article ul > li:before {
|
||||
content: '–';
|
||||
position: absolute;
|
||||
left: -1em; }
|
||||
article ol {
|
||||
counter-reset: item; }
|
||||
article ol > li {
|
||||
margin-left: 1.5em;
|
||||
position: relative; }
|
||||
article ol > li:before {
|
||||
position: absolute;
|
||||
left: -1.5em;
|
||||
content: counter(item,upper-latin) ") ";
|
||||
counter-increment: item; }
|
||||
|
||||
section {
|
||||
clear: both;
|
||||
margin: 0 0 16px;
|
||||
padding: 0; }
|
||||
|
||||
.column {
|
||||
width: 260px;
|
||||
float: left; }
|
||||
.column + .column {
|
||||
margin-left: 16px; }
|
||||
|
||||
.row {
|
||||
clear: both; }
|
||||
|
||||
.donation {
|
||||
padding-bottom: 16px; }
|
||||
.donation input,
|
||||
.donation select {
|
||||
margin-right: 0.35em; }
|
||||
|
||||
.reference h1,
|
||||
.reference h2,
|
||||
.reference h3,
|
||||
.reference h4 {
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
margin: 0; }
|
||||
.reference h1,
|
||||
.reference h2,
|
||||
.reference h3 {
|
||||
height: 18px;
|
||||
border-bottom: 1px solid;
|
||||
margin-bottom: 16px; }
|
||||
.reference h2 a {
|
||||
font-weight: bold; }
|
||||
.reference h3 {
|
||||
margin-top: 16px;
|
||||
border-bottom-style: dotted; }
|
||||
.reference h4 {
|
||||
font-weight: bold; }
|
||||
.reference h4 .description {
|
||||
font-weight: normal; }
|
||||
.reference h4 .description:before {
|
||||
content: ' — '; }
|
||||
.reference h4 + ul, .reference h4 + pre, .reference h4 + .paperscript {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 16px; }
|
||||
.reference a tt {
|
||||
line-height: 17px; }
|
||||
.reference ul,
|
||||
.reference p {
|
||||
margin-bottom: 16px; }
|
||||
.reference hr {
|
||||
border: none;
|
||||
border-bottom: 1px dotted; }
|
||||
.reference .reference-list ul,
|
||||
.reference .reference-inherited ul {
|
||||
margin-left: 16px; }
|
||||
.reference .reference-inherited ul li {
|
||||
text-indent: -30px;
|
||||
padding-left: 30px; }
|
||||
.reference ul.reference-classes {
|
||||
padding-bottom: 4px; }
|
||||
.reference ul.reference-classes li {
|
||||
margin: 0;
|
||||
text-indent: 0; }
|
||||
.reference ul.reference-classes ul {
|
||||
margin: 0 0 10px 10px; }
|
||||
.reference ul.reference-classes h2,
|
||||
.reference ul.reference-classes h3,
|
||||
.reference ul.reference-classes hr {
|
||||
margin: 10px 0 10px 0; }
|
||||
.reference ul.reference-classes .first h2 {
|
||||
margin-top: 0; }
|
||||
* html .reference ul.reference-classes img {
|
||||
margin-top: 5px; }
|
||||
.reference ul.member-list li {
|
||||
margin-left: 2em;
|
||||
margin-bottom: 8px;
|
||||
text-indent: -2em; }
|
||||
.reference ul.member-list li:before {
|
||||
display: none; }
|
||||
.reference .reference-members {
|
||||
margin-bottom: 16px; }
|
||||
.reference .member-group-text {
|
||||
margin-bottom: 16px; }
|
||||
.reference .member-description {
|
||||
border: 1px solid #999;
|
||||
border-top: 0;
|
||||
margin: 16px 0 16px 0; }
|
||||
.reference .member-header {
|
||||
border-top: 1px solid #999;
|
||||
padding: 10px;
|
||||
*zoom: 1; }
|
||||
.reference .member-header .member-link {
|
||||
float: left; }
|
||||
.reference .member-header .member-close {
|
||||
float: right; }
|
||||
.reference .member-header:before, .reference .member-header:after {
|
||||
content: " ";
|
||||
display: table; }
|
||||
.reference .member-header:after {
|
||||
clear: both; }
|
||||
.reference .member-text {
|
||||
border-top: 1px dashed #999;
|
||||
padding: 10px 10px 0 10px;
|
||||
margin-bottom: -6px; }
|
||||
.reference .member-text ul ul,
|
||||
.reference .member-text ul ol,
|
||||
.reference .member-text ol ul,
|
||||
.reference .member-text ol ol,
|
||||
.reference .member-text ul p,
|
||||
.reference .member-text ol p {
|
||||
margin-bottom: 8px; }
|
||||
.reference .member-link {
|
||||
text-indent: -30px;
|
||||
padding-left: 30px; }
|
||||
|
||||
body,
|
||||
select,
|
||||
input,
|
||||
textarea {
|
||||
font-family: "Lucida Grande", Geneva, Verdana, Arial, sans-serif; }
|
||||
|
||||
tt,
|
||||
pre,
|
||||
.CodeMirror {
|
||||
font-family: Menlo, Consolas, "Vera Mono", monospace;
|
||||
font-size: 12px;
|
||||
line-height: 17px; }
|
||||
|
||||
body {
|
||||
background: #fff;
|
||||
margin: 16px;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
color: #333333;
|
||||
max-width: 540px; }
|
||||
|
||||
select,
|
||||
input,
|
||||
textarea {
|
||||
font-size: 11px;
|
||||
margin: 0;
|
||||
color: #000; }
|
||||
|
||||
a {
|
||||
color: #333333;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid #333333; }
|
||||
a:hover {
|
||||
background: #e5e5e5; }
|
||||
|
||||
img {
|
||||
border: 0; }
|
||||
|
||||
p {
|
||||
margin: 0 0 16px 0; }
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding: 0;
|
||||
margin: 0 0 16px 0;
|
||||
list-style: none; }
|
||||
|
||||
.clear {
|
||||
clear: both; }
|
||||
|
||||
.hidden {
|
||||
display: none; }
|
||||
|
||||
.reference-index,
|
||||
.reference-index a {
|
||||
color: #009dec;
|
||||
border-bottom: 0px; }
|
||||
.reference-index a:hover {
|
||||
background: #e3f4fc; }
|
||||
.reference-index h2,
|
||||
.reference-index h3,
|
||||
.reference-index hr {
|
||||
border-color: #009dec; }
|
||||
|
||||
.reference h1 {
|
||||
font-size: 18px;
|
||||
font-weight: normal;
|
||||
line-height: 24px;
|
||||
border: none; }
|
||||
.reference h1 .version {
|
||||
font-size: 10px;
|
||||
line-height: 16px;
|
||||
vertical-align: top;
|
||||
margin-left: 0.35em; }
|
||||
|
||||
.footer {
|
||||
margin-top: 16px; }
|
||||
|
||||
.CodeMirror pre {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: transparent; }
|
||||
.paperscript .CodeMirror {
|
||||
height: 100%; }
|
||||
|
||||
.CodeMirror-scroll {
|
||||
min-height: 100%;
|
||||
overflow: auto; }
|
||||
|
||||
.CodeMirror-gutter {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
min-width: 30px;
|
||||
height: 100%;
|
||||
background-color: #f4f4f4;
|
||||
border-right: 1px solid #999; }
|
||||
|
||||
.CodeMirror-gutter-text {
|
||||
color: #aaa;
|
||||
text-align: right;
|
||||
padding: 2px 8px 2px 8px; }
|
||||
.CodeMirror-gutter-text pre {
|
||||
font-size: 10px; }
|
||||
|
||||
.CodeMirror-lines {
|
||||
background: #ffffff;
|
||||
padding: 2px 0 2px 8px; }
|
||||
.CodeMirror-lines pre.highlight {
|
||||
background-color: #edf5fc; }
|
||||
|
||||
.CodeMirror-cursor {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
border-left: 1px solid #7c7c7c !important;
|
||||
height: 17px; }
|
||||
|
||||
.CodeMirror-selected {
|
||||
background: #ccc !important;
|
||||
color: HighlightText !important;
|
||||
padding: 2px 0 2px 0; }
|
||||
|
||||
.CodeMirror-focused .CodeMirror-cursor {
|
||||
visibility: visible; }
|
||||
.CodeMirror-focused .CodeMirror-selected {
|
||||
background: Highlight !important; }
|
||||
|
||||
.CodeMirror-matchingbracket {
|
||||
background: #e3fc8d !important; }
|
||||
|
||||
.CodeMirror-nonmatchingbracket {
|
||||
color: #d62a28 !important; }
|
||||
|
||||
/* JavaScript & HTML Modes */
|
||||
span.cm-keyword {
|
||||
color: #ff7800; }
|
||||
span.cm-atom, span.cm-number {
|
||||
color: #3b5bb5; }
|
||||
span.cm-def, span.cm-variable-2, span.cm-variable-3 {
|
||||
color: #3a4a64; }
|
||||
span.cm-variable {
|
||||
color: #000; }
|
||||
span.cm-property {
|
||||
color: #000; }
|
||||
span.cm-operator {
|
||||
color: #000; }
|
||||
span.cm-comment {
|
||||
color: #8c868f; }
|
||||
span.cm-string {
|
||||
color: #409b1c; }
|
||||
span.cm-meta {
|
||||
color: #555; }
|
||||
span.cm-error {
|
||||
color: #f30; }
|
||||
span.cm-qualifier {
|
||||
color: #555; }
|
||||
span.cm-builtin {
|
||||
color: #30a; }
|
||||
span.cm-bracket {
|
||||
color: #cc7; }
|
||||
span.cm-tag {
|
||||
font-weight: bold;
|
||||
color: #3b5bb5; }
|
||||
span.cm-attribute {
|
||||
font-style: italic;
|
||||
color: #3b5bb5; }
|
||||
|
||||
.paperscript {
|
||||
position: relative; }
|
||||
.paperscript .buttons {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
z-index: 1; }
|
||||
.paperscript .button,
|
||||
.paperscript .explain {
|
||||
float: right;
|
||||
display: none;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
margin: 8px 8px 0 0; }
|
||||
.paperscript .button {
|
||||
background: #eee; }
|
||||
.paperscript .explain {
|
||||
background: #e3f4fc; }
|
||||
.paperscript .explain, .paperscript:hover .button {
|
||||
display: inline-block; }
|
||||
.paperscript .button:hover {
|
||||
background: #ddd;
|
||||
cursor: pointer; }
|
||||
.paperscript .tools {
|
||||
display: inline; }
|
||||
.paperscript .source {
|
||||
overflow: auto;
|
||||
border: 1px solid #999; }
|
||||
.paperscript .CodeMirror {
|
||||
margin: 0 !important; }
|
||||
.paperscript .CodeMirror-gutter-text,
|
||||
.paperscript .CodeMirror-lines {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px; }
|
||||
.paperscript .canvas {
|
||||
line-height: 0; }
|
||||
.paperscript .canvas.border canvas {
|
||||
border: 1px solid #999; }
|
||||
.paperscript.split .canvas {
|
||||
border: 1px solid #999;
|
||||
border-top: 0; }
|
||||
4
paper.js/assets/paperjs/docs/assets/js/codemirror.js
Normal file
4
paper.js/assets/paperjs/docs/assets/js/codemirror.js
Normal file
File diff suppressed because one or more lines are too long
493
paper.js/assets/paperjs/docs/assets/js/docs.js
Normal file
493
paper.js/assets/paperjs/docs/assets/js/docs.js
Normal file
@ -0,0 +1,493 @@
|
||||
// Install some useful jQuery extensions that we use a lot
|
||||
|
||||
$.support.touch = 'ontouchstart' in window;
|
||||
|
||||
$.extend($.fn, {
|
||||
orNull: function() {
|
||||
return this.length > 0 ? this : null;
|
||||
},
|
||||
|
||||
findAndSelf: function(selector) {
|
||||
return this.find(selector).add(this.filter(selector));
|
||||
}
|
||||
});
|
||||
|
||||
// Little Helpers
|
||||
|
||||
function hyphenate(str) {
|
||||
return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
|
||||
}
|
||||
|
||||
function isVisible(el) {
|
||||
if (el.is(':hidden'))
|
||||
return false;
|
||||
var viewTop = $(window).scrollTop();
|
||||
var viewBottom = viewTop + $(window).height();
|
||||
var top = el.offset().top;
|
||||
var bottom = top + el.height();
|
||||
return top >= viewTop && bottom <= viewBottom
|
||||
|| top <= viewTop && bottom >= viewTop
|
||||
|| top <= viewBottom && bottom >= viewBottom;
|
||||
}
|
||||
|
||||
function smoothScrollTo(el, callback) {
|
||||
$('html, body').animate({
|
||||
scrollTop: el.offset().top
|
||||
}, 250, callback);
|
||||
}
|
||||
|
||||
var behaviors = {};
|
||||
|
||||
behaviors.hiDPI = function() {
|
||||
// Turn off hiDPI for all touch devices for now, until the site is built
|
||||
// true to scale.
|
||||
if ($.support.touch)
|
||||
$('canvas').attr('hidpi', 'off');
|
||||
};
|
||||
|
||||
behaviors.sections = function() {
|
||||
var toc = $('.toc');
|
||||
var checks = [];
|
||||
var active;
|
||||
|
||||
function update() {
|
||||
$.each(checks, function() {
|
||||
if (this())
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
$(document).scroll(update);
|
||||
$(window).resize(update);
|
||||
setTimeout(update, 0);
|
||||
|
||||
$('article section').each(function() {
|
||||
var section = $(this);
|
||||
var anchor = $('a', section);
|
||||
// Move content until next section inside section
|
||||
section.append(section.nextUntil('section'));
|
||||
var title = anchor.attr('title') || $('h1,h2', section).first().text();
|
||||
var id = section.attr('id');
|
||||
if (!id) {
|
||||
id = hyphenate(title)
|
||||
.replace(/\s+/g, '-')
|
||||
.replace(/^#/, '')
|
||||
.replace(/[!"#$%&'\()*+,.\/:;<=>?@\[\\\]\^_`{|}~]+/g, '-')
|
||||
.replace(/-+/g, '-');
|
||||
section.attr('id', id);
|
||||
anchor.attr('name', id);
|
||||
}
|
||||
|
||||
function activate() {
|
||||
if (active)
|
||||
active.removeClass('active');
|
||||
selector.addClass('active');
|
||||
active = selector;
|
||||
}
|
||||
|
||||
// Create table of contents on the fly
|
||||
if (toc) {
|
||||
var selector = $('<li class="entry selector"><a href="#' + id + '">'
|
||||
+ title + '</a></li>').appendTo(toc);
|
||||
if (section.is('.spacer'))
|
||||
selector.addClass('spacer');
|
||||
$('a', selector).click(function() {
|
||||
smoothScrollTo(section, function() {
|
||||
window.location.hash = id;
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
checks.push(function() {
|
||||
var visible = isVisible(section);
|
||||
if (visible)
|
||||
activate();
|
||||
return visible;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Adjust height of last section so that the last anchor aligns perfectly
|
||||
// with the top of the browser window.
|
||||
var lastSection = $('article section:last');
|
||||
var lastAnchor = $('a[name]', lastSection);
|
||||
|
||||
function resize() {
|
||||
lastSection.height('auto');
|
||||
var bottom = $(document).height() - lastAnchor.offset().top - $(window).height();
|
||||
if (bottom < 0)
|
||||
lastSection.height(lastSection.height() - bottom);
|
||||
}
|
||||
|
||||
if (lastSection.length && lastAnchor.length) {
|
||||
$(window).on({
|
||||
load: resize,
|
||||
resize: resize
|
||||
});
|
||||
resize();
|
||||
}
|
||||
};
|
||||
|
||||
behaviors.sticky = function() {
|
||||
$('.sticky').each(function() {
|
||||
me = $(this);
|
||||
container = $('<div/>').append(me.contents()).appendTo(me);
|
||||
// Insert a div wrapper of which the fixed class is modified depending on position
|
||||
$(window).scroll(function() {
|
||||
if (container.is(':visible'))
|
||||
container.toggleClass('fixed', me.offset().top - $(this).scrollTop() <= 0);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
behaviors.hash = function() {
|
||||
var hash = unescape(window.location.hash);
|
||||
if (hash) {
|
||||
// First see if there's a class member to open
|
||||
var target = $(hash);
|
||||
if (target.length) {
|
||||
if (target.hasClass('member'))
|
||||
toggleMember(target);
|
||||
smoothScrollTo(target);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
behaviors.thumbnails = function() {
|
||||
var thumbnails = $('.thumbnail');
|
||||
var height = 0;
|
||||
thumbnails.each(function() {
|
||||
height = Math.max(height, $(this).height());
|
||||
});
|
||||
$('.thumbnail').height(height);
|
||||
};
|
||||
|
||||
behaviors.expandableLists = function() {
|
||||
$('.expandable-list').each(function() {
|
||||
var list = $(this);
|
||||
$('<a href="#" class="arrow"/>')
|
||||
.prependTo(list)
|
||||
.click(function() {
|
||||
list.toggleClass('expanded');
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
behaviors.referenceClass = function() {
|
||||
var classes = $('.reference-classes');
|
||||
if (classes.length) {
|
||||
// Mark currently selected class as active. Do it client-sided
|
||||
// since the menu is generated by jsdocs.
|
||||
var path = window.location.pathname.toLowerCase();
|
||||
$('a[href="' + path + '"]', classes).addClass('active');
|
||||
}
|
||||
};
|
||||
|
||||
behaviors.hover = function() {
|
||||
$('.hover').hover(function() {
|
||||
$('.normal', this).toggleClass('hidden');
|
||||
$('.over', this).toggleClass('hidden');
|
||||
});
|
||||
};
|
||||
|
||||
behaviors.code = function() {
|
||||
$('.code:visible, pre:visible code').each(function() {
|
||||
createCode($(this));
|
||||
});
|
||||
};
|
||||
|
||||
behaviors.paperscript = function() {
|
||||
// Ignore all paperscripts in the automatic load event, and load them
|
||||
// separately in createPaperScript() when needed.
|
||||
$('script[type="text/paperscript"]').attr('ignore', 'true');
|
||||
$('.paperscript:visible').each(function() {
|
||||
createPaperScript($(this));
|
||||
});
|
||||
};
|
||||
|
||||
function createCodeMirror(place, options, source) {
|
||||
return new CodeMirror(place, $.extend({}, {
|
||||
mode: 'javascript',
|
||||
lineNumbers: true,
|
||||
matchBrackets: true,
|
||||
tabSize: 4,
|
||||
indentUnit: 4,
|
||||
indentWithTabs: true,
|
||||
tabMode: 'shift',
|
||||
value: source.text().match(
|
||||
// Remove first & last empty line
|
||||
/^\s*?[\n\r]?([\u0000-\uffff]*?)[\n\r]?\s*?$/)[1]
|
||||
}, options));
|
||||
}
|
||||
|
||||
function createCode(element) {
|
||||
if (element.data('initialized'))
|
||||
return;
|
||||
var start = element.attr('start');
|
||||
var highlight = element.attr('highlight');
|
||||
var editor = createCodeMirror(function(el) {
|
||||
element.replaceWith(el);
|
||||
}, {
|
||||
lineNumbers: !element.parent('.resource-text').length,
|
||||
firstLineNumber: parseInt(start || 1, 10),
|
||||
mode: element.attr('mode') || 'javascript',
|
||||
readOnly: true
|
||||
}, element);
|
||||
if (highlight) {
|
||||
var highlights = highlight.split(',');
|
||||
for (var i = 0, l = highlights.length; i < l; i++) {
|
||||
var highlight = highlights[i].split('-');
|
||||
var hlStart = parseInt(highlight[0], 10) - 1;
|
||||
var hlEnd = highlight.length == 2
|
||||
? parseInt(highlight[1], 10) - 1 : hlStart;
|
||||
if (start) {
|
||||
hlStart -= start - 1;
|
||||
hlEnd -= start - 1;
|
||||
}
|
||||
for (var j = hlStart; j <= hlEnd; j++) {
|
||||
editor.setLineClass(j, 'highlight');
|
||||
}
|
||||
}
|
||||
}
|
||||
element.data('initialized', true);
|
||||
}
|
||||
|
||||
function createPaperScript(element) {
|
||||
if (element.data('initialized'))
|
||||
return;
|
||||
|
||||
var script = $('script', element).orNull(),
|
||||
runButton = $('.button.run', element).orNull();
|
||||
if (!script)
|
||||
return;
|
||||
// Now load / parse / execute the script
|
||||
script.removeAttr('ignore');
|
||||
var scope = paper.PaperScript.load(script[0]);
|
||||
if (!runButton)
|
||||
return;
|
||||
|
||||
var canvas = $('canvas', element),
|
||||
hasResize = canvas.attr('resize'),
|
||||
showSplit = element.hasClass('split'),
|
||||
sourceFirst = element.hasClass('source'),
|
||||
editor = null,
|
||||
hasBorders = true,
|
||||
edited = false,
|
||||
animateExplain,
|
||||
explain = $('.explain', element).orNull(),
|
||||
source = $('<div class="source hidden"/>').insertBefore(script);
|
||||
|
||||
if (explain) {
|
||||
explain.addClass('hidden');
|
||||
var text = explain.html().replace(/http:\/\/([\w.]+)/g, function(url, domain) {
|
||||
return '<a href="' + url + '">' + domain + '</a>';
|
||||
}).trim();
|
||||
// Add explanation bubbles to tickle the visitor's fancy
|
||||
var explanations = [{
|
||||
index: 0,
|
||||
list: [
|
||||
[text ? 4 : 3, text || ''],
|
||||
[1, ''],
|
||||
[4, '<b>Note:</b> You can view and even edit<br>the source right here in the browser'],
|
||||
[1, ''],
|
||||
[3, 'To do so, simply press the <b>Source</b> button →']
|
||||
]
|
||||
}, {
|
||||
index: 0,
|
||||
indexIfEdited: 3, // Skip first sentence if user has already edited code
|
||||
list: [
|
||||
[4, ''],
|
||||
[3, 'Why don\'t you try editing the code?'],
|
||||
[1, ''],
|
||||
[4, 'To run it again, simply press press <b>Run</b> →']
|
||||
]
|
||||
}];
|
||||
var timer,
|
||||
mode;
|
||||
animateExplain = function(clearPrevious) {
|
||||
if (timer)
|
||||
timer = clearTimeout(timer);
|
||||
// Set previous mode's index to the end?
|
||||
if (mode && clearPrevious)
|
||||
mode.index = mode.list.length;
|
||||
mode = explanations[source.hasClass('hidden') ? 0 : 1];
|
||||
if (edited && mode.index < mode.indexIfEdited)
|
||||
mode.index = mode.indexIfEdited;
|
||||
var entry = mode.list[mode.index];
|
||||
if (entry) {
|
||||
explain.removeClass('hidden');
|
||||
explain.html(entry[1]);
|
||||
timer = setTimeout(function() {
|
||||
// Only increase once we're stepping, not in animate()
|
||||
// itself, as entering & leaving would continuosly step
|
||||
mode.index++;
|
||||
animateExplain();
|
||||
}, entry[0] * 1000);
|
||||
}
|
||||
if (!entry || !entry[1])
|
||||
explain.addClass('hidden');
|
||||
};
|
||||
element
|
||||
.mouseover(function() {
|
||||
if (!timer)
|
||||
animateExplain();
|
||||
})
|
||||
.mouseout(function() {
|
||||
// Check the effect of :hover on button to see if we need
|
||||
// to turn off...
|
||||
// TODO: make mouseenter / mouseleave events work again
|
||||
if (timer && runButton.css('display') == 'none') {
|
||||
timer = clearTimeout(timer);
|
||||
explain.addClass('hidden');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function showSource(show) {
|
||||
source.toggleClass('hidden', !show);
|
||||
runButton.text(show ? 'Run' : 'Source');
|
||||
if (explain)
|
||||
animateExplain(true);
|
||||
if (show && !editor) {
|
||||
editor = createCodeMirror(source[0], {
|
||||
onKeyEvent: function(editor, event) {
|
||||
edited = true;
|
||||
}
|
||||
}, script);
|
||||
}
|
||||
}
|
||||
|
||||
function runScript() {
|
||||
// Update script to edited version
|
||||
var code = editor.getValue();
|
||||
script.text(code);
|
||||
// Keep a reference to the used canvas, since we're going to
|
||||
// fully clear the scope and initialize again with this canvas.
|
||||
// Support both old and new versions of paper.js for now:
|
||||
var element = scope.view.element;
|
||||
// Clear scope first, then evaluate a new script.
|
||||
scope.clear();
|
||||
scope.initialize(script[0]);
|
||||
scope.setup(element);
|
||||
scope.execute(code);
|
||||
}
|
||||
|
||||
function resize() {
|
||||
source
|
||||
.width(element.width() - (hasBorders ? 2 : 1))
|
||||
.height(element.height() - (hasBorders ? 2 : 0));
|
||||
if (editor)
|
||||
editor.refresh();
|
||||
}
|
||||
|
||||
function toggleView() {
|
||||
var show = source.hasClass('hidden');
|
||||
resize();
|
||||
canvas.toggleClass('hidden', show);
|
||||
showSource(show);
|
||||
if (!show)
|
||||
runScript();
|
||||
// Add extra margin if there is scrolling
|
||||
var scrollHeight = $('.CodeMirror .CodeMirror-scroll', source).height();
|
||||
runButton.css('margin-right', scrollHeight > element.height() ? 25 : 8);
|
||||
}
|
||||
|
||||
if (hasResize) {
|
||||
paper.view.on('resize', resize);
|
||||
hasBorders = false;
|
||||
source.css('border-width', '0 0 0 1px');
|
||||
}
|
||||
|
||||
if (showSplit) {
|
||||
showSource(true);
|
||||
} else if (sourceFirst) {
|
||||
toggleView();
|
||||
}
|
||||
|
||||
runButton
|
||||
.click(function() {
|
||||
if (showSplit) {
|
||||
runScript();
|
||||
} else {
|
||||
toggleView();
|
||||
}
|
||||
return false;
|
||||
})
|
||||
.mousedown(function() {
|
||||
return false;
|
||||
});
|
||||
|
||||
element.data('initialized', true);
|
||||
}
|
||||
|
||||
// Reference (before behaviors)
|
||||
|
||||
var lastMember = null;
|
||||
function toggleMember(member, dontScroll, offsetElement) {
|
||||
var link = $('.member-link:first', member);
|
||||
if (!link.length)
|
||||
return true;
|
||||
var desc = $('.member-description', member);
|
||||
var visible = !link.hasClass('hidden');
|
||||
// Retrieve y-offset before any changes, so we can correct scrolling after
|
||||
var offset = (offsetElement || member).offset().top;
|
||||
if (lastMember && !lastMember.is(member)) {
|
||||
var prev = lastMember;
|
||||
lastMember = null;
|
||||
toggleMember(prev, true);
|
||||
}
|
||||
lastMember = visible && member;
|
||||
link.toggleClass('hidden', visible);
|
||||
desc.toggleClass('hidden', !visible);
|
||||
if (!dontScroll) {
|
||||
// Correct scrolling relatively to where we are, by checking the amount
|
||||
// the element has shifted due to the above toggleMember call, and
|
||||
// correcting by 11px offset, caused by 1px border and 10px padding.
|
||||
var scroll = $(document).scrollTop();
|
||||
// Only change hash if we're not in frames, since there are redrawing
|
||||
// issues with that on Chrome.
|
||||
if (parent === self)
|
||||
window.location.hash = visible ? member.attr('id') : '';
|
||||
$(document).scrollTop(scroll
|
||||
+ (visible ? desc : link).offset().top - offset
|
||||
+ 11 * (visible ? 1 : -1));
|
||||
}
|
||||
if (!member.data('initialized') && visible) {
|
||||
behaviors.code();
|
||||
behaviors.paperscript();
|
||||
member.data('initialized', true);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
$(function() {
|
||||
$('.reference .member').each(function() {
|
||||
var member = $(this);
|
||||
var link = $('.member-link', member);
|
||||
// Add header to description, with link and closing button
|
||||
var header = $('<div class="member-header"/>').prependTo($('.member-description', member));
|
||||
// Clone link, but remove name, id and change href
|
||||
link.clone().removeAttr('name').removeAttr('id').attr('href', '#').appendTo(header);
|
||||
// Add closing button.
|
||||
header.append('<div class="member-close"><input type="button" value="Close"></div>');
|
||||
});
|
||||
|
||||
// Give open / close buttons behavior
|
||||
$('.reference')
|
||||
.on('click', '.member-link, .member-close', function() {
|
||||
return toggleMember($(this).parents('.member'));
|
||||
})
|
||||
.on('click', '.member-text a', function() {
|
||||
if (this.href.match(/^(.*?)\/?#|$/)[1] === document.location.href.match(/^(.*?)\/?(?:#|$)/)[1]) {
|
||||
toggleMember($(this.href.match(/(#.*)$/)[1]), false, $(this));
|
||||
return false;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// DOM-Ready
|
||||
|
||||
$(function() {
|
||||
for (var i in behaviors)
|
||||
behaviors[i]();
|
||||
});
|
||||
6
paper.js/assets/paperjs/docs/assets/js/jquery.js
vendored
Normal file
6
paper.js/assets/paperjs/docs/assets/js/jquery.js
vendored
Normal file
File diff suppressed because one or more lines are too long
17472
paper.js/assets/paperjs/docs/assets/js/paper.js
Normal file
17472
paper.js/assets/paperjs/docs/assets/js/paper.js
Normal file
File diff suppressed because it is too large
Load Diff
2188
paper.js/assets/paperjs/docs/classes/Color.html
Normal file
2188
paper.js/assets/paperjs/docs/classes/Color.html
Normal file
File diff suppressed because it is too large
Load Diff
8877
paper.js/assets/paperjs/docs/classes/CompoundPath.html
Normal file
8877
paper.js/assets/paperjs/docs/classes/CompoundPath.html
Normal file
File diff suppressed because it is too large
Load Diff
2323
paper.js/assets/paperjs/docs/classes/Curve.html
Normal file
2323
paper.js/assets/paperjs/docs/classes/Curve.html
Normal file
File diff suppressed because it is too large
Load Diff
672
paper.js/assets/paperjs/docs/classes/CurveLocation.html
Normal file
672
paper.js/assets/paperjs/docs/classes/CurveLocation.html
Normal file
@ -0,0 +1,672 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CurveLocation</title>
|
||||
<base target="class-frame">
|
||||
<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
|
||||
<script src="../assets/js/paper.js"></script>
|
||||
<script src="../assets/js/jquery.js"></script>
|
||||
<script src="../assets/js/codemirror.js"></script>
|
||||
<script src="../assets/js/docs.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<article class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>CurveLocation</h1>
|
||||
|
||||
<p>CurveLocation objects describe a location on <a href="../classes/Curve.html"><tt>Curve</tt></a> objects, as defined by the curve-time <a href="../classes/CurveLocation.html#time"><tt>time</tt></a>, a value between <code>0</code> (beginning of the curve) and <code>1</code> (end of the curve). If the curve is part of a <a href="../classes/Path.html"><tt>Path</tt></a> item, its <a href="../classes/CurveLocation.html#index"><tt>index</tt></a> inside the <a href="../classes/Path.html#curves"><tt>path.curves</tt></a> array is also provided.</p>
|
||||
<p>The class is in use in many places, such as <a href="../classes/Path.html#getlocationat-offset"><tt>path.getLocationAt(offset)</tt></a>, <a href="../classes/Path.html#getlocationof-point"><tt>path.getLocationOf(point)</tt></a>, <a href="../classes/PathItem.html#getnearestlocation-point"><tt>pathItem.getNearestLocation(point)</tt></a>, <a href="../classes/PathItem.html#getintersections-path"><tt>pathItem.getIntersections(path)</tt></a>, etc.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- =============================== constructors ========================== -->
|
||||
<div class="reference-members">
|
||||
<h2>Constructors</h2>
|
||||
|
||||
|
||||
<div id="curvelocation-curve-time" class="member">
|
||||
<div class="member-link">
|
||||
<a name="curvelocation-curve-time" href="#curvelocation-curve-time"><tt><b>CurveLocation</b>(curve, time[, point])</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Creates a new CurveLocation object.</p>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Parameters:</h4>
|
||||
|
||||
<li>
|
||||
<tt>curve:</tt>
|
||||
<a href="../classes/Curve.html"><tt>Curve</tt></a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>time:</tt>
|
||||
<tt>Number</tt>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>point:</tt>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
|
||||
— optional
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/CurveLocation.html"><tt>CurveLocation</tt></a></tt>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- ================================ properties =========================== -->
|
||||
<div class="reference-members">
|
||||
<h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="segment" class="member">
|
||||
<div class="member-link">
|
||||
<a name="segment" href="#segment"><tt><b>segment</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The segment of the curve which is closer to the described location.</p>
|
||||
|
||||
<p>Read only.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/Segment.html"><tt>Segment</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="curve" class="member">
|
||||
<div class="member-link">
|
||||
<a name="curve" href="#curve"><tt><b>curve</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The curve that this location belongs to.</p>
|
||||
|
||||
<p>Read only.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/Curve.html"><tt>Curve</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="path" class="member">
|
||||
<div class="member-link">
|
||||
<a name="path" href="#path"><tt><b>path</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The path that this locations is situated on.</p>
|
||||
|
||||
<p>Read only.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/Path.html"><tt>Path</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="index" class="member">
|
||||
<div class="member-link">
|
||||
<a name="index" href="#index"><tt><b>index</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The index of the <a href="../classes/CurveLocation.html#curve"><tt>curve</tt></a> within the <a href="../classes/Path.html#curves"><tt>path.curves</tt></a> list, if it is part of a <a href="../classes/Path.html"><tt>Path</tt></a> item.</p>
|
||||
|
||||
<p>Read only.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="time" class="member">
|
||||
<div class="member-link">
|
||||
<a name="time" href="#time"><tt><b>time</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The curve-time parameter, as used by various bezier curve calculations. It is value between <code>0</code> (beginning of the curve) and <code>1</code> (end of the curve).</p>
|
||||
|
||||
<p>Read only.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="point" class="member">
|
||||
<div class="member-link">
|
||||
<a name="point" href="#point"><tt><b>point</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The point which is defined by the <a href="../classes/CurveLocation.html#curve"><tt>curve</tt></a> and <a href="../classes/CurveLocation.html#time"><tt>time</tt></a>.</p>
|
||||
|
||||
<p>Read only.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="offset" class="member">
|
||||
<div class="member-link">
|
||||
<a name="offset" href="#offset"><tt><b>offset</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The length of the path from its beginning up to the location described by this object. If the curve is not part of a path, then the length within the curve is returned instead.</p>
|
||||
|
||||
<p>Read only.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="curveoffset" class="member">
|
||||
<div class="member-link">
|
||||
<a name="curveoffset" href="#curveoffset"><tt><b>curveOffset</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The length of the curve from its beginning up to the location described by this object.</p>
|
||||
|
||||
<p>Read only.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="intersection" class="member">
|
||||
<div class="member-link">
|
||||
<a name="intersection" href="#intersection"><tt><b>intersection</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The curve location on the intersecting curve, if this location is the result of a call to <a href="../classes/PathItem.html#getintersections-path"><tt>pathItem.getIntersections(path)</tt></a> / <a href="../classes/Curve.html#getintersections-curve"><tt>curve.getIntersections(curve)</tt></a>.</p>
|
||||
|
||||
<p>Read only.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/CurveLocation.html"><tt>CurveLocation</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="tangent" class="member">
|
||||
<div class="member-link">
|
||||
<a name="tangent" href="#tangent"><tt><b>tangent</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The tangential vector to the <a href="../classes/CurveLocation.html#curve"><tt>curve</tt></a> at the given location.</p>
|
||||
|
||||
<p>Read only.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="normal" class="member">
|
||||
<div class="member-link">
|
||||
<a name="normal" href="#normal"><tt><b>normal</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The normal vector to the <a href="../classes/CurveLocation.html#curve"><tt>curve</tt></a> at the given location.</p>
|
||||
|
||||
<p>Read only.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="curvature" class="member">
|
||||
<div class="member-link">
|
||||
<a name="curvature" href="#curvature"><tt><b>curvature</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The curvature of the <a href="../classes/CurveLocation.html#curve"><tt>curve</tt></a> at the given location.</p>
|
||||
|
||||
<p>Read only.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="distance" class="member">
|
||||
<div class="member-link">
|
||||
<a name="distance" href="#distance"><tt><b>distance</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The distance from the queried point to the returned location.</p>
|
||||
|
||||
<p>Read only.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>See also:</h4>
|
||||
|
||||
<li><tt><a href="../classes/Curve.html#getnearestlocation-point"><tt>curve.getNearestLocation(point)</tt></a></tt></li>
|
||||
|
||||
<li><tt><a href="../classes/PathItem.html#getnearestlocation-point"><tt>pathItem.getNearestLocation(point)</tt></a></tt></li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- ============================== methods ================================ -->
|
||||
<div class="reference-members">
|
||||
<h2>Methods</h2>
|
||||
|
||||
|
||||
<div id="equals-location" class="member">
|
||||
<div class="member-link">
|
||||
<a name="equals-location" href="#equals-location"><tt><b>equals</b>(location)</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Checks whether tow CurveLocation objects are describing the same location on a path, by applying the same tolerances as elsewhere when dealing with curve-time parameters.</p>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Parameters:</h4>
|
||||
|
||||
<li>
|
||||
<tt>location:</tt>
|
||||
<a href="../classes/CurveLocation.html"><tt>CurveLocation</tt></a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the locations are equal, <tt>false</tt> otherwise
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="tostring" class="member">
|
||||
<div class="member-link">
|
||||
<a name="tostring" href="#tostring"><tt><b>toString</b>()</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><tt>String</tt></tt> — a string representation of the curve location
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Tests</h3>
|
||||
|
||||
<div id="istouching" class="member">
|
||||
<div class="member-link">
|
||||
<a name="istouching" href="#istouching"><tt><b>isTouching</b>()</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Checks if the location is an intersection with another curve and is merely touching the other curve, as opposed to crossing it.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the location is an intersection that is merely touching another curve, <tt>false</tt> otherwise
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>See also:</h4>
|
||||
|
||||
<li><tt><a href="../classes/CurveLocation.html#iscrossing"><tt>isCrossing</tt></a>()</tt></li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="iscrossing" class="member">
|
||||
<div class="member-link">
|
||||
<a name="iscrossing" href="#iscrossing"><tt><b>isCrossing</b>()</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Checks if the location is an intersection with another curve and is crossing the other curve, as opposed to just touching it.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the location is an intersection that is crossing another curve, <tt>false</tt> otherwise
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>See also:</h4>
|
||||
|
||||
<li><tt><a href="../classes/CurveLocation.html#istouching"><tt>isTouching</tt></a>()</tt></li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="hasoverlap" class="member">
|
||||
<div class="member-link">
|
||||
<a name="hasoverlap" href="#hasoverlap"><tt><b>hasOverlap</b>()</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Checks if the location is an intersection with another curve and is part of an overlap between the two involved paths.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the location is an intersection that is part of an overlap between the two involved paths, <tt>false</tt> otherwise
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>See also:</h4>
|
||||
|
||||
<li><tt><a href="../classes/CurveLocation.html#iscrossing"><tt>isCrossing</tt></a>()</tt></li>
|
||||
|
||||
<li><tt><a href="../classes/CurveLocation.html#istouching"><tt>isTouching</tt></a>()</tt></li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================== -->
|
||||
<p class="footer">
|
||||
Paper.js v0.12.17<br>
|
||||
Copyright © 2011—2022 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
||||
<div class="content-end"></div>
|
||||
|
||||
|
||||
</article>
|
||||
</body>
|
||||
176
paper.js/assets/paperjs/docs/classes/Event.html
Normal file
176
paper.js/assets/paperjs/docs/classes/Event.html
Normal file
@ -0,0 +1,176 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Event</title>
|
||||
<base target="class-frame">
|
||||
<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
|
||||
<script src="../assets/js/paper.js"></script>
|
||||
<script src="../assets/js/jquery.js"></script>
|
||||
<script src="../assets/js/codemirror.js"></script>
|
||||
<script src="../assets/js/docs.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<article class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>Event</h1>
|
||||
|
||||
<p>The Event object is the base class for any of the other event types, such as <a href="../classes/MouseEvent.html"><tt>MouseEvent</tt></a>, <a href="../classes/ToolEvent.html"><tt>ToolEvent</tt></a> and <a href="../classes/KeyEvent.html"><tt>KeyEvent</tt></a>.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- ================================ properties =========================== -->
|
||||
<div class="reference-members">
|
||||
<h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="timestamp" class="member">
|
||||
<div class="member-link">
|
||||
<a name="timestamp" href="#timestamp"><tt><b>timeStamp</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The time at which the event was created, in milliseconds since the epoch.</p>
|
||||
|
||||
<p>Read only.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="modifiers" class="member">
|
||||
<div class="member-link">
|
||||
<a name="modifiers" href="#modifiers"><tt><b>modifiers</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The current state of the keyboard modifiers.</p>
|
||||
|
||||
<p>Read only.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>object</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>See also:</h4>
|
||||
|
||||
<li><tt><a href="../classes/Key.html#modifiers"><tt>Key.modifiers</tt></a></tt></li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- ============================== methods ================================ -->
|
||||
<div class="reference-members">
|
||||
<h2>Methods</h2>
|
||||
|
||||
|
||||
<div id="preventdefault" class="member">
|
||||
<div class="member-link">
|
||||
<a name="preventdefault" href="#preventdefault"><tt><b>preventDefault</b>()</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Cancels the event if it is cancelable, without stopping further propagation of the event.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="stoppropagation" class="member">
|
||||
<div class="member-link">
|
||||
<a name="stoppropagation" href="#stoppropagation"><tt><b>stopPropagation</b>()</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Prevents further propagation of the current event.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="stop" class="member">
|
||||
<div class="member-link">
|
||||
<a name="stop" href="#stop"><tt><b>stop</b>()</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Cancels the event if it is cancelable, and stops stopping further propagation of the event. This is has the same effect as calling both <a href="../classes/Event.html#stoppropagation"><tt>stopPropagation</tt></a>() and <a href="../classes/Event.html#preventdefault"><tt>preventDefault</tt></a>().</p>
|
||||
<p>Any handler can also return <code>false</code> to indicate that <code>stop()</code> should be called right after.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================== -->
|
||||
<p class="footer">
|
||||
Paper.js v0.12.17<br>
|
||||
Copyright © 2011—2022 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
||||
<div class="content-end"></div>
|
||||
|
||||
|
||||
</article>
|
||||
</body>
|
||||
240
paper.js/assets/paperjs/docs/classes/Gradient.html
Normal file
240
paper.js/assets/paperjs/docs/classes/Gradient.html
Normal file
@ -0,0 +1,240 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Gradient</title>
|
||||
<base target="class-frame">
|
||||
<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
|
||||
<script src="../assets/js/paper.js"></script>
|
||||
<script src="../assets/js/jquery.js"></script>
|
||||
<script src="../assets/js/codemirror.js"></script>
|
||||
<script src="../assets/js/docs.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<article class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>Gradient</h1>
|
||||
|
||||
<p>The Gradient object.</p>
|
||||
<h4>Example:<span class="description">Applying a linear gradient color containing evenly distributed color stops:</span></h4>
|
||||
|
||||
<div class="paperscript split">
|
||||
|
||||
<div class="buttons">
|
||||
<div class="button run">Run</div>
|
||||
</div>
|
||||
|
||||
<script type="text/paperscript" canvas="canvas-0">
|
||||
// Define two points which we will be using to construct
|
||||
// the path and to position the gradient color:
|
||||
var topLeft = view.center - [80, 80];
|
||||
var bottomRight = view.center + [80, 80];
|
||||
|
||||
// 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
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="300" id="canvas-0"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
<h4>Example:<span class="description">Create a circle shaped path at the center of the view, using 40% of the height of the view as its radius and fill it with a radial gradient color:</span></h4>
|
||||
|
||||
<div class="paperscript split">
|
||||
|
||||
<div class="buttons">
|
||||
<div class="button run">Run</div>
|
||||
</div>
|
||||
|
||||
<script type="text/paperscript" canvas="canvas-1">
|
||||
var path = new Path.Circle({
|
||||
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
|
||||
};
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="300" id="canvas-1"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- ================================ properties =========================== -->
|
||||
<div class="reference-members">
|
||||
<h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="stops" class="member">
|
||||
<div class="member-link">
|
||||
<a name="stops" href="#stops"><tt><b>stops</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The gradient stops on the gradient ramp.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
Array of <a href="../classes/GradientStop.html"><tt>GradientStop</tt></a> objects
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="radial" class="member">
|
||||
<div class="member-link">
|
||||
<a name="radial" href="#radial"><tt><b>radial</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>Specifies whether the gradient is radial or linear.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>Boolean</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- ============================== methods ================================ -->
|
||||
<div class="reference-members">
|
||||
<h2>Methods</h2>
|
||||
|
||||
|
||||
<div id="clone" class="member">
|
||||
<div class="member-link">
|
||||
<a name="clone" href="#clone"><tt><b>clone</b>()</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/Gradient.html"><tt>Gradient</tt></a></tt> — a copy of the gradient
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="equals-gradient" class="member">
|
||||
<div class="member-link">
|
||||
<a name="equals-gradient" href="#equals-gradient"><tt><b>equals</b>(gradient)</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Checks whether the gradient is equal to the supplied gradient.</p>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Parameters:</h4>
|
||||
|
||||
<li>
|
||||
<tt>gradient:</tt>
|
||||
<a href="../classes/Gradient.html"><tt>Gradient</tt></a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if they are equal, <tt>false</tt> otherwise
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================== -->
|
||||
<p class="footer">
|
||||
Paper.js v0.12.17<br>
|
||||
Copyright © 2011—2022 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
||||
<div class="content-end"></div>
|
||||
|
||||
|
||||
</article>
|
||||
</body>
|
||||
273
paper.js/assets/paperjs/docs/classes/GradientStop.html
Normal file
273
paper.js/assets/paperjs/docs/classes/GradientStop.html
Normal file
@ -0,0 +1,273 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>GradientStop</title>
|
||||
<base target="class-frame">
|
||||
<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
|
||||
<script src="../assets/js/paper.js"></script>
|
||||
<script src="../assets/js/jquery.js"></script>
|
||||
<script src="../assets/js/codemirror.js"></script>
|
||||
<script src="../assets/js/docs.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<article class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>GradientStop</h1>
|
||||
|
||||
<p>The GradientStop object.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- =============================== constructors ========================== -->
|
||||
<div class="reference-members">
|
||||
<h2>Constructors</h2>
|
||||
|
||||
|
||||
<div id="gradientstop" class="member">
|
||||
<div class="member-link">
|
||||
<a name="gradientstop" href="#gradientstop"><tt><b>GradientStop</b>([color[, offset]])</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Creates a GradientStop object.</p>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Parameters:</h4>
|
||||
|
||||
<li>
|
||||
<tt>color:</tt>
|
||||
<a href="../classes/Color.html"><tt>Color</tt></a>
|
||||
— the color of the stop
|
||||
— optional, default: <tt>new Color(0, 0, 0)</tt>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>offset:</tt>
|
||||
<tt>Number</tt>
|
||||
— the position of the stop on the gradient ramp as a value between <code>0</code> and <code>1</code>; <code>null</code> or <code>undefined</code> for automatic assignment.
|
||||
— optional, default: <tt>null</tt>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/GradientStop.html"><tt>GradientStop</tt></a></tt>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- ================================ properties =========================== -->
|
||||
<div class="reference-members">
|
||||
<h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="offset" class="member">
|
||||
<div class="member-link">
|
||||
<a name="offset" href="#offset"><tt><b>offset</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The ramp-point of the gradient stop as a value between <code>0</code> and <code>1</code>.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h4>Example:<span class="description">Animating a gradient's ramp points:</span></h4>
|
||||
|
||||
<div class="paperscript split">
|
||||
|
||||
<div class="buttons">
|
||||
<div class="button run">Run</div>
|
||||
</div>
|
||||
|
||||
<script type="text/paperscript" canvas="canvas-0">
|
||||
// Create a circle shaped path at the center of the view,
|
||||
// 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
|
||||
});
|
||||
|
||||
path.fillColor = {
|
||||
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 offset between 0.7 and 0.9:
|
||||
blackStop.offset = Math.sin(event.time * 5) * 0.1 + 0.8;
|
||||
|
||||
// Animate the offset between 0.2 and 0.4
|
||||
var redStop = gradient.stops[1];
|
||||
redStop.offset = Math.sin(event.time * 3) * 0.1 + 0.3;
|
||||
}
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="300" id="canvas-0"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="color" class="member">
|
||||
<div class="member-link">
|
||||
<a name="color" href="#color"><tt><b>color</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The color of the gradient stop.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/Color.html"><tt>Color</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h4>Example:<span class="description">Animating a gradient's ramp points:</span></h4>
|
||||
|
||||
<div class="paperscript split">
|
||||
|
||||
<div class="buttons">
|
||||
<div class="button run">Run</div>
|
||||
</div>
|
||||
|
||||
<script type="text/paperscript" canvas="canvas-1">
|
||||
// Create a circle shaped path at the center of the view,
|
||||
// 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
|
||||
});
|
||||
|
||||
path.fillColor = {
|
||||
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];
|
||||
var blackStop = path.fillColor.gradient.stops[2];
|
||||
|
||||
// This function is called each frame of the animation:
|
||||
function onFrame(event) {
|
||||
// Animate the offset between 0.7 and 0.9:
|
||||
blackStop.offset = Math.sin(event.time * 5) * 0.1 + 0.8;
|
||||
|
||||
// Animate the offset between 0.2 and 0.4
|
||||
redStop.offset = Math.sin(event.time * 3) * 0.1 + 0.3;
|
||||
}
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="300" id="canvas-1"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- ============================== methods ================================ -->
|
||||
<div class="reference-members">
|
||||
<h2>Methods</h2>
|
||||
|
||||
|
||||
<div id="clone" class="member">
|
||||
<div class="member-link">
|
||||
<a name="clone" href="#clone"><tt><b>clone</b>()</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/GradientStop.html"><tt>GradientStop</tt></a></tt> — a copy of the gradient-stop
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================== -->
|
||||
<p class="footer">
|
||||
Paper.js v0.12.17<br>
|
||||
Copyright © 2011—2022 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
||||
<div class="content-end"></div>
|
||||
|
||||
|
||||
</article>
|
||||
</body>
|
||||
6864
paper.js/assets/paperjs/docs/classes/Group.html
Normal file
6864
paper.js/assets/paperjs/docs/classes/Group.html
Normal file
File diff suppressed because it is too large
Load Diff
239
paper.js/assets/paperjs/docs/classes/HitResult.html
Normal file
239
paper.js/assets/paperjs/docs/classes/HitResult.html
Normal file
@ -0,0 +1,239 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>HitResult</title>
|
||||
<base target="class-frame">
|
||||
<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
|
||||
<script src="../assets/js/paper.js"></script>
|
||||
<script src="../assets/js/jquery.js"></script>
|
||||
<script src="../assets/js/codemirror.js"></script>
|
||||
<script src="../assets/js/docs.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<article class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>HitResult</h1>
|
||||
|
||||
<p>A HitResult object contains information about the results of a hit test. It is returned by <a href="../classes/Item.html#hittest-point"><tt>item.hitTest(point)</tt></a> and <a href="../classes/Project.html#hittest-point"><tt>project.hitTest(point)</tt></a>.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- ================================ properties =========================== -->
|
||||
<div class="reference-members">
|
||||
<h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="type" class="member">
|
||||
<div class="member-link">
|
||||
<a name="type" href="#type"><tt><b>type</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>Describes the type of the hit result. For example, if you hit a segment point, the type would be <code>'segment'</code>.</p>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Values:</h4>
|
||||
<li><tt>'segment'</tt>, <tt>'handle-in'</tt>, <tt>'handle-out'</tt>, <tt>'curve'</tt>, <tt>'stroke'</tt>, <tt>'fill'</tt>, <tt>'bounds'</tt>, <tt>'center'</tt>, <tt>'pixel'</tt></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>String</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="name" class="member">
|
||||
<div class="member-link">
|
||||
<a name="name" href="#name"><tt><b>name</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>If the HitResult has a <a href="../classes/HitResult.html#type"><tt>hitResult.type</tt></a> of <code>'bounds'</code>, this property describes which corner of the bounding rectangle was hit.</p>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Values:</h4>
|
||||
<li><tt>'top-left'</tt>, <tt>'top-right'</tt>, <tt>'bottom-left'</tt>, <tt>'bottom-right'</tt>, <tt>'left-center'</tt>, <tt>'top-center'</tt>, <tt>'right-center'</tt>, <tt>'bottom- center'</tt></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>String</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="item" class="member">
|
||||
<div class="member-link">
|
||||
<a name="item" href="#item"><tt><b>item</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The item that was hit.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/Item.html"><tt>Item</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="location" class="member">
|
||||
<div class="member-link">
|
||||
<a name="location" href="#location"><tt><b>location</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>If the HitResult has a type of ‘curve’ or ‘stroke’, this property gives more information about the exact position that was hit on the path.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/CurveLocation.html"><tt>CurveLocation</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="color" class="member">
|
||||
<div class="member-link">
|
||||
<a name="color" href="#color"><tt><b>color</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>If the HitResult has a type of ‘pixel’, this property refers to the color of the pixel on the <a href="../classes/Raster.html"><tt>Raster</tt></a> that was hit.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/Color.html"><tt>Color</tt></a>⟋<tt>null</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="segment" class="member">
|
||||
<div class="member-link">
|
||||
<a name="segment" href="#segment"><tt><b>segment</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>If the HitResult has a type of ‘stroke’, ‘segment’, ‘handle-in’ or ‘handle-out’, this property refers to the segment that was hit or that is closest to the hitResult.location on the curve.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/Segment.html"><tt>Segment</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="point" class="member">
|
||||
<div class="member-link">
|
||||
<a name="point" href="#point"><tt><b>point</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>Describes the actual coordinates of the segment, handle or bounding box corner that was hit.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================== -->
|
||||
<p class="footer">
|
||||
Paper.js v0.12.17<br>
|
||||
Copyright © 2011—2022 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
||||
<div class="content-end"></div>
|
||||
|
||||
|
||||
</article>
|
||||
</body>
|
||||
6628
paper.js/assets/paperjs/docs/classes/Item.html
Normal file
6628
paper.js/assets/paperjs/docs/classes/Item.html
Normal file
File diff suppressed because it is too large
Load Diff
139
paper.js/assets/paperjs/docs/classes/Key.html
Normal file
139
paper.js/assets/paperjs/docs/classes/Key.html
Normal file
@ -0,0 +1,139 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Key</title>
|
||||
<base target="class-frame">
|
||||
<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
|
||||
<script src="../assets/js/paper.js"></script>
|
||||
<script src="../assets/js/jquery.js"></script>
|
||||
<script src="../assets/js/codemirror.js"></script>
|
||||
<script src="../assets/js/docs.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<article class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>Key</h1>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members">
|
||||
<h2>Static Properties</h2>
|
||||
|
||||
|
||||
<div id="modifiers" class="member">
|
||||
<div class="member-link">
|
||||
<a name="modifiers" href="#modifiers"><tt><b>Key.modifiers</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The current state of the keyboard modifiers.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>Object</tt>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="member-list">
|
||||
<h4>Options:</h4>
|
||||
<li><tt>modifiers.shift: <tt>Boolean</tt></tt> — <tt>true</tt> if the shift key is pressed, <tt>false</tt> otherwise.</li>
|
||||
<li><tt>modifiers.control: <tt>Boolean</tt></tt> — <tt>true</tt> if the control key is pressed, <tt>false</tt> otherwise.</li>
|
||||
<li><tt>modifiers.alt: <tt>Boolean</tt></tt> — <tt>true</tt> if the alt/option key is pressed, <tt>false</tt> otherwise.</li>
|
||||
<li><tt>modifiers.meta: <tt>Boolean</tt></tt> — <tt>true</tt> if the meta/windows/command key is pressed, <tt>false</tt> otherwise.</li>
|
||||
<li><tt>modifiers.capsLock: <tt>Boolean</tt></tt> — <tt>true</tt> if the caps-lock key is active, <tt>false</tt> otherwise.</li>
|
||||
<li><tt>modifiers.space: <tt>Boolean</tt></tt> — <tt>true</tt> if the space key is pressed, <tt>false</tt> otherwise.</li>
|
||||
<li><tt>modifiers.option: <tt>Boolean</tt></tt> — <tt>true</tt> if the alt/option key is pressed, <tt>false</tt> otherwise. This is the same as <code>modifiers.alt</code></li>
|
||||
<li><tt>modifiers.command: <tt>Boolean</tt></tt> — <tt>true</tt> if the meta key is pressed on Mac, or the control key is pressed on Windows and Linux, <tt>false</tt> otherwise.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members">
|
||||
<h2>Static Methods</h2>
|
||||
|
||||
|
||||
<div id="isdown-key" class="member">
|
||||
<div class="member-link">
|
||||
<a name="isdown-key" href="#isdown-key"><tt><b>Key.isDown</b>(key)</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Checks whether the specified key is pressed.</p>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Parameters:</h4>
|
||||
|
||||
<li>
|
||||
<tt>key:</tt>
|
||||
<tt>String</tt>
|
||||
— any character or special key descriptor: <tt>‘enter’</tt>, <tt>‘space’</tt>, <tt>‘shift’</tt>, <tt>‘control’</tt>, <tt>‘alt’</tt>, <tt>‘meta’</tt>, <tt>‘caps-lock’</tt>, <tt>‘left’</tt>, <tt>‘up’</tt>, <tt>‘right’</tt>, <tt>‘down’</tt>, <tt>‘escape’</tt>, <tt>‘delete’</tt>, …
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the key is pressed, <tt>false</tt> otherwise
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
<h4>Example:<span class="description">Whenever the user clicks, create a circle shaped path. If the 'a' key is pressed, fill it with red, otherwise fill it with blue:</span></h4>
|
||||
|
||||
|
||||
<pre><code>function onMouseDown(event) {
|
||||
var path = new Path.Circle(event.point, 10);
|
||||
if (Key.isDown('a')) {
|
||||
path.fillColor = 'red';
|
||||
} else {
|
||||
path.fillColor = 'blue';
|
||||
}
|
||||
}</code></pre>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================== -->
|
||||
<p class="footer">
|
||||
Paper.js v0.12.17<br>
|
||||
Copyright © 2011—2022 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
||||
<div class="content-end"></div>
|
||||
|
||||
|
||||
</article>
|
||||
</body>
|
||||
308
paper.js/assets/paperjs/docs/classes/KeyEvent.html
Normal file
308
paper.js/assets/paperjs/docs/classes/KeyEvent.html
Normal file
@ -0,0 +1,308 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>KeyEvent</title>
|
||||
<base target="class-frame">
|
||||
<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
|
||||
<script src="../assets/js/paper.js"></script>
|
||||
<script src="../assets/js/jquery.js"></script>
|
||||
<script src="../assets/js/codemirror.js"></script>
|
||||
<script src="../assets/js/docs.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<article class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>KeyEvent</h1>
|
||||
|
||||
<p> Extends <b><a href="../classes/Event.html"><tt>Event</tt></a></b></p>
|
||||
|
||||
<p>The KeyEvent object is received by the <a href="../classes/Tool.html"><tt>Tool</tt></a>’s keyboard handlers <a href="../classes/Tool.html#onkeydown"><tt>tool.onKeyDown</tt></a>, <a href="../classes/Tool.html#onkeyup"><tt>tool.onKeyUp</tt></a>. The KeyEvent object is the only parameter passed to these functions and contains information about the keyboard event.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- ================================ properties =========================== -->
|
||||
<div class="reference-members">
|
||||
<h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="type" class="member">
|
||||
<div class="member-link">
|
||||
<a name="type" href="#type"><tt><b>type</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The type of mouse event.</p>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Values:</h4>
|
||||
<li><tt>'keydown'</tt>, <tt>'keyup'</tt></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>String</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="character" class="member">
|
||||
<div class="member-link">
|
||||
<a name="character" href="#character"><tt><b>character</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The character representation of the key that caused this key event, taking into account the current key-modifiers (e.g. shift, control, caps-lock, etc.)</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>String</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="key" class="member">
|
||||
<div class="member-link">
|
||||
<a name="key" href="#key"><tt><b>key</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The key that caused this key event, either as a lower-case character or special key descriptor.</p>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Values:</h4>
|
||||
<li><tt>'enter'</tt>, <tt>'space'</tt>, <tt>'shift'</tt>, <tt>'control'</tt>, <tt>'alt'</tt>, <tt>'meta'</tt>, <tt>'caps-lock'</tt>, <tt>'left'</tt>, <tt>'up'</tt>, <tt>'right'</tt>, <tt>'down'</tt>, <tt>'escape'</tt>, <tt>'delete'</tt>, …</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>String</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- ============================== methods ================================ -->
|
||||
<div class="reference-members">
|
||||
<h2>Methods</h2>
|
||||
|
||||
|
||||
<div id="tostring" class="member">
|
||||
<div class="member-link">
|
||||
<a name="tostring" href="#tostring"><tt><b>toString</b>()</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><tt>String</tt></tt> — a string representation of the key event
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== inherited properties ====================== -->
|
||||
<div class="reference-members"><h2>Properties inherited from <a href="../classes/Event.html"><tt>Event</tt></a></h2>
|
||||
|
||||
|
||||
<div id="timestamp" class="member">
|
||||
<div class="member-link">
|
||||
<a name="timestamp" href="#timestamp"><tt><b>timeStamp</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The time at which the event was created, in milliseconds since the epoch.</p>
|
||||
|
||||
<p>Read only.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="modifiers" class="member">
|
||||
<div class="member-link">
|
||||
<a name="modifiers" href="#modifiers"><tt><b>modifiers</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The current state of the keyboard modifiers.</p>
|
||||
|
||||
<p>Read only.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>object</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>See also:</h4>
|
||||
|
||||
<li><tt><a href="../classes/Key.html#modifiers"><tt>Key.modifiers</tt></a></tt></li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- =========================== inherited methods ========================= -->
|
||||
<div class="reference-members"><h2>Methods inherited from <a href="../classes/Event.html"><tt>Event</tt></a></h2>
|
||||
|
||||
|
||||
<div id="preventdefault" class="member">
|
||||
<div class="member-link">
|
||||
<a name="preventdefault" href="#preventdefault"><tt><b>preventDefault</b>()</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Cancels the event if it is cancelable, without stopping further propagation of the event.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="stoppropagation" class="member">
|
||||
<div class="member-link">
|
||||
<a name="stoppropagation" href="#stoppropagation"><tt><b>stopPropagation</b>()</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Prevents further propagation of the current event.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="stop" class="member">
|
||||
<div class="member-link">
|
||||
<a name="stop" href="#stop"><tt><b>stop</b>()</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Cancels the event if it is cancelable, and stops stopping further propagation of the event. This is has the same effect as calling both <a href="../classes/Event.html#stoppropagation"><tt>stopPropagation</tt></a>() and <a href="../classes/Event.html#preventdefault"><tt>preventDefault</tt></a>().</p>
|
||||
<p>Any handler can also return <code>false</code> to indicate that <code>stop()</code> should be called right after.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================== -->
|
||||
<p class="footer">
|
||||
Paper.js v0.12.17<br>
|
||||
Copyright © 2011—2022 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
||||
<div class="content-end"></div>
|
||||
|
||||
|
||||
</article>
|
||||
</body>
|
||||
6850
paper.js/assets/paperjs/docs/classes/Layer.html
Normal file
6850
paper.js/assets/paperjs/docs/classes/Layer.html
Normal file
File diff suppressed because it is too large
Load Diff
1744
paper.js/assets/paperjs/docs/classes/Matrix.html
Normal file
1744
paper.js/assets/paperjs/docs/classes/Matrix.html
Normal file
File diff suppressed because it is too large
Load Diff
355
paper.js/assets/paperjs/docs/classes/MouseEvent.html
Normal file
355
paper.js/assets/paperjs/docs/classes/MouseEvent.html
Normal file
@ -0,0 +1,355 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>MouseEvent</title>
|
||||
<base target="class-frame">
|
||||
<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
|
||||
<script src="../assets/js/paper.js"></script>
|
||||
<script src="../assets/js/jquery.js"></script>
|
||||
<script src="../assets/js/codemirror.js"></script>
|
||||
<script src="../assets/js/docs.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<article class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>MouseEvent</h1>
|
||||
|
||||
<p> Extends <b><a href="../classes/Event.html"><tt>Event</tt></a></b></p>
|
||||
|
||||
<p>The MouseEvent object is received by the <a href="../classes/Item.html"><tt>Item</tt></a>’s mouse event handlers <a href="../classes/Item.html#onmousedown"><tt>item.onMouseDown</tt></a>, <a href="../classes/Item.html#onmousedrag"><tt>item.onMouseDrag</tt></a>, <a href="../classes/Item.html#onmousemove"><tt>item.onMouseMove</tt></a>, <a href="../classes/Item.html#onmouseup"><tt>item.onMouseUp</tt></a>, <a href="../classes/Item.html#onclick"><tt>item.onClick</tt></a>, <a href="../classes/Item.html#ondoubleclick"><tt>item.onDoubleClick</tt></a>, <a href="../classes/Item.html#onmouseenter"><tt>item.onMouseEnter</tt></a> and <a href="../classes/Item.html#onmouseleave"><tt>item.onMouseLeave</tt></a>. The MouseEvent object is the only parameter passed to these functions and contains information about the mouse event.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- ================================ properties =========================== -->
|
||||
<div class="reference-members">
|
||||
<h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="type" class="member">
|
||||
<div class="member-link">
|
||||
<a name="type" href="#type"><tt><b>type</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The type of mouse event.</p>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Values:</h4>
|
||||
<li><tt>'mousedown'</tt>, <tt>'mouseup'</tt>, <tt>'mousedrag'</tt>, <tt>'click'</tt>, <tt>'doubleclick'</tt>, <tt>'mousemove'</tt>, <tt>'mouseenter'</tt>, <tt>'mouseleave'</tt></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>String</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="point" class="member">
|
||||
<div class="member-link">
|
||||
<a name="point" href="#point"><tt><b>point</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The position of the mouse in project coordinates when the event was fired.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="target" class="member">
|
||||
<div class="member-link">
|
||||
<a name="target" href="#target"><tt><b>target</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The item that dispatched the event. It is different from <a href="../classes/MouseEvent.html#currenttarget"><tt>currentTarget</tt></a> when the event handler is called during the bubbling phase of the event.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/Item.html"><tt>Item</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="currenttarget" class="member">
|
||||
<div class="member-link">
|
||||
<a name="currenttarget" href="#currenttarget"><tt><b>currentTarget</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The current target for the event, as the event traverses the scene graph. It always refers to the element the event handler has been attached to as opposed to <a href="../classes/MouseEvent.html#target"><tt>target</tt></a> which identifies the element on which the event occurred.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/Item.html"><tt>Item</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="delta" class="member">
|
||||
<div class="member-link">
|
||||
<a name="delta" href="#delta"><tt><b>delta</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- ============================== methods ================================ -->
|
||||
<div class="reference-members">
|
||||
<h2>Methods</h2>
|
||||
|
||||
|
||||
<div id="tostring" class="member">
|
||||
<div class="member-link">
|
||||
<a name="tostring" href="#tostring"><tt><b>toString</b>()</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><tt>String</tt></tt> — a string representation of the mouse event
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== inherited properties ====================== -->
|
||||
<div class="reference-members"><h2>Properties inherited from <a href="../classes/Event.html"><tt>Event</tt></a></h2>
|
||||
|
||||
|
||||
<div id="timestamp" class="member">
|
||||
<div class="member-link">
|
||||
<a name="timestamp" href="#timestamp"><tt><b>timeStamp</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The time at which the event was created, in milliseconds since the epoch.</p>
|
||||
|
||||
<p>Read only.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="modifiers" class="member">
|
||||
<div class="member-link">
|
||||
<a name="modifiers" href="#modifiers"><tt><b>modifiers</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The current state of the keyboard modifiers.</p>
|
||||
|
||||
<p>Read only.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>object</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>See also:</h4>
|
||||
|
||||
<li><tt><a href="../classes/Key.html#modifiers"><tt>Key.modifiers</tt></a></tt></li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- =========================== inherited methods ========================= -->
|
||||
<div class="reference-members"><h2>Methods inherited from <a href="../classes/Event.html"><tt>Event</tt></a></h2>
|
||||
|
||||
|
||||
<div id="preventdefault" class="member">
|
||||
<div class="member-link">
|
||||
<a name="preventdefault" href="#preventdefault"><tt><b>preventDefault</b>()</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Cancels the event if it is cancelable, without stopping further propagation of the event.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="stoppropagation" class="member">
|
||||
<div class="member-link">
|
||||
<a name="stoppropagation" href="#stoppropagation"><tt><b>stopPropagation</b>()</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Prevents further propagation of the current event.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="stop" class="member">
|
||||
<div class="member-link">
|
||||
<a name="stop" href="#stop"><tt><b>stop</b>()</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Cancels the event if it is cancelable, and stops stopping further propagation of the event. This is has the same effect as calling both <a href="../classes/Event.html#stoppropagation"><tt>stopPropagation</tt></a>() and <a href="../classes/Event.html#preventdefault"><tt>preventDefault</tt></a>().</p>
|
||||
<p>Any handler can also return <code>false</code> to indicate that <code>stop()</code> should be called right after.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================== -->
|
||||
<p class="footer">
|
||||
Paper.js v0.12.17<br>
|
||||
Copyright © 2011—2022 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
||||
<div class="content-end"></div>
|
||||
|
||||
|
||||
</article>
|
||||
</body>
|
||||
459
paper.js/assets/paperjs/docs/classes/PaperScope.html
Normal file
459
paper.js/assets/paperjs/docs/classes/PaperScope.html
Normal file
@ -0,0 +1,459 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>PaperScope</title>
|
||||
<base target="class-frame">
|
||||
<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
|
||||
<script src="../assets/js/paper.js"></script>
|
||||
<script src="../assets/js/jquery.js"></script>
|
||||
<script src="../assets/js/codemirror.js"></script>
|
||||
<script src="../assets/js/docs.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<article class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>PaperScope</h1>
|
||||
|
||||
<p>The <code>PaperScope</code> class represents the scope associated with a Paper context. When working with PaperScript, these scopes are automatically created for us, and through clever scoping the properties and methods of the active scope seem to become part of the global scope.</p>
|
||||
<p>When working with normal JavaScript code, <code>PaperScope</code> objects need to be manually created and handled.</p>
|
||||
<p>Paper classes can only be accessed through <code>PaperScope</code> objects. Thus in PaperScript they are global, while in JavaScript, they are available on the global <a href="../classes/global.html#paper"><tt>paper</tt></a> object. For JavaScript you can use <a href="../classes/PaperScope.html#install-scope"><tt>paperScope.install(scope)</tt></a> to install the Paper classes and objects on the global scope. Note that when working with more than one scope, this still works for classes, but not for objects like <a href="../classes/PaperScope.html#project"><tt>paperScope.project</tt></a>, since they are not updated in the injected scope if scopes are switched.</p>
|
||||
<p>The global <a href="../classes/global.html#paper"><tt>paper</tt></a> object is simply a reference to the currently active <code>PaperScope</code>.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- =============================== constructors ========================== -->
|
||||
<div class="reference-members">
|
||||
<h2>Constructors</h2>
|
||||
|
||||
|
||||
<div id="paperscope" class="member">
|
||||
<div class="member-link">
|
||||
<a name="paperscope" href="#paperscope"><tt><b>PaperScope</b>()</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Creates a PaperScope object.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/PaperScope.html"><tt>PaperScope</tt></a></tt>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- ================================ properties =========================== -->
|
||||
<div class="reference-members">
|
||||
<h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="version" class="member">
|
||||
<div class="member-link">
|
||||
<a name="version" href="#version"><tt><b>version</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The version of Paper.js, as a string.</p>
|
||||
|
||||
<p>Read only.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>String</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="settings" class="member">
|
||||
<div class="member-link">
|
||||
<a name="settings" href="#settings"><tt><b>settings</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>Gives access to paper’s configurable settings.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>Object</tt>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="member-list">
|
||||
<h4>Options:</h4>
|
||||
<li><tt>settings.insertItems: <tt>Boolean</tt></tt> — controls whether newly created items are automatically inserted into the scene graph, by adding them to <a href="../classes/Project.html#activelayer"><tt>project.activeLayer</tt></a> — default: <tt>true</tt></li>
|
||||
<li><tt>settings.applyMatrix: <tt>Boolean</tt></tt> — controls what value newly created items have their <a href="../classes/Item.html#applymatrix"><tt>item.applyMatrix</tt></a> property set to (Note that not all items can set this to <code>false</code>) — default: <tt>true</tt></li>
|
||||
<li><tt>settings.handleSize: <tt>Number</tt></tt> — the size of the curve handles when drawing selections — default: <tt>4</tt></li>
|
||||
<li><tt>settings.hitTolerance: <tt>Number</tt></tt> — the default tolerance for hit- tests, when no value is specified — default: <tt>0</tt></li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="project" class="member">
|
||||
<div class="member-link">
|
||||
<a name="project" href="#project"><tt><b>project</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The currently active project.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/Project.html"><tt>Project</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="projects" class="member">
|
||||
<div class="member-link">
|
||||
<a name="projects" href="#projects"><tt><b>projects</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The list of all open projects within the current Paper.js context.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
Array of <a href="../classes/Project.html"><tt>Project</tt></a> objects
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="view" class="member">
|
||||
<div class="member-link">
|
||||
<a name="view" href="#view"><tt><b>view</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The reference to the active project’s view.</p>
|
||||
|
||||
<p>Read only.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/View.html"><tt>View</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="tool" class="member">
|
||||
<div class="member-link">
|
||||
<a name="tool" href="#tool"><tt><b>tool</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The reference to the active tool.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/Tool.html"><tt>Tool</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="tools" class="member">
|
||||
<div class="member-link">
|
||||
<a name="tools" href="#tools"><tt><b>tools</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The list of available tools.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
Array of <a href="../classes/Tool.html"><tt>Tool</tt></a> objects
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- ============================== methods ================================ -->
|
||||
<div class="reference-members">
|
||||
<h2>Methods</h2>
|
||||
|
||||
|
||||
<div id="execute-code" class="member">
|
||||
<div class="member-link">
|
||||
<a name="execute-code" href="#execute-code"><tt><b>execute</b>(code[, options])</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Compiles the PaperScript code into a compiled function and executes it. The compiled function receives all properties of this <a href="../classes/PaperScope.html"><tt>PaperScope</tt></a> as arguments, to emulate a global scope with unaffected performance. It also installs global view and tool handlers automatically on the respective objects.</p>
|
||||
<ul class="member-list">
|
||||
<h4>Options:</h4>
|
||||
<li><tt>options.url: <tt>String</tt></tt> — the url of the source, for source-map debugging</li>
|
||||
<li><tt>options.source: <tt>String</tt></tt> — the source to be used for the source- mapping, in case the code that’s passed in has already been mingled.</li>
|
||||
</ul>
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Parameters:</h4>
|
||||
|
||||
<li>
|
||||
<tt>code:</tt>
|
||||
<tt>String</tt>
|
||||
— the PaperScript code
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>options:</tt>
|
||||
<tt>Object</tt>
|
||||
— the compilation options
|
||||
— optional
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="install-scope" class="member">
|
||||
<div class="member-link">
|
||||
<a name="install-scope" href="#install-scope"><tt><b>install</b>(scope)</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Injects the paper scope into any other given scope. Can be used for example to inject the currently active PaperScope into the window’s global scope, to emulate PaperScript-style globally accessible Paper classes and objects.</p>
|
||||
<p><b>Please note:</b> Using this method may override native constructors (e.g. Path). This may cause problems when using Paper.js in conjunction with other libraries that rely on these constructors. Keep the library scoped if you encounter issues caused by this.</p>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Parameters:</h4>
|
||||
|
||||
<li>
|
||||
<tt>scope:</tt>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<h4>Example:</h4>
|
||||
|
||||
|
||||
<pre><code>paper.install(window);</code></pre>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="setup-element" class="member">
|
||||
<div class="member-link">
|
||||
<a name="setup-element" href="#setup-element"><tt><b>setup</b>(element)</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Sets up an empty project for us. If a canvas is provided, it also creates a <a href="../classes/View.html"><tt>View</tt></a> for it, both linked to this scope.</p>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Parameters:</h4>
|
||||
|
||||
<li>
|
||||
<tt>element:</tt>
|
||||
<tt>HTMLCanvasElement</tt>⟋<tt>String</tt>⟋<a href="../classes/Size.html"><tt>Size</tt></a>
|
||||
— the HTML canvas element this scope should be associated with, or an ID string by which to find the element, or the size of the canvas to be created for usage in a web worker.
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="activate" class="member">
|
||||
<div class="member-link">
|
||||
<a name="activate" href="#activate"><tt><b>activate</b>()</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Activates this PaperScope, so all newly created items will be placed in its active project.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="reference-members">
|
||||
<h2>Static Methods</h2>
|
||||
|
||||
|
||||
<div id="get-id" class="member">
|
||||
<div class="member-link">
|
||||
<a name="get-id" href="#get-id"><tt><b>PaperScope.get</b>(id)</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Retrieves a PaperScope object with the given scope id.</p>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Parameters:</h4>
|
||||
|
||||
<li>
|
||||
<tt>id:</tt>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/PaperScope.html"><tt>PaperScope</tt></a></tt>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================== -->
|
||||
<p class="footer">
|
||||
Paper.js v0.12.17<br>
|
||||
Copyright © 2011—2022 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
||||
<div class="content-end"></div>
|
||||
|
||||
|
||||
</article>
|
||||
</body>
|
||||
198
paper.js/assets/paperjs/docs/classes/PaperScript.html
Normal file
198
paper.js/assets/paperjs/docs/classes/PaperScript.html
Normal file
@ -0,0 +1,198 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>PaperScript</title>
|
||||
<base target="class-frame">
|
||||
<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
|
||||
<script src="../assets/js/paper.js"></script>
|
||||
<script src="../assets/js/jquery.js"></script>
|
||||
<script src="../assets/js/codemirror.js"></script>
|
||||
<script src="../assets/js/docs.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<article class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>PaperScript</h1>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members">
|
||||
<h2>Static Methods</h2>
|
||||
|
||||
|
||||
<div id="compile-code" class="member">
|
||||
<div class="member-link">
|
||||
<a name="compile-code" href="#compile-code"><tt><b>PaperScript.compile</b>(code[, options])</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Compiles PaperScript code into JavaScript code.</p>
|
||||
<ul class="member-list">
|
||||
<h4>Options:</h4>
|
||||
<li><tt>options.url: <tt>String</tt></tt> — the url of the source, for source-map generation</li>
|
||||
<li><tt>options.source: <tt>String</tt></tt> — the source to be used for the source- mapping, in case the code that’s passed in has already been mingled.</li>
|
||||
</ul>
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Parameters:</h4>
|
||||
|
||||
<li>
|
||||
<tt>code:</tt>
|
||||
<tt>String</tt>
|
||||
— the PaperScript code
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>options:</tt>
|
||||
<tt>Object</tt>
|
||||
— the compilation options
|
||||
— optional
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><tt>Object</tt></tt> — an object holding the compiled PaperScript translated into JavaScript code along with source-maps and other information.
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="execute-code-scope" class="member">
|
||||
<div class="member-link">
|
||||
<a name="execute-code-scope" href="#execute-code-scope"><tt><b>PaperScript.execute</b>(code, scope[, options])</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Compiles the PaperScript code into a compiled function and executes it. The compiled function receives all properties of the passed <a href="../classes/PaperScope.html"><tt>PaperScope</tt></a> as arguments, to emulate a global scope with unaffected performance. It also installs global view and tool handlers automatically on the respective objects.</p>
|
||||
<ul class="member-list">
|
||||
<h4>Options:</h4>
|
||||
<li><tt>options.url: <tt>String</tt></tt> — the url of the source, for source-map generation</li>
|
||||
<li><tt>options.source: <tt>String</tt></tt> — the source to be used for the source- mapping, in case the code that’s passed in has already been mingled.</li>
|
||||
</ul>
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Parameters:</h4>
|
||||
|
||||
<li>
|
||||
<tt>code:</tt>
|
||||
<tt>String</tt>
|
||||
— the PaperScript code
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>scope:</tt>
|
||||
<a href="../classes/PaperScope.html"><tt>PaperScope</tt></a>
|
||||
— the scope for which the code is executed
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>options:</tt>
|
||||
<tt>Object</tt>
|
||||
— the compilation options
|
||||
— optional
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><tt>Object</tt></tt> — the exports defined in the executed code
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="load" class="member">
|
||||
<div class="member-link">
|
||||
<a name="load" href="#load"><tt><b>PaperScript.load</b>([script])</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Loads, compiles and executes PaperScript code in the HTML document. Note that this method is executed automatically for all scripts in the document through a window load event. You can optionally call it earlier (e.g. from a DOM ready event), or you can mark scripts to be ignored by setting the attribute <code>ignore="true"</code> or <code>data-paper-ignore="true"</code>, and call the <code>PaperScript.load(script)</code> method for each script separately when needed.</p>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Parameters:</h4>
|
||||
|
||||
<li>
|
||||
<tt>script:</tt>
|
||||
<tt>HTMLScriptElement</tt>
|
||||
— the script to load. If none is provided, all scripts of the HTML document are iterated over and loaded
|
||||
— optional, default: <tt>null</tt>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/PaperScope.html"><tt>PaperScope</tt></a></tt> — the scope produced for the passed <code>script</code>, or <code>undefined</code> of multiple scripts area loaded
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================== -->
|
||||
<p class="footer">
|
||||
Paper.js v0.12.17<br>
|
||||
Copyright © 2011—2022 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
||||
<div class="content-end"></div>
|
||||
|
||||
|
||||
</article>
|
||||
</body>
|
||||
11775
paper.js/assets/paperjs/docs/classes/Path.html
Normal file
11775
paper.js/assets/paperjs/docs/classes/Path.html
Normal file
File diff suppressed because it is too large
Load Diff
8639
paper.js/assets/paperjs/docs/classes/PathItem.html
Normal file
8639
paper.js/assets/paperjs/docs/classes/PathItem.html
Normal file
File diff suppressed because it is too large
Load Diff
2699
paper.js/assets/paperjs/docs/classes/Point.html
Normal file
2699
paper.js/assets/paperjs/docs/classes/Point.html
Normal file
File diff suppressed because it is too large
Load Diff
7029
paper.js/assets/paperjs/docs/classes/PointText.html
Normal file
7029
paper.js/assets/paperjs/docs/classes/PointText.html
Normal file
File diff suppressed because it is too large
Load Diff
1305
paper.js/assets/paperjs/docs/classes/Project.html
Normal file
1305
paper.js/assets/paperjs/docs/classes/Project.html
Normal file
File diff suppressed because it is too large
Load Diff
7843
paper.js/assets/paperjs/docs/classes/Raster.html
Normal file
7843
paper.js/assets/paperjs/docs/classes/Raster.html
Normal file
File diff suppressed because it is too large
Load Diff
1654
paper.js/assets/paperjs/docs/classes/Rectangle.html
Normal file
1654
paper.js/assets/paperjs/docs/classes/Rectangle.html
Normal file
File diff suppressed because it is too large
Load Diff
939
paper.js/assets/paperjs/docs/classes/Segment.html
Normal file
939
paper.js/assets/paperjs/docs/classes/Segment.html
Normal file
@ -0,0 +1,939 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Segment</title>
|
||||
<base target="class-frame">
|
||||
<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
|
||||
<script src="../assets/js/paper.js"></script>
|
||||
<script src="../assets/js/jquery.js"></script>
|
||||
<script src="../assets/js/codemirror.js"></script>
|
||||
<script src="../assets/js/docs.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<article class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>Segment</h1>
|
||||
|
||||
<p>The Segment object represents the points of a path through which its <a href="../classes/Curve.html"><tt>Curve</tt></a> objects pass. The segments of a path can be accessed through its <a href="../classes/Path.html#segments"><tt>path.segments</tt></a> array.</p>
|
||||
<p>Each segment consists of an anchor point (<a href="../classes/Segment.html#point"><tt>segment.point</tt></a>) and optionally an incoming and an outgoing handle (<a href="../classes/Segment.html#handlein"><tt>segment.handleIn</tt></a> and <a href="../classes/Segment.html#handleout"><tt>segment.handleOut</tt></a>), describing the tangents of the two <a href="../classes/Curve.html"><tt>Curve</tt></a> objects that are connected by this segment.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- =============================== constructors ========================== -->
|
||||
<div class="reference-members">
|
||||
<h2>Constructors</h2>
|
||||
|
||||
|
||||
<div id="segment" class="member">
|
||||
<div class="member-link">
|
||||
<a name="segment" href="#segment"><tt><b>Segment</b>([point[, handleIn[, handleOut]]])</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Creates a new Segment object.</p>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Parameters:</h4>
|
||||
|
||||
<li>
|
||||
<tt>point:</tt>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
— the anchor point of the segment
|
||||
— optional, default: <tt>{x: 0, y: 0}</tt>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>handleIn:</tt>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
— the handle point relative to the anchor point of the segment that describes the in tangent of the segment
|
||||
— optional, default: <tt>{x: 0, y: 0}</tt>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>handleOut:</tt>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
— the handle point relative to the anchor point of the segment that describes the out tangent of the segment
|
||||
— optional, default: <tt>{x: 0, y: 0}</tt>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/Segment.html"><tt>Segment</tt></a></tt>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
<h4>Example:</h4>
|
||||
|
||||
<div class="paperscript split">
|
||||
|
||||
<div class="buttons">
|
||||
<div class="button run">Run</div>
|
||||
</div>
|
||||
|
||||
<script type="text/paperscript" canvas="canvas-0">
|
||||
var handleIn = new Point(-80, -100);
|
||||
var handleOut = new Point(80, 100);
|
||||
|
||||
var firstPoint = new Point(100, 50);
|
||||
var firstSegment = new Segment(firstPoint, null, handleOut);
|
||||
|
||||
var secondPoint = new Point(300, 50);
|
||||
var secondSegment = new Segment(secondPoint, handleIn, null);
|
||||
|
||||
var path = new Path(firstSegment, secondSegment);
|
||||
path.strokeColor = 'black';
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="segment-object" class="member">
|
||||
<div class="member-link">
|
||||
<a name="segment-object" href="#segment-object"><tt><b>Segment</b>(object)</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Creates a new Segment object.</p>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Parameters:</h4>
|
||||
|
||||
<li>
|
||||
<tt>object:</tt>
|
||||
<tt>Object</tt>
|
||||
— an object containing properties to be set on the segment
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/Segment.html"><tt>Segment</tt></a></tt>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
<h4>Example:<span class="description">Creating segments using object notation:</span></h4>
|
||||
|
||||
<div class="paperscript split">
|
||||
|
||||
<div class="buttons">
|
||||
<div class="button run">Run</div>
|
||||
</div>
|
||||
|
||||
<script type="text/paperscript" canvas="canvas-1">
|
||||
var firstSegment = new Segment({
|
||||
point: [100, 50],
|
||||
handleOut: [80, 100]
|
||||
});
|
||||
|
||||
var secondSegment = new Segment({
|
||||
point: [300, 50],
|
||||
handleIn: [-80, -100]
|
||||
});
|
||||
|
||||
var path = new Path({
|
||||
segments: [firstSegment, secondSegment],
|
||||
strokeColor: 'black'
|
||||
});
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- ================================ properties =========================== -->
|
||||
<div class="reference-members">
|
||||
<h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="point" class="member">
|
||||
<div class="member-link">
|
||||
<a name="point" href="#point"><tt><b>point</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The anchor point of the segment.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="handlein" class="member">
|
||||
<div class="member-link">
|
||||
<a name="handlein" href="#handlein"><tt><b>handleIn</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The handle point relative to the anchor point of the segment that describes the in tangent of the segment.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="handleout" class="member">
|
||||
<div class="member-link">
|
||||
<a name="handleout" href="#handleout"><tt><b>handleOut</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The handle point relative to the anchor point of the segment that describes the out tangent of the segment.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="selected" class="member">
|
||||
<div class="member-link">
|
||||
<a name="selected" href="#selected"><tt><b>selected</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>Specifies whether the segment is selected.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>Boolean</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h4>Example:</h4>
|
||||
|
||||
<div class="paperscript split">
|
||||
|
||||
<div class="buttons">
|
||||
<div class="button run">Run</div>
|
||||
</div>
|
||||
|
||||
<script type="text/paperscript" canvas="canvas-2">
|
||||
var path = new Path.Circle({
|
||||
center: [80, 50],
|
||||
radius: 40
|
||||
});
|
||||
|
||||
// Select the third segment point:
|
||||
path.segments[2].selected = true;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Hierarchy</h3>
|
||||
|
||||
<div id="index" class="member">
|
||||
<div class="member-link">
|
||||
<a name="index" href="#index"><tt><b>index</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The index of the segment in the <a href="../classes/Path.html#segments"><tt>path.segments</tt></a> array that the segment belongs to.</p>
|
||||
|
||||
<p>Read only.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="path" class="member">
|
||||
<div class="member-link">
|
||||
<a name="path" href="#path"><tt><b>path</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The path that the segment belongs to.</p>
|
||||
|
||||
<p>Read only.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/Path.html"><tt>Path</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="curve" class="member">
|
||||
<div class="member-link">
|
||||
<a name="curve" href="#curve"><tt><b>curve</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The curve that the segment belongs to. For the last segment of an open path, the previous segment is returned.</p>
|
||||
|
||||
<p>Read only.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/Curve.html"><tt>Curve</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="location" class="member">
|
||||
<div class="member-link">
|
||||
<a name="location" href="#location"><tt><b>location</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The curve location that describes this segment’s position on the path.</p>
|
||||
|
||||
<p>Read only.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/CurveLocation.html"><tt>CurveLocation</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Sibling Segments</h3>
|
||||
|
||||
<div id="next" class="member">
|
||||
<div class="member-link">
|
||||
<a name="next" href="#next"><tt><b>next</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The next segment in the <a href="../classes/Path.html#segments"><tt>path.segments</tt></a> array that the segment belongs to. If the segments belongs to a closed path, the first segment is returned for the last segment of the path.</p>
|
||||
|
||||
<p>Read only.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/Segment.html"><tt>Segment</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="previous" class="member">
|
||||
<div class="member-link">
|
||||
<a name="previous" href="#previous"><tt><b>previous</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The previous segment in the <a href="../classes/Path.html#segments"><tt>path.segments</tt></a> array that the segment belongs to. If the segments belongs to a closed path, the last segment is returned for the first segment of the path.</p>
|
||||
|
||||
<p>Read only.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/Segment.html"><tt>Segment</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- ============================== methods ================================ -->
|
||||
<div class="reference-members">
|
||||
<h2>Methods</h2>
|
||||
|
||||
|
||||
<div id="hashandles" class="member">
|
||||
<div class="member-link">
|
||||
<a name="hashandles" href="#hashandles"><tt><b>hasHandles</b>()</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Checks if the segment has any curve handles set.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the segment has handles set, <tt>false</tt> otherwise
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>See also:</h4>
|
||||
|
||||
<li><tt><a href="../classes/Segment.html#handlein"><tt>segment.handleIn</tt></a></tt></li>
|
||||
|
||||
<li><tt><a href="../classes/Segment.html#handleout"><tt>segment.handleOut</tt></a></tt></li>
|
||||
|
||||
<li><tt><a href="../classes/Curve.html#hashandles"><tt>curve.hasHandles</tt></a>()</tt></li>
|
||||
|
||||
<li><tt><a href="../classes/Path.html#hashandles"><tt>path.hasHandles</tt></a>()</tt></li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="issmooth" class="member">
|
||||
<div class="member-link">
|
||||
<a name="issmooth" href="#issmooth"><tt><b>isSmooth</b>()</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Checks if the segment connects two curves smoothly, meaning that its two handles are collinear and segment does not form a corner.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the segment is smooth, <tt>false</tt> otherwise
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>See also:</h4>
|
||||
|
||||
<li><tt><a href="../classes/Point.html#iscollinear"><tt>point.isCollinear</tt></a>()</tt></li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="clearhandles" class="member">
|
||||
<div class="member-link">
|
||||
<a name="clearhandles" href="#clearhandles"><tt><b>clearHandles</b>()</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Clears the segment’s handles by setting their coordinates to zero, turning the segment into a corner.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="smooth" class="member">
|
||||
<div class="member-link">
|
||||
<a name="smooth" href="#smooth"><tt><b>smooth</b>([options])</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Smooths the bezier curves that pass through this segment by taking into account the segment’s position and distance to the neighboring segments and changing the direction and length of the segment’s handles accordingly without moving the segment itself.</p>
|
||||
<p>Two different smoothing methods are available:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<p><code>'catmull-rom'</code> uses the Catmull-Rom spline to smooth the segment.</p>
|
||||
<p>The optionally passed factor controls the knot parametrization of the algorithm:</p>
|
||||
<ul>
|
||||
<li><code>0.0</code>: the standard, uniform Catmull-Rom spline</li>
|
||||
<li><code>0.5</code>: the centripetal Catmull-Rom spline, guaranteeing no self-intersections</li>
|
||||
<li><code>1.0</code>: the chordal Catmull-Rom spline</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<p><code>'geometric'</code> use a simple heuristic and empiric geometric method to smooth the segment’s handles. The handles were weighted, meaning that big differences in distances between the segments will lead to probably undesired results.</p>
|
||||
<p>The optionally passed factor defines the tension parameter (<code>0…1</code>), controlling the amount of smoothing as a factor by which to scale each handle.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="member-list">
|
||||
<h4>Options:</h4>
|
||||
<li><tt>options.type: <tt>String</tt></tt> — the type of smoothing method: <tt>‘catmull-rom’</tt>, <tt>‘geometric’</tt> — default: <tt>‘catmull-rom’</tt></li>
|
||||
<li><tt>options.factor: <tt>Number</tt></tt> — the factor parameterizing the smoothing method — default: <code>0.5</code> for <code>'catmull-rom'</code>, <code>0.4</code> for <code>'geometric'</code></li>
|
||||
</ul>
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Parameters:</h4>
|
||||
|
||||
<li>
|
||||
<tt>options:</tt>
|
||||
<tt>Object</tt>
|
||||
— the smoothing options
|
||||
— optional
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>See also:</h4>
|
||||
|
||||
<li><tt><a href="../classes/PathItem.html#smooth"><tt>pathItem.smooth([options])</tt></a></tt></li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="isfirst" class="member">
|
||||
<div class="member-link">
|
||||
<a name="isfirst" href="#isfirst"><tt><b>isFirst</b>()</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Checks if the this is the first segment in the <a href="../classes/Path.html#segments"><tt>path.segments</tt></a> array.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if this is the first segment, <tt>false</tt> otherwise
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="islast" class="member">
|
||||
<div class="member-link">
|
||||
<a name="islast" href="#islast"><tt><b>isLast</b>()</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Checks if the this is the last segment in the <a href="../classes/Path.html#segments"><tt>path.segments</tt></a> array.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if this is the last segment, <tt>false</tt> otherwise
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="reverse" class="member">
|
||||
<div class="member-link">
|
||||
<a name="reverse" href="#reverse"><tt><b>reverse</b>()</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Reverses the <a href="../classes/Segment.html#handlein"><tt>handleIn</tt></a> and <a href="../classes/Segment.html#handleout"><tt>handleOut</tt></a> vectors of this segment, modifying the actual segment without creating a copy.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/Segment.html"><tt>Segment</tt></a></tt> — the reversed segment
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="reversed" class="member">
|
||||
<div class="member-link">
|
||||
<a name="reversed" href="#reversed"><tt><b>reversed</b>()</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Returns the reversed the segment, without modifying the segment itself.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/Segment.html"><tt>Segment</tt></a></tt> — the reversed segment
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="remove" class="member">
|
||||
<div class="member-link">
|
||||
<a name="remove" href="#remove"><tt><b>remove</b>()</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Removes the segment from the path that it belongs to.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the segment was removed, <tt>false</tt> otherwise
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="clone" class="member">
|
||||
<div class="member-link">
|
||||
<a name="clone" href="#clone"><tt><b>clone</b>()</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/Segment.html"><tt>Segment</tt></a></tt>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="tostring" class="member">
|
||||
<div class="member-link">
|
||||
<a name="tostring" href="#tostring"><tt><b>toString</b>()</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><tt>String</tt></tt> — a string representation of the segment
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="transform-matrix" class="member">
|
||||
<div class="member-link">
|
||||
<a name="transform-matrix" href="#transform-matrix"><tt><b>transform</b>(matrix)</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Transform the segment by the specified matrix.</p>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Parameters:</h4>
|
||||
|
||||
<li>
|
||||
<tt>matrix:</tt>
|
||||
<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
|
||||
— the matrix to transform the segment by
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="interpolate-from-to-factor" class="member">
|
||||
<div class="member-link">
|
||||
<a name="interpolate-from-to-factor" href="#interpolate-from-to-factor"><tt><b>interpolate</b>(from, to, factor)</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Interpolates between the two specified segments and sets the point and handles of this segment accordingly.</p>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Parameters:</h4>
|
||||
|
||||
<li>
|
||||
<tt>from:</tt>
|
||||
<a href="../classes/Segment.html"><tt>Segment</tt></a>
|
||||
— the segment defining the geometry when <code>factor</code> is <code>0</code>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>to:</tt>
|
||||
<a href="../classes/Segment.html"><tt>Segment</tt></a>
|
||||
— the segment defining the geometry when <code>factor</code> is <code>1</code>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>factor:</tt>
|
||||
<tt>Number</tt>
|
||||
— the interpolation coefficient, typically between <code>0</code> and <code>1</code>, but extrapolation is possible too
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================== -->
|
||||
<p class="footer">
|
||||
Paper.js v0.12.17<br>
|
||||
Copyright © 2011—2022 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
||||
<div class="content-end"></div>
|
||||
|
||||
|
||||
</article>
|
||||
</body>
|
||||
7363
paper.js/assets/paperjs/docs/classes/Shape.html
Normal file
7363
paper.js/assets/paperjs/docs/classes/Shape.html
Normal file
File diff suppressed because it is too large
Load Diff
1825
paper.js/assets/paperjs/docs/classes/Size.html
Normal file
1825
paper.js/assets/paperjs/docs/classes/Size.html
Normal file
File diff suppressed because it is too large
Load Diff
919
paper.js/assets/paperjs/docs/classes/Style.html
Normal file
919
paper.js/assets/paperjs/docs/classes/Style.html
Normal file
@ -0,0 +1,919 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Style</title>
|
||||
<base target="class-frame">
|
||||
<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
|
||||
<script src="../assets/js/paper.js"></script>
|
||||
<script src="../assets/js/jquery.js"></script>
|
||||
<script src="../assets/js/codemirror.js"></script>
|
||||
<script src="../assets/js/docs.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<article class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>Style</h1>
|
||||
|
||||
<p>Style is used for changing the visual styles of items contained within a Paper.js project and is returned by <a href="../classes/Item.html#style"><tt>item.style</tt></a> and <a href="../classes/Project.html#currentstyle"><tt>project.currentStyle</tt></a>.</p>
|
||||
<p>All properties of Style are also reflected directly in <a href="../classes/Item.html"><tt>Item</tt></a>, i.e.: <a href="../classes/Item.html#fillcolor"><tt>item.fillColor</tt></a>.</p>
|
||||
<p>To set multiple style properties in one go, you can pass an object to <a href="../classes/Item.html#style"><tt>item.style</tt></a>. This is a convenient way to define a style once and apply it to a series of items:</p>
|
||||
<h4>Example:<span class="description">Styling paths</span></h4>
|
||||
|
||||
<div class="paperscript split">
|
||||
|
||||
<div class="buttons">
|
||||
<div class="button run">Run</div>
|
||||
</div>
|
||||
|
||||
<script type="text/paperscript" canvas="canvas-0">
|
||||
var path = new Path.Circle(new Point(80, 50), 30);
|
||||
path.style = {
|
||||
fillColor: new Color(1, 0, 0),
|
||||
strokeColor: 'black',
|
||||
strokeWidth: 5
|
||||
};
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
<h4>Example:<span class="description">Styling text items</span></h4>
|
||||
|
||||
<div class="paperscript split">
|
||||
|
||||
<div class="buttons">
|
||||
<div class="button run">Run</div>
|
||||
</div>
|
||||
|
||||
<script type="text/paperscript" canvas="canvas-1">
|
||||
var text = new PointText(view.center);
|
||||
text.content = 'Hello world.';
|
||||
text.style = {
|
||||
fontFamily: 'Courier New',
|
||||
fontWeight: 'bold',
|
||||
fontSize: 20,
|
||||
fillColor: 'red',
|
||||
justification: 'center'
|
||||
};
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
<h4>Example:<span class="description">Styling groups</span></h4>
|
||||
|
||||
<div class="paperscript split">
|
||||
|
||||
<div class="buttons">
|
||||
<div class="button run">Run</div>
|
||||
</div>
|
||||
|
||||
<script type="text/paperscript" canvas="canvas-2">
|
||||
var path1 = new Path.Circle({
|
||||
center: [100, 50],
|
||||
radius: 30
|
||||
});
|
||||
|
||||
var path2 = new Path.Rectangle({
|
||||
from: [170, 20],
|
||||
to: [230, 80]
|
||||
});
|
||||
|
||||
var group = new Group(path1, path2);
|
||||
|
||||
// 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'
|
||||
};
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- ================================ properties =========================== -->
|
||||
<div class="reference-members">
|
||||
<h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="view" class="member">
|
||||
<div class="member-link">
|
||||
<a name="view" href="#view"><tt><b>view</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The view that this style belongs to.</p>
|
||||
|
||||
<p>Read only.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/View.html"><tt>View</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Stroke Style</h3>
|
||||
|
||||
<div id="strokecolor" class="member">
|
||||
<div class="member-link">
|
||||
<a name="strokecolor" href="#strokecolor"><tt><b>strokeColor</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The color of the stroke.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/Color.html"><tt>Color</tt></a>⟋<tt>null</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h4>Example:<span class="description">Setting the stroke color of a path:</span></h4>
|
||||
|
||||
<div class="paperscript split">
|
||||
|
||||
<div class="buttons">
|
||||
<div class="button run">Run</div>
|
||||
</div>
|
||||
|
||||
<script type="text/paperscript" canvas="canvas-3">
|
||||
// Create a circle shaped path at { x: 80, y: 50 }
|
||||
// with a radius of 35:
|
||||
var circle = new Path.Circle(new Point(80, 50), 35);
|
||||
|
||||
// Set its stroke color to RGB red:
|
||||
circle.strokeColor = new Color(1, 0, 0);
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="strokewidth" class="member">
|
||||
<div class="member-link">
|
||||
<a name="strokewidth" href="#strokewidth"><tt><b>strokeWidth</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The width of the stroke.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Default:</h4>
|
||||
<li><tt>1</tt></li>
|
||||
</ul>
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h4>Example:<span class="description">Setting an item's stroke width:</span></h4>
|
||||
|
||||
<div class="paperscript split">
|
||||
|
||||
<div class="buttons">
|
||||
<div class="button run">Run</div>
|
||||
</div>
|
||||
|
||||
<script type="text/paperscript" canvas="canvas-4">
|
||||
// Create a circle shaped path at { x: 80, y: 50 }
|
||||
// with a radius of 35:
|
||||
var circle = new Path.Circle(new Point(80, 50), 35);
|
||||
|
||||
// Set its stroke color to black:
|
||||
circle.strokeColor = 'black';
|
||||
|
||||
// Set its stroke width to 10:
|
||||
circle.strokeWidth = 10;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="strokecap" class="member">
|
||||
<div class="member-link">
|
||||
<a name="strokecap" href="#strokecap"><tt><b>strokeCap</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The shape to be used at the beginning and end of open <a href="../classes/Path.html"><tt>Path</tt></a> items, when they have a stroke.</p>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Values:</h4>
|
||||
<li><tt>'round'</tt>, <tt>'square'</tt>, <tt>'butt'</tt></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Default:</h4>
|
||||
<li><tt>'butt'</tt></li>
|
||||
</ul>
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>String</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h4>Example:<span class="description">A look at the different stroke caps:</span></h4>
|
||||
|
||||
<div class="paperscript split">
|
||||
|
||||
<div class="buttons">
|
||||
<div class="button run">Run</div>
|
||||
</div>
|
||||
|
||||
<script type="text/paperscript" canvas="canvas-5">
|
||||
var line = new Path(new Point(80, 50), new Point(420, 50));
|
||||
line.strokeColor = 'black';
|
||||
line.strokeWidth = 20;
|
||||
|
||||
// Select the path, so we can see where the stroke is formed:
|
||||
line.selected = true;
|
||||
|
||||
// Set the stroke cap of the line to be round:
|
||||
line.strokeCap = 'round';
|
||||
|
||||
// Copy the path and set its stroke cap to be square:
|
||||
var line2 = line.clone();
|
||||
line2.position.y += 50;
|
||||
line2.strokeCap = 'square';
|
||||
|
||||
// Make another copy and set its stroke cap to be butt:
|
||||
var line2 = line.clone();
|
||||
line2.position.y += 100;
|
||||
line2.strokeCap = 'butt';
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="200" id="canvas-5"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="strokejoin" class="member">
|
||||
<div class="member-link">
|
||||
<a name="strokejoin" href="#strokejoin"><tt><b>strokeJoin</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The shape to be used at the segments and corners of <a href="../classes/Path.html"><tt>Path</tt></a> items when they have a stroke.</p>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Values:</h4>
|
||||
<li><tt>'miter'</tt>, <tt>'round'</tt>, <tt>'bevel'</tt></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Default:</h4>
|
||||
<li><tt>'miter'</tt></li>
|
||||
</ul>
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>String</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h4>Example:<span class="description">A look at the different stroke joins:</span></h4>
|
||||
|
||||
<div class="paperscript split">
|
||||
|
||||
<div class="buttons">
|
||||
<div class="button run">Run</div>
|
||||
</div>
|
||||
|
||||
<script type="text/paperscript" canvas="canvas-6">
|
||||
var path = new Path();
|
||||
path.add(new Point(80, 100));
|
||||
path.add(new Point(120, 40));
|
||||
path.add(new Point(160, 100));
|
||||
path.strokeColor = 'black';
|
||||
path.strokeWidth = 20;
|
||||
|
||||
// Select the path, so we can see where the stroke is formed:
|
||||
path.selected = true;
|
||||
|
||||
var path2 = path.clone();
|
||||
path2.position.x += path2.bounds.width * 1.5;
|
||||
path2.strokeJoin = 'round';
|
||||
|
||||
var path3 = path2.clone();
|
||||
path3.position.x += path3.bounds.width * 1.5;
|
||||
path3.strokeJoin = 'bevel';
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="120" id="canvas-6"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="strokescaling" class="member">
|
||||
<div class="member-link">
|
||||
<a name="strokescaling" href="#strokescaling"><tt><b>strokeScaling</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>Specifies whether the stroke is to be drawn taking the current affine transformation into account (the default behavior), or whether it should appear as a non-scaling stroke.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Default:</h4>
|
||||
<li><tt>true</tt></li>
|
||||
</ul>
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>Boolean</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="dashoffset" class="member">
|
||||
<div class="member-link">
|
||||
<a name="dashoffset" href="#dashoffset"><tt><b>dashOffset</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The dash offset of the stroke.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Default:</h4>
|
||||
<li><tt>0</tt></li>
|
||||
</ul>
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="dasharray" class="member">
|
||||
<div class="member-link">
|
||||
<a name="dasharray" href="#dasharray"><tt><b>dashArray</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>Specifies an array containing the dash and gap lengths of the stroke.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Default:</h4>
|
||||
<li><tt>[]</tt></li>
|
||||
</ul>
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
Array of <tt>Numbers</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h4>Example:</h4>
|
||||
|
||||
<div class="paperscript split">
|
||||
|
||||
<div class="buttons">
|
||||
<div class="button run">Run</div>
|
||||
</div>
|
||||
|
||||
<script type="text/paperscript" canvas="canvas-7">
|
||||
var path = new Path.Circle(new Point(80, 50), 40);
|
||||
path.strokeWidth = 2;
|
||||
path.strokeColor = 'black';
|
||||
|
||||
// Set the dashed stroke to [10pt dash, 4pt gap]:
|
||||
path.dashArray = [10, 4];
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-7"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="miterlimit" class="member">
|
||||
<div class="member-link">
|
||||
<a name="miterlimit" href="#miterlimit"><tt><b>miterLimit</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The miter limit of the stroke. When two line segments meet at a sharp angle and miter joins have been specified for <a href="../classes/Style.html#strokejoin"><tt>strokeJoin</tt></a>, it is possible for the miter to extend far beyond the <a href="../classes/Style.html#strokewidth"><tt>strokeWidth</tt></a> of the path. The miterLimit imposes a limit on the ratio of the miter length to the <a href="../classes/Style.html#strokewidth"><tt>strokeWidth</tt></a>.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Default:</h4>
|
||||
<li><tt>10</tt></li>
|
||||
</ul>
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Fill Style</h3>
|
||||
|
||||
<div id="fillcolor" class="member">
|
||||
<div class="member-link">
|
||||
<a name="fillcolor" href="#fillcolor"><tt><b>fillColor</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The fill color.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/Color.html"><tt>Color</tt></a>⟋<tt>null</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h4>Example:<span class="description">Setting the fill color of a path to red:</span></h4>
|
||||
|
||||
<div class="paperscript split">
|
||||
|
||||
<div class="buttons">
|
||||
<div class="button run">Run</div>
|
||||
</div>
|
||||
|
||||
<script type="text/paperscript" canvas="canvas-8">
|
||||
// Create a circle shaped path at { x: 80, y: 50 }
|
||||
// with a radius of 35:
|
||||
var circle = new Path.Circle(new Point(80, 50), 35);
|
||||
|
||||
// Set the fill color of the circle to RGB red:
|
||||
circle.fillColor = new Color(1, 0, 0);
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-8"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="fillrule" class="member">
|
||||
<div class="member-link">
|
||||
<a name="fillrule" href="#fillrule"><tt><b>fillRule</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The fill-rule with which the shape gets filled. Please note that only modern browsers support fill-rules other than <code>'nonzero'</code>.</p>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Values:</h4>
|
||||
<li><tt>'nonzero'</tt>, <tt>'evenodd'</tt></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Default:</h4>
|
||||
<li><tt>'nonzero'</tt></li>
|
||||
</ul>
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>String</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Shadow Style</h3>
|
||||
|
||||
<div id="shadowcolor" class="member">
|
||||
<div class="member-link">
|
||||
<a name="shadowcolor" href="#shadowcolor"><tt><b>shadowColor</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The shadow color.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/Color.html"><tt>Color</tt></a>⟋<tt>null</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h4>Example:<span class="description">Creating a circle with a black shadow:</span></h4>
|
||||
|
||||
<div class="paperscript split">
|
||||
|
||||
<div class="buttons">
|
||||
<div class="button run">Run</div>
|
||||
</div>
|
||||
|
||||
<script type="text/paperscript" canvas="canvas-9">
|
||||
var circle = new Path.Circle({
|
||||
center: [80, 50],
|
||||
radius: 35,
|
||||
fillColor: 'white',
|
||||
// Set the shadow color of the circle to RGB black:
|
||||
shadowColor: new Color(0, 0, 0),
|
||||
// Set the shadow blur radius to 12:
|
||||
shadowBlur: 12,
|
||||
// Offset the shadow by { x: 5, y: 5 }
|
||||
shadowOffset: new Point(5, 5)
|
||||
});
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-9"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="shadowblur" class="member">
|
||||
<div class="member-link">
|
||||
<a name="shadowblur" href="#shadowblur"><tt><b>shadowBlur</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The shadow’s blur radius.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Default:</h4>
|
||||
<li><tt>0</tt></li>
|
||||
</ul>
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="shadowoffset" class="member">
|
||||
<div class="member-link">
|
||||
<a name="shadowoffset" href="#shadowoffset"><tt><b>shadowOffset</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The shadow’s offset.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Default:</h4>
|
||||
<li><tt>0</tt></li>
|
||||
</ul>
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Selection Style</h3>
|
||||
|
||||
<div id="selectedcolor" class="member">
|
||||
<div class="member-link">
|
||||
<a name="selectedcolor" href="#selectedcolor"><tt><b>selectedColor</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The color the item is highlighted with when selected. If the item does not specify its own color, the color defined by its layer is used instead.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/Color.html"><tt>Color</tt></a>⟋<tt>null</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Character Style</h3>
|
||||
|
||||
<div id="fontfamily" class="member">
|
||||
<div class="member-link">
|
||||
<a name="fontfamily" href="#fontfamily"><tt><b>fontFamily</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The font-family to be used in text content.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Default:</h4>
|
||||
<li><tt>'sans-serif'</tt></li>
|
||||
</ul>
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>String</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="fontweight" class="member">
|
||||
<div class="member-link">
|
||||
<a name="fontweight" href="#fontweight"><tt><b>fontWeight</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The font-weight to be used in text content.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Default:</h4>
|
||||
<li><tt>'normal'</tt></li>
|
||||
</ul>
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>String</tt>⟋<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="fontsize" class="member">
|
||||
<div class="member-link">
|
||||
<a name="fontsize" href="#fontsize"><tt><b>fontSize</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The font size of text content, as a number in pixels, or as a string with optional units <code>'px'</code>, <code>'pt'</code> and <code>'em'</code>.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Default:</h4>
|
||||
<li><tt>10</tt></li>
|
||||
</ul>
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>Number</tt>⟋<tt>String</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="leading" class="member">
|
||||
<div class="member-link">
|
||||
<a name="leading" href="#leading"><tt><b>leading</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The text leading of text content.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Default:</h4>
|
||||
<li><tt>fontSize * 1.2</tt></li>
|
||||
</ul>
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>Number</tt>⟋<tt>String</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Paragraph Style</h3>
|
||||
|
||||
<div id="justification" class="member">
|
||||
<div class="member-link">
|
||||
<a name="justification" href="#justification"><tt><b>justification</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The justification of text paragraphs.</p>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Values:</h4>
|
||||
<li><tt>'left'</tt>, <tt>'right'</tt>, <tt>'center'</tt></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Default:</h4>
|
||||
<li><tt>'left'</tt></li>
|
||||
</ul>
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>String</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================== -->
|
||||
<p class="footer">
|
||||
Paper.js v0.12.17<br>
|
||||
Copyright © 2011—2022 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
||||
<div class="content-end"></div>
|
||||
|
||||
|
||||
</article>
|
||||
</body>
|
||||
311
paper.js/assets/paperjs/docs/classes/SymbolDefinition.html
Normal file
311
paper.js/assets/paperjs/docs/classes/SymbolDefinition.html
Normal file
@ -0,0 +1,311 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>SymbolDefinition</title>
|
||||
<base target="class-frame">
|
||||
<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
|
||||
<script src="../assets/js/paper.js"></script>
|
||||
<script src="../assets/js/jquery.js"></script>
|
||||
<script src="../assets/js/codemirror.js"></script>
|
||||
<script src="../assets/js/docs.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<article class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>SymbolDefinition</h1>
|
||||
|
||||
<p>Symbols allow you to place multiple instances of an item in your project. This can save memory, since all instances of a symbol simply refer to the original item and it can speed up moving around complex objects, since internal properties such as segment lists and gradient positions don’t need to be updated with every transformation.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- =============================== constructors ========================== -->
|
||||
<div class="reference-members">
|
||||
<h2>Constructors</h2>
|
||||
|
||||
|
||||
<div id="symboldefinition-item" class="member">
|
||||
<div class="member-link">
|
||||
<a name="symboldefinition-item" href="#symboldefinition-item"><tt><b>SymbolDefinition</b>(item[, dontCenter])</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Creates a Symbol definition.</p>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Parameters:</h4>
|
||||
|
||||
<li>
|
||||
<tt>item:</tt>
|
||||
<a href="../classes/Item.html"><tt>Item</tt></a>
|
||||
— the source item which is removed from the scene graph and becomes the symbol’s definition.
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>dontCenter:</tt>
|
||||
<tt>Boolean</tt>
|
||||
|
||||
— optional, default: <tt>false</tt>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/SymbolDefinition.html"><tt>SymbolDefinition</tt></a></tt>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
<h4>Example:<span class="description">Placing 100 instances of a symbol:</span></h4>
|
||||
|
||||
<div class="paperscript split">
|
||||
|
||||
<div class="buttons">
|
||||
<div class="button run">Run</div>
|
||||
</div>
|
||||
|
||||
<script type="text/paperscript" canvas="canvas-0">
|
||||
var path = new Path.Star(new Point(0, 0), 6, 5, 13);
|
||||
path.style = {
|
||||
fillColor: 'white',
|
||||
strokeColor: 'black'
|
||||
};
|
||||
|
||||
// Create a symbol definition from the path:
|
||||
var definition = new SymbolDefinition(path);
|
||||
|
||||
// Place 100 instances of the symbol definition:
|
||||
for (var i = 0; i < 100; i++) {
|
||||
// Place an instance of the symbol definition in the project:
|
||||
var instance = definition.place();
|
||||
|
||||
// Move the instance to a random position within the view:
|
||||
instance.position = Point.random() * view.size;
|
||||
|
||||
// Rotate the instance by a random amount between
|
||||
// 0 and 360 degrees:
|
||||
instance.rotate(Math.random() * 360);
|
||||
|
||||
// Scale the instance between 0.25 and 1:
|
||||
instance.scale(0.25 + Math.random() * 0.75);
|
||||
}
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="240" id="canvas-0"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- ================================ properties =========================== -->
|
||||
<div class="reference-members">
|
||||
<h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="project" class="member">
|
||||
<div class="member-link">
|
||||
<a name="project" href="#project"><tt><b>project</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The project that this symbol belongs to.</p>
|
||||
|
||||
<p>Read only.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/Project.html"><tt>Project</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="item" class="member">
|
||||
<div class="member-link">
|
||||
<a name="item" href="#item"><tt><b>item</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The item used as the symbol’s definition.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/Item.html"><tt>Item</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- ============================== methods ================================ -->
|
||||
<div class="reference-members">
|
||||
<h2>Methods</h2>
|
||||
|
||||
|
||||
<div id="place" class="member">
|
||||
<div class="member-link">
|
||||
<a name="place" href="#place"><tt><b>place</b>([position])</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Places in instance of the symbol in the project.</p>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Parameters:</h4>
|
||||
|
||||
<li>
|
||||
<tt>position:</tt>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
— the position of the placed symbol
|
||||
— optional
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/SymbolItem.html"><tt>SymbolItem</tt></a></tt>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="clone" class="member">
|
||||
<div class="member-link">
|
||||
<a name="clone" href="#clone"><tt><b>clone</b>()</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Returns a copy of the symbol.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/SymbolDefinition.html"><tt>SymbolDefinition</tt></a></tt>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="equals-symbol" class="member">
|
||||
<div class="member-link">
|
||||
<a name="equals-symbol" href="#equals-symbol"><tt><b>equals</b>(symbol)</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Checks whether the symbol’s definition is equal to the supplied symbol.</p>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Parameters:</h4>
|
||||
|
||||
<li>
|
||||
<tt>symbol:</tt>
|
||||
<a href="../classes/SymbolDefinition.html"><tt>SymbolDefinition</tt></a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if they are equal, <tt>false</tt> otherwise
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================== -->
|
||||
<p class="footer">
|
||||
Paper.js v0.12.17<br>
|
||||
Copyright © 2011—2022 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
||||
<div class="content-end"></div>
|
||||
|
||||
|
||||
</article>
|
||||
</body>
|
||||
6755
paper.js/assets/paperjs/docs/classes/SymbolItem.html
Normal file
6755
paper.js/assets/paperjs/docs/classes/SymbolItem.html
Normal file
File diff suppressed because it is too large
Load Diff
6869
paper.js/assets/paperjs/docs/classes/TextItem.html
Normal file
6869
paper.js/assets/paperjs/docs/classes/TextItem.html
Normal file
File diff suppressed because it is too large
Load Diff
761
paper.js/assets/paperjs/docs/classes/Tool.html
Normal file
761
paper.js/assets/paperjs/docs/classes/Tool.html
Normal file
@ -0,0 +1,761 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Tool</title>
|
||||
<base target="class-frame">
|
||||
<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
|
||||
<script src="../assets/js/paper.js"></script>
|
||||
<script src="../assets/js/jquery.js"></script>
|
||||
<script src="../assets/js/codemirror.js"></script>
|
||||
<script src="../assets/js/docs.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<article class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>Tool</h1>
|
||||
|
||||
<p>The Tool object refers to a script that the user can interact with by using the mouse and keyboard and can be accessed through the global <code>tool</code> variable. All its properties are also available in the paper scope.</p>
|
||||
<p>The global <code>tool</code> variable only exists in scripts that contain mouse handler functions (<a href="../classes/Tool.html#onmousemove"><tt>onMouseMove</tt></a>, <a href="../classes/Tool.html#onmousedown"><tt>onMouseDown</tt></a>, <a href="../classes/Tool.html#onmousedrag"><tt>onMouseDrag</tt></a>, <a href="../classes/Tool.html#onmouseup"><tt>onMouseUp</tt></a>) or a keyboard handler function (<a href="../classes/Tool.html#onkeydown"><tt>onKeyDown</tt></a>, <a href="../classes/Tool.html#onkeyup"><tt>onKeyUp</tt></a>).</p>
|
||||
<h4>Example:</h4>
|
||||
|
||||
<div class="paperscript split">
|
||||
|
||||
<div class="buttons">
|
||||
<div class="button run">Run</div>
|
||||
</div>
|
||||
|
||||
<script type="text/paperscript" canvas="canvas-0">
|
||||
var path;
|
||||
|
||||
// Only execute onMouseDrag when the mouse
|
||||
// has moved at least 10 points:
|
||||
tool.minDistance = 10;
|
||||
|
||||
tool.onMouseDown = function(event) {
|
||||
// Create a new path every time the mouse is clicked
|
||||
path = new Path();
|
||||
path.add(event.point);
|
||||
path.strokeColor = 'black';
|
||||
}
|
||||
|
||||
tool.onMouseDrag = function(event) {
|
||||
// Add a point to the path every time the mouse is dragged
|
||||
path.add(event.point);
|
||||
}
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="300" id="canvas-0"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- ================================ properties =========================== -->
|
||||
<div class="reference-members">
|
||||
<h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="mindistance" class="member">
|
||||
<div class="member-link">
|
||||
<a name="mindistance" href="#mindistance"><tt><b>minDistance</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The minimum distance the mouse has to drag before firing the onMouseDrag event, since the last onMouseDrag event.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="maxdistance" class="member">
|
||||
<div class="member-link">
|
||||
<a name="maxdistance" href="#maxdistance"><tt><b>maxDistance</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The maximum distance the mouse has to drag before firing the onMouseDrag event, since the last onMouseDrag event.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="fixeddistance" class="member">
|
||||
<div class="member-link">
|
||||
<a name="fixeddistance" href="#fixeddistance"><tt><b>fixedDistance</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Mouse Event Handlers</h3>
|
||||
|
||||
<div id="onmousedown" class="member">
|
||||
<div class="member-link">
|
||||
<a name="onmousedown" href="#onmousedown"><tt><b>onMouseDown</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The function to be called when the mouse button is pushed down. The function receives a <a href="../classes/ToolEvent.html"><tt>ToolEvent</tt></a> object which contains information about the tool event.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>Function</tt>⟋<tt>null</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h4>Example:<span class="description">Creating circle shaped paths where the user presses the mouse button:</span></h4>
|
||||
|
||||
<div class="paperscript split">
|
||||
|
||||
<div class="buttons">
|
||||
<div class="button run">Run</div>
|
||||
</div>
|
||||
|
||||
<script type="text/paperscript" canvas="canvas-1">
|
||||
tool.onMouseDown = function(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'
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="onmousedrag" class="member">
|
||||
<div class="member-link">
|
||||
<a name="onmousedrag" href="#onmousedrag"><tt><b>onMouseDrag</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The function to be called when the mouse position changes while the mouse is being dragged. The function receives a <a href="../classes/ToolEvent.html"><tt>ToolEvent</tt></a> object which contains information about the tool event.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>Function</tt>⟋<tt>null</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h4>Example:<span class="description">Draw a line by adding a segment to a path on every mouse drag event:</span></h4>
|
||||
|
||||
<div class="paperscript split">
|
||||
|
||||
<div class="buttons">
|
||||
<div class="button run">Run</div>
|
||||
</div>
|
||||
|
||||
<script type="text/paperscript" canvas="canvas-2">
|
||||
// Create an empty path:
|
||||
var path = new Path({
|
||||
strokeColor: 'black'
|
||||
});
|
||||
|
||||
tool.onMouseDrag = function(event) {
|
||||
// Add a segment to the path at the position of the mouse:
|
||||
path.add(event.point);
|
||||
}
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="onmousemove" class="member">
|
||||
<div class="member-link">
|
||||
<a name="onmousemove" href="#onmousemove"><tt><b>onMouseMove</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The function to be called the mouse moves within the project view. The function receives a <a href="../classes/ToolEvent.html"><tt>ToolEvent</tt></a> object which contains information about the tool event.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>Function</tt>⟋<tt>null</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h4>Example:<span class="description">Moving a path to the position of the mouse:</span></h4>
|
||||
|
||||
<div class="paperscript split">
|
||||
|
||||
<div class="buttons">
|
||||
<div class="button run">Run</div>
|
||||
</div>
|
||||
|
||||
<script type="text/paperscript" canvas="canvas-3">
|
||||
// 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'
|
||||
});
|
||||
|
||||
tool.onMouseMove = function(event) {
|
||||
// Whenever the user moves the mouse, move the path
|
||||
// to that position:
|
||||
path.position = event.point;
|
||||
}
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="onmouseup" class="member">
|
||||
<div class="member-link">
|
||||
<a name="onmouseup" href="#onmouseup"><tt><b>onMouseUp</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The function to be called when the mouse button is released. The function receives a <a href="../classes/ToolEvent.html"><tt>ToolEvent</tt></a> object which contains information about the tool event.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>Function</tt>⟋<tt>null</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h4>Example:<span class="description">Creating circle shaped paths where the user releases the mouse:</span></h4>
|
||||
|
||||
<div class="paperscript split">
|
||||
|
||||
<div class="buttons">
|
||||
<div class="button run">Run</div>
|
||||
</div>
|
||||
|
||||
<script type="text/paperscript" canvas="canvas-4">
|
||||
tool.onMouseUp = function(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'
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Keyboard Event Handlers</h3>
|
||||
|
||||
<div id="onkeydown" class="member">
|
||||
<div class="member-link">
|
||||
<a name="onkeydown" href="#onkeydown"><tt><b>onKeyDown</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The function to be called when the user presses a key on the keyboard. The function receives a <a href="../classes/KeyEvent.html"><tt>KeyEvent</tt></a> object which contains information about the keyboard event.</p>
|
||||
<p>If the function returns <code>false</code>, the keyboard event will be prevented from bubbling up. This can be used for example to stop the window from scrolling, when you need the user to interact with arrow keys.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>Function</tt>⟋<tt>null</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h4>Example:<span class="description">Scaling a path whenever the user presses the space bar:</span></h4>
|
||||
|
||||
<div class="paperscript split">
|
||||
|
||||
<div class="buttons">
|
||||
<div class="button run">Run</div>
|
||||
</div>
|
||||
|
||||
<script type="text/paperscript" canvas="canvas-5">
|
||||
// Create a circle shaped path:
|
||||
var path = new Path.Circle({
|
||||
center: new Point(50, 50),
|
||||
radius: 30,
|
||||
fillColor: 'red'
|
||||
});
|
||||
|
||||
tool.onKeyDown = function(event) {
|
||||
if (event.key == 'space') {
|
||||
// Scale the path by 110%:
|
||||
path.scale(1.1);
|
||||
|
||||
// Prevent the key event from bubbling
|
||||
return false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="onkeyup" class="member">
|
||||
<div class="member-link">
|
||||
<a name="onkeyup" href="#onkeyup"><tt><b>onKeyUp</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The function to be called when the user releases a key on the keyboard. The function receives a <a href="../classes/KeyEvent.html"><tt>KeyEvent</tt></a> object which contains information about the keyboard event.</p>
|
||||
<p>If the function returns <code>false</code>, the keyboard event will be prevented from bubbling up. This can be used for example to stop the window from scrolling, when you need the user to interact with arrow keys.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>Function</tt>⟋<tt>null</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h4>Example:</h4>
|
||||
|
||||
|
||||
<pre><code>tool.onKeyUp = function(event) {
|
||||
if (event.key == 'space') {
|
||||
console.log('The spacebar was released!');
|
||||
}
|
||||
}</code></pre>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- ============================== methods ================================ -->
|
||||
<div class="reference-members">
|
||||
<h2>Methods</h2>
|
||||
|
||||
|
||||
<div id="activate" class="member">
|
||||
<div class="member-link">
|
||||
<a name="activate" href="#activate"><tt><b>activate</b>()</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Activates this tool, meaning <a href="../classes/PaperScope.html#tool"><tt>paperScope.tool</tt></a> will point to it and it will be the one that receives tool events.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="remove" class="member">
|
||||
<div class="member-link">
|
||||
<a name="remove" href="#remove"><tt><b>remove</b>()</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Removes this tool from the <a href="../classes/PaperScope.html#tools"><tt>paperScope.tools</tt></a> list.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Event Handling</h3>
|
||||
|
||||
<div id="on-type-function" class="member">
|
||||
<div class="member-link">
|
||||
<a name="on-type-function" href="#on-type-function"><tt><b>on</b>(type, function)</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Attach an event handler to the tool.</p>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Parameters:</h4>
|
||||
|
||||
<li>
|
||||
<tt>type:</tt>
|
||||
<tt>String</tt>
|
||||
— the event type: <tt>‘mousedown’</tt>, <tt>‘mouseup’</tt>, <tt>‘mousedrag’</tt>, <tt>‘mousemove’</tt>, <tt>‘keydown’</tt>, <tt>‘keyup’</tt>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>function:</tt>
|
||||
<tt>Function</tt>
|
||||
— the function to be called when the event occurs, receiving a <a href="../classes/ToolEvent.html"><tt>ToolEvent</tt></a> object as its sole argument
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/Tool.html"><tt>Tool</tt></a></tt> — this tool itself, so calls can be chained
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="on-param" class="member">
|
||||
<div class="member-link">
|
||||
<a name="on-param" href="#on-param"><tt><b>on</b>(param)</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Attach one or more event handlers to the tool.</p>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Parameters:</h4>
|
||||
|
||||
<li>
|
||||
<tt>param:</tt>
|
||||
<tt>Object</tt>
|
||||
— an object literal containing one or more of the following properties: <tt>mousedown</tt>, <tt>mouseup</tt>, <tt>mousedrag</tt>, <tt>mousemove</tt>, <tt>keydown</tt>, <tt>keyup</tt>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/Tool.html"><tt>Tool</tt></a></tt> — this tool itself, so calls can be chained
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="off-type-function" class="member">
|
||||
<div class="member-link">
|
||||
<a name="off-type-function" href="#off-type-function"><tt><b>off</b>(type, function)</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Detach an event handler from the tool.</p>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Parameters:</h4>
|
||||
|
||||
<li>
|
||||
<tt>type:</tt>
|
||||
<tt>String</tt>
|
||||
— the event type: <tt>‘mousedown’</tt>, <tt>‘mouseup’</tt>, <tt>‘mousedrag’</tt>, <tt>‘mousemove’</tt>, <tt>‘keydown’</tt>, <tt>‘keyup’</tt>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>function:</tt>
|
||||
<tt>Function</tt>
|
||||
— the function to be detached
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/Tool.html"><tt>Tool</tt></a></tt> — this tool itself, so calls can be chained
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="off-param" class="member">
|
||||
<div class="member-link">
|
||||
<a name="off-param" href="#off-param"><tt><b>off</b>(param)</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Detach one or more event handlers from the tool.</p>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Parameters:</h4>
|
||||
|
||||
<li>
|
||||
<tt>param:</tt>
|
||||
<tt>Object</tt>
|
||||
— an object literal containing one or more of the following properties: <tt>mousedown</tt>, <tt>mouseup</tt>, <tt>mousedrag</tt>, <tt>mousemove</tt>, <tt>keydown</tt>, <tt>keyup</tt>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/Tool.html"><tt>Tool</tt></a></tt> — this tool itself, so calls can be chained
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="emit-type-event" class="member">
|
||||
<div class="member-link">
|
||||
<a name="emit-type-event" href="#emit-type-event"><tt><b>emit</b>(type, event)</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Emit an event on the tool.</p>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Parameters:</h4>
|
||||
|
||||
<li>
|
||||
<tt>type:</tt>
|
||||
<tt>String</tt>
|
||||
— the event type: <tt>‘mousedown’</tt>, <tt>‘mouseup’</tt>, <tt>‘mousedrag’</tt>, <tt>‘mousemove’</tt>, <tt>‘keydown’</tt>, <tt>‘keyup’</tt>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>event:</tt>
|
||||
<tt>Object</tt>
|
||||
— an object literal containing properties describing the event
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the event had listeners, <tt>false</tt> otherwise
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="responds-type" class="member">
|
||||
<div class="member-link">
|
||||
<a name="responds-type" href="#responds-type"><tt><b>responds</b>(type)</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Check if the tool has one or more event handlers of the specified type.</p>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Parameters:</h4>
|
||||
|
||||
<li>
|
||||
<tt>type:</tt>
|
||||
<tt>String</tt>
|
||||
— the event type: <tt>‘mousedown’</tt>, <tt>‘mouseup’</tt>, <tt>‘mousedrag’</tt>, <tt>‘mousemove’</tt>, <tt>‘keydown’</tt>, <tt>‘keyup’</tt>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the tool has one or more event handlers of the specified type, <tt>false</tt> otherwise
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================== -->
|
||||
<p class="footer">
|
||||
Paper.js v0.12.17<br>
|
||||
Copyright © 2011—2022 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
||||
<div class="content-end"></div>
|
||||
|
||||
|
||||
</article>
|
||||
</body>
|
||||
446
paper.js/assets/paperjs/docs/classes/ToolEvent.html
Normal file
446
paper.js/assets/paperjs/docs/classes/ToolEvent.html
Normal file
@ -0,0 +1,446 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>ToolEvent</title>
|
||||
<base target="class-frame">
|
||||
<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
|
||||
<script src="../assets/js/paper.js"></script>
|
||||
<script src="../assets/js/jquery.js"></script>
|
||||
<script src="../assets/js/codemirror.js"></script>
|
||||
<script src="../assets/js/docs.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<article class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>ToolEvent</h1>
|
||||
|
||||
<p> Extends <b><a href="../classes/Event.html"><tt>Event</tt></a></b></p>
|
||||
|
||||
<p>ToolEvent The ToolEvent object is received by the <a href="../classes/Tool.html"><tt>Tool</tt></a>’s mouse event handlers <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a>, <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a>, <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> and <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a>. The ToolEvent object is the only parameter passed to these functions and contains information about the mouse event.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- ================================ properties =========================== -->
|
||||
<div class="reference-members">
|
||||
<h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="type" class="member">
|
||||
<div class="member-link">
|
||||
<a name="type" href="#type"><tt><b>type</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The type of tool event.</p>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Values:</h4>
|
||||
<li><tt>'mousedown'</tt>, <tt>'mouseup'</tt>, <tt>'mousemove'</tt>, <tt>'mousedrag'</tt></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>String</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="point" class="member">
|
||||
<div class="member-link">
|
||||
<a name="point" href="#point"><tt><b>point</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The position of the mouse in project coordinates when the event was fired.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h4>Example:</h4>
|
||||
|
||||
|
||||
<pre><code>function onMouseDrag(event) {
|
||||
// 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);
|
||||
}</code></pre>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="lastpoint" class="member">
|
||||
<div class="member-link">
|
||||
<a name="lastpoint" href="#lastpoint"><tt><b>lastPoint</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The position of the mouse in project coordinates when the previous event was fired.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="downpoint" class="member">
|
||||
<div class="member-link">
|
||||
<a name="downpoint" href="#downpoint"><tt><b>downPoint</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The position of the mouse in project coordinates when the mouse button was last clicked.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="middlepoint" class="member">
|
||||
<div class="member-link">
|
||||
<a name="middlepoint" href="#middlepoint"><tt><b>middlePoint</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The point in the middle between <a href="../classes/ToolEvent.html#lastpoint"><tt>lastPoint</tt></a> and <a href="../classes/ToolEvent.html#point"><tt>point</tt></a>. This is a useful position to use when creating artwork based on the moving direction of the mouse, as returned by <a href="../classes/ToolEvent.html#delta"><tt>delta</tt></a>.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="delta" class="member">
|
||||
<div class="member-link">
|
||||
<a name="delta" href="#delta"><tt><b>delta</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The difference between the current position and the last position of the mouse when the event was fired. In case of the mouseup event, the difference to the mousedown position is returned.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="count" class="member">
|
||||
<div class="member-link">
|
||||
<a name="count" href="#count"><tt><b>count</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The number of times the mouse event was fired.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="item" class="member">
|
||||
<div class="member-link">
|
||||
<a name="item" href="#item"><tt><b>item</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The item at the position of the mouse (if any).</p>
|
||||
<p>If the item is contained within one or more <a href="../classes/Group.html"><tt>Group</tt></a> or <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a> items, the most top level group or compound path that it is contained within is returned.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/Item.html"><tt>Item</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- ============================== methods ================================ -->
|
||||
<div class="reference-members">
|
||||
<h2>Methods</h2>
|
||||
|
||||
|
||||
<div id="tostring" class="member">
|
||||
<div class="member-link">
|
||||
<a name="tostring" href="#tostring"><tt><b>toString</b>()</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><tt>String</tt></tt> — a string representation of the tool event
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== inherited properties ====================== -->
|
||||
<div class="reference-members"><h2>Properties inherited from <a href="../classes/Event.html"><tt>Event</tt></a></h2>
|
||||
|
||||
|
||||
<div id="timestamp" class="member">
|
||||
<div class="member-link">
|
||||
<a name="timestamp" href="#timestamp"><tt><b>timeStamp</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The time at which the event was created, in milliseconds since the epoch.</p>
|
||||
|
||||
<p>Read only.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="modifiers" class="member">
|
||||
<div class="member-link">
|
||||
<a name="modifiers" href="#modifiers"><tt><b>modifiers</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The current state of the keyboard modifiers.</p>
|
||||
|
||||
<p>Read only.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>object</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>See also:</h4>
|
||||
|
||||
<li><tt><a href="../classes/Key.html#modifiers"><tt>Key.modifiers</tt></a></tt></li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- =========================== inherited methods ========================= -->
|
||||
<div class="reference-members"><h2>Methods inherited from <a href="../classes/Event.html"><tt>Event</tt></a></h2>
|
||||
|
||||
|
||||
<div id="preventdefault" class="member">
|
||||
<div class="member-link">
|
||||
<a name="preventdefault" href="#preventdefault"><tt><b>preventDefault</b>()</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Cancels the event if it is cancelable, without stopping further propagation of the event.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="stoppropagation" class="member">
|
||||
<div class="member-link">
|
||||
<a name="stoppropagation" href="#stoppropagation"><tt><b>stopPropagation</b>()</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Prevents further propagation of the current event.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="stop" class="member">
|
||||
<div class="member-link">
|
||||
<a name="stop" href="#stop"><tt><b>stop</b>()</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Cancels the event if it is cancelable, and stops stopping further propagation of the event. This is has the same effect as calling both <a href="../classes/Event.html#stoppropagation"><tt>stopPropagation</tt></a>() and <a href="../classes/Event.html#preventdefault"><tt>preventDefault</tt></a>().</p>
|
||||
<p>Any handler can also return <code>false</code> to indicate that <code>stop()</code> should be called right after.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================== -->
|
||||
<p class="footer">
|
||||
Paper.js v0.12.17<br>
|
||||
Copyright © 2011—2022 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
||||
<div class="content-end"></div>
|
||||
|
||||
|
||||
</article>
|
||||
</body>
|
||||
374
paper.js/assets/paperjs/docs/classes/Tween.html
Normal file
374
paper.js/assets/paperjs/docs/classes/Tween.html
Normal file
@ -0,0 +1,374 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Tween</title>
|
||||
<base target="class-frame">
|
||||
<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
|
||||
<script src="../assets/js/paper.js"></script>
|
||||
<script src="../assets/js/jquery.js"></script>
|
||||
<script src="../assets/js/codemirror.js"></script>
|
||||
<script src="../assets/js/docs.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<article class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>Tween</h1>
|
||||
|
||||
<p>Allows tweening <code>Object</code> properties between two states for a given duration. To tween properties on Paper.js <a href="../classes/Item.html"><tt>Item</tt></a> instances, <a href="../classes/Item.html#tween-from-to-options"><tt>item.tween(from, to, options)</tt></a> can be used, which returns created tween instance.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- =============================== constructors ========================== -->
|
||||
<div class="reference-members">
|
||||
<h2>Constructors</h2>
|
||||
|
||||
|
||||
<div id="tween-object-from-to-duration" class="member">
|
||||
<div class="member-link">
|
||||
<a name="tween-object-from-to-duration" href="#tween-object-from-to-duration"><tt><b>Tween</b>(object, from, to, duration[, easing[, start]])</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Creates a new tween.</p>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Parameters:</h4>
|
||||
|
||||
<li>
|
||||
<tt>object:</tt>
|
||||
<tt>Object</tt>
|
||||
— the object to tween the properties on
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>from:</tt>
|
||||
<tt>Object</tt>
|
||||
— the state at the start of the tweening
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>to:</tt>
|
||||
<tt>Object</tt>
|
||||
— the state at the end of the tweening
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>duration:</tt>
|
||||
<tt>Number</tt>
|
||||
— the duration of the tweening
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>easing:</tt>
|
||||
<tt>String</tt>⟋<tt>Function</tt>
|
||||
— the type of the easing function or the easing function
|
||||
— optional, default: <tt>‘linear’</tt>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>start:</tt>
|
||||
<tt>Boolean</tt>
|
||||
— whether to start tweening automatically
|
||||
— optional, default: <tt>true</tt>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/Tween.html"><tt>Tween</tt></a></tt> — the newly created tween
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- ================================ properties =========================== -->
|
||||
<div class="reference-members">
|
||||
<h2>Properties</h2>
|
||||
|
||||
|
||||
<h3>Event Handlers</h3>
|
||||
|
||||
<div id="onupdate" class="member">
|
||||
<div class="member-link">
|
||||
<a name="onupdate" href="#onupdate"><tt><b>onUpdate</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The function to be called when the tween is updated. It receives an object as its sole argument, containing the current progress of the tweening and the factor calculated by the easing function.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>Function</tt>⟋<tt>null</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h4>Example:<span class="description">Display tween progression values:</span></h4>
|
||||
|
||||
<div class="paperscript split">
|
||||
|
||||
<div class="buttons">
|
||||
<div class="button run">Run</div>
|
||||
</div>
|
||||
|
||||
<script type="text/paperscript" canvas="canvas-0">
|
||||
var circle = new Path.Circle({
|
||||
center: view.center,
|
||||
radius: 40,
|
||||
fillColor: 'blue'
|
||||
});
|
||||
var tween = circle.tweenTo(
|
||||
{ fillColor: 'red' },
|
||||
{
|
||||
duration: 2000,
|
||||
easing: 'easeInCubic'
|
||||
}
|
||||
);
|
||||
var progressText = new PointText(view.center + [60, -10]);
|
||||
var factorText = new PointText(view.center + [60, 10]);
|
||||
|
||||
// Install event using onUpdate() property:
|
||||
tween.onUpdate = function(event) {
|
||||
progressText.content = 'progress: ' + event.progress.toFixed(2);
|
||||
};
|
||||
|
||||
// Install event using on('update') method:
|
||||
tween.on('update', function(event) {
|
||||
factorText.content = 'factor: ' + event.factor.toFixed(2);
|
||||
});
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- ============================== methods ================================ -->
|
||||
<div class="reference-members">
|
||||
<h2>Methods</h2>
|
||||
|
||||
|
||||
<div id="then-function" class="member">
|
||||
<div class="member-link">
|
||||
<a name="then-function" href="#then-function"><tt><b>then</b>(function)</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Set a function that will be executed when the tween completes.</p>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Parameters:</h4>
|
||||
|
||||
<li>
|
||||
<tt>function:</tt>
|
||||
<tt>Function</tt>
|
||||
— the function to execute when the tween completes
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/Tween.html"><tt>Tween</tt></a></tt>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
<h4>Example:<span class="description">Tweens chaining:</span></h4>
|
||||
|
||||
<div class="paperscript split">
|
||||
|
||||
<div class="buttons">
|
||||
<div class="button run">Run</div>
|
||||
</div>
|
||||
|
||||
<script type="text/paperscript" canvas="canvas-1">
|
||||
var circle = new Path.Circle({
|
||||
center: view.center,
|
||||
radius: 40,
|
||||
fillColor: 'blue'
|
||||
});
|
||||
// Tween color from blue to red.
|
||||
var tween = circle.tweenTo({ fillColor: 'red' }, 2000);
|
||||
// When the first tween completes...
|
||||
tween.then(function() {
|
||||
// ...tween color back to blue.
|
||||
circle.tweenTo({ fillColor: 'blue' }, 2000);
|
||||
});
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="start" class="member">
|
||||
<div class="member-link">
|
||||
<a name="start" href="#start"><tt><b>start</b>()</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Start tweening.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/Tween.html"><tt>Tween</tt></a></tt>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
<h4>Example:<span class="description">Manually start tweening.</span></h4>
|
||||
|
||||
<div class="paperscript split">
|
||||
|
||||
<div class="buttons">
|
||||
<div class="button run">Run</div>
|
||||
</div>
|
||||
|
||||
<script type="text/paperscript" canvas="canvas-2">
|
||||
var circle = new Path.Circle({
|
||||
center: view.center,
|
||||
radius: 40,
|
||||
fillColor: 'blue'
|
||||
});
|
||||
var tween = circle.tweenTo(
|
||||
{ fillColor: 'red' },
|
||||
{ duration: 2000, start: false }
|
||||
);
|
||||
tween.start();
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="stop" class="member">
|
||||
<div class="member-link">
|
||||
<a name="stop" href="#stop"><tt><b>stop</b>()</tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
<div class="member-text">
|
||||
<p>Stop tweening.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Returns:</h4>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/Tween.html"><tt>Tween</tt></a></tt>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
<h4>Example:<span class="description">Stop a tween before it completes.</span></h4>
|
||||
|
||||
<div class="paperscript split">
|
||||
|
||||
<div class="buttons">
|
||||
<div class="button run">Run</div>
|
||||
</div>
|
||||
|
||||
<script type="text/paperscript" canvas="canvas-3">
|
||||
var circle = new Path.Circle({
|
||||
center: view.center,
|
||||
radius: 40,
|
||||
fillColor: 'blue'
|
||||
});
|
||||
// Start tweening from blue to red for 2 seconds.
|
||||
var tween = circle.tweenTo({ fillColor: 'red' }, 2000);
|
||||
// After 1 second...
|
||||
setTimeout(function(){
|
||||
// ...stop tweening.
|
||||
tween.stop();
|
||||
}, 1000);
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================== -->
|
||||
<p class="footer">
|
||||
Paper.js v0.12.17<br>
|
||||
Copyright © 2011—2022 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
||||
<div class="content-end"></div>
|
||||
|
||||
|
||||
</article>
|
||||
</body>
|
||||
1772
paper.js/assets/paperjs/docs/classes/View.html
Normal file
1772
paper.js/assets/paperjs/docs/classes/View.html
Normal file
File diff suppressed because it is too large
Load Diff
425
paper.js/assets/paperjs/docs/classes/global.html
Normal file
425
paper.js/assets/paperjs/docs/classes/global.html
Normal file
@ -0,0 +1,425 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>_global_</title>
|
||||
<base target="class-frame">
|
||||
<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
|
||||
<script src="../assets/js/paper.js"></script>
|
||||
<script src="../assets/js/jquery.js"></script>
|
||||
<script src="../assets/js/codemirror.js"></script>
|
||||
<script src="../assets/js/docs.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<article class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>Global Scope</h1>
|
||||
|
||||
<p>When code is executed as PaperScript, the script’s scope is populated with all fields of the currently active <a href="../classes/PaperScope.html"><tt>PaperScope</tt></a> object, which within the script appear to be global.</p>
|
||||
<p>In a JavaScript context, only the <a href="../classes/global.html#paper"><tt>paper</tt></a> variable is added to the global scope, referencing the currently active <a href="../classes/PaperScope.html"><tt>PaperScope</tt></a> object, through which all properties and Paper.js classes can be accessed.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- ================================ properties =========================== -->
|
||||
<div class="reference-members">
|
||||
<h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="paper" class="member">
|
||||
<div class="member-link">
|
||||
<a name="paper" href="#paper"><tt><b>paper</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>A reference to the currently active <a href="../classes/PaperScope.html"><tt>PaperScope</tt></a> object.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/PaperScope.html"><tt>PaperScope</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Global PaperScript Properties</h3>
|
||||
|
||||
<div id="project" class="member">
|
||||
<div class="member-link">
|
||||
<a name="project" href="#project"><tt><b>project</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The project for which the PaperScript is executed.</p>
|
||||
<p>Note that when working with multiple projects, this does not necessarily reflect the currently active project. For this, use <a href="../classes/PaperScope.html#project"><tt>paperScope.project</tt></a> instead.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/Project.html"><tt>Project</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="projects" class="member">
|
||||
<div class="member-link">
|
||||
<a name="projects" href="#projects"><tt><b>projects</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The list of all open projects within the current Paper.js context.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
Array of <a href="../classes/Project.html"><tt>Project</tt></a> objects
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="view" class="member">
|
||||
<div class="member-link">
|
||||
<a name="view" href="#view"><tt><b>view</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The reference to the project’s view.</p>
|
||||
<p>Note that when working with multiple projects, this does not necessarily reflect the view of the currently active project. For this, use <a href="../classes/PaperScope.html#view"><tt>paperScope.view</tt></a> instead.</p>
|
||||
|
||||
<p>Read only.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/View.html"><tt>View</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="tool" class="member">
|
||||
<div class="member-link">
|
||||
<a name="tool" href="#tool"><tt><b>tool</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The reference to the tool object which is automatically created when global tool event handlers are defined.</p>
|
||||
<p>Note that when working with multiple tools, this does not necessarily reflect the currently active tool. For this, use <a href="../classes/PaperScope.html#tool"><tt>paperScope.tool</tt></a> instead.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<a href="../classes/Tool.html"><tt>Tool</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="tools" class="member">
|
||||
<div class="member-link">
|
||||
<a name="tools" href="#tools"><tt><b>tools</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>The list of available tools.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
Array of <a href="../classes/Tool.html"><tt>Tool</tt></a> objects
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>PaperScript View Event Handlers</h3>
|
||||
|
||||
<div id="onframe" class="member">
|
||||
<div class="member-link">
|
||||
<a name="onframe" href="#onframe"><tt><b>onFrame</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>A global reference to the <a href="../classes/View.html#onframe"><tt>view.onFrame</tt></a> handler function.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>Function</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="onresize" class="member">
|
||||
<div class="member-link">
|
||||
<a name="onresize" href="#onresize"><tt><b>onResize</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>A reference to the <a href="../classes/View.html#onresize"><tt>view.onResize</tt></a> handler function.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>Function</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>PaperScript Tool Event Handlers</h3>
|
||||
|
||||
<div id="onmousedown" class="member">
|
||||
<div class="member-link">
|
||||
<a name="onmousedown" href="#onmousedown"><tt><b>onMouseDown</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>A reference to the <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> handler function.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>Function</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="onmousedrag" class="member">
|
||||
<div class="member-link">
|
||||
<a name="onmousedrag" href="#onmousedrag"><tt><b>onMouseDrag</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>A reference to the <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> handler function.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>Function</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="onmousemove" class="member">
|
||||
<div class="member-link">
|
||||
<a name="onmousemove" href="#onmousemove"><tt><b>onMouseMove</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>A reference to the <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> handler function.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>Function</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="onmouseup" class="member">
|
||||
<div class="member-link">
|
||||
<a name="onmouseup" href="#onmouseup"><tt><b>onMouseUp</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>A reference to the <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> handler function.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>Function</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Keyboard Event Handlers (for PaperScript)</h3>
|
||||
|
||||
<div id="onkeydown" class="member">
|
||||
<div class="member-link">
|
||||
<a name="onkeydown" href="#onkeydown"><tt><b>onKeyDown</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>A reference to the <a href="../classes/Tool.html#onkeydown"><tt>tool.onKeyDown</tt></a> handler function.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>Function</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="onkeyup" class="member">
|
||||
<div class="member-link">
|
||||
<a name="onkeyup" href="#onkeyup"><tt><b>onKeyUp</b></tt></a>
|
||||
</div>
|
||||
<div class="member-description hidden">
|
||||
|
||||
<div class="member-text">
|
||||
<p>A reference to the <a href="../classes/Tool.html#onkeyup"><tt>tool.onKeyUp</tt></a> handler function.</p>
|
||||
|
||||
|
||||
|
||||
<ul class="member-list">
|
||||
<h4>Type:</h4>
|
||||
<li>
|
||||
<tt>Function</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================== -->
|
||||
<p class="footer">
|
||||
Paper.js v0.12.17<br>
|
||||
Copyright © 2011—2022 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
||||
<div class="content-end"></div>
|
||||
|
||||
|
||||
</article>
|
||||
</body>
|
||||
88
paper.js/assets/paperjs/docs/classes/index.html
Normal file
88
paper.js/assets/paperjs/docs/classes/index.html
Normal file
@ -0,0 +1,88 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Paper.js v0.12.17</title>
|
||||
<base target="class-frame">
|
||||
<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-index">
|
||||
<h1>Paper.js<span class="version">0.12.17</span></h1>
|
||||
<ul class="reference-classes"><li><a href="../classes/global.html">Global Scope</a></li>
|
||||
<li>
|
||||
<h2>Basic Types</h2>
|
||||
<ul>
|
||||
<li><a href="../classes/Point.html">Point</a></li>
|
||||
<li><a href="../classes/Size.html">Size</a></li>
|
||||
<li><a href="../classes/Rectangle.html">Rectangle</a></li>
|
||||
<li><a href="../classes/Matrix.html">Matrix</a></li>
|
||||
</ul>
|
||||
<li>
|
||||
<h2>Project & Items</h2>
|
||||
<ul>
|
||||
<li><a href="../classes/Project.html">Project</a></li>
|
||||
<li><a href="../classes/Item.html">Item</a></li>
|
||||
<li><a href="../classes/Layer.html">Layer</a></li>
|
||||
<li><a href="../classes/Group.html">Group</a></li>
|
||||
<li><a href="../classes/Shape.html">Shape</a></li>
|
||||
<li><a href="../classes/Raster.html">Raster</a></li>
|
||||
<li><hr /></li>
|
||||
<li><a href="../classes/HitResult.html">HitResult</a></li>
|
||||
</ul>
|
||||
<li>
|
||||
<h2>Paths</h2>
|
||||
<ul>
|
||||
<li><a href="../classes/PathItem.html">PathItem</a></li>
|
||||
<li><a href="../classes/Path.html">Path</a></li>
|
||||
<li><a href="../classes/CompoundPath.html">CompoundPath</a></li>
|
||||
<li><a href="../classes/Segment.html">Segment</a></li>
|
||||
<li><a href="../classes/Curve.html">Curve</a></li>
|
||||
<li><hr /></li>
|
||||
<li><a href="../classes/CurveLocation.html">CurveLocation</a></li>
|
||||
</ul>
|
||||
<li>
|
||||
<h2>Symbols</h2>
|
||||
<ul>
|
||||
<li><a href="../classes/SymbolDefinition.html">SymbolDefinition</a></li>
|
||||
<li><a href="../classes/SymbolItem.html">SymbolItem</a></li>
|
||||
</ul>
|
||||
<li>
|
||||
<h2>Styling</h2>
|
||||
<ul>
|
||||
<li><a href="../classes/Style.html">Style</a></li>
|
||||
<li><a href="../classes/Color.html">Color</a></li>
|
||||
<li><a href="../classes/Gradient.html">Gradient</a></li>
|
||||
<li><a href="../classes/GradientStop.html">GradientStop</a></li>
|
||||
</ul>
|
||||
<li>
|
||||
<h2>Animation</h2>
|
||||
<ul>
|
||||
<li><a href="../classes/Tween.html">Tween</a></li>
|
||||
</ul>
|
||||
<li>
|
||||
<h2>Typography</h2>
|
||||
<ul>
|
||||
<li><a href="../classes/TextItem.html">TextItem</a></li>
|
||||
<li><a href="../classes/PointText.html">PointText</a></li>
|
||||
</ul>
|
||||
<li>
|
||||
<h2>User Interaction & Events</h2>
|
||||
<ul>
|
||||
<li><a href="../classes/View.html">View</a></li>
|
||||
<li><a href="../classes/Event.html">Event</a></li>
|
||||
<li><a href="../classes/MouseEvent.html">MouseEvent</a></li>
|
||||
<li><a href="../classes/Tool.html">Tool</a></li>
|
||||
<li><a href="../classes/ToolEvent.html">ToolEvent</a></li>
|
||||
<li><a href="../classes/Key.html">Key</a></li>
|
||||
<li><a href="../classes/KeyEvent.html">KeyEvent</a></li>
|
||||
</ul>
|
||||
<li>
|
||||
<h2>JavaScript</h2>
|
||||
<ul>
|
||||
<li><a href="../classes/PaperScope.html">PaperScope</a></li>
|
||||
<li><a href="../classes/PaperScript.html">PaperScript</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
11
paper.js/assets/paperjs/docs/index.html
Normal file
11
paper.js/assets/paperjs/docs/index.html
Normal file
@ -0,0 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Paper.js v0.12.17</title>
|
||||
</head>
|
||||
<frameset cols="230,*">
|
||||
<frame src="classes/index.html" name="packageListFrame" title="All Packages">
|
||||
<frame src="about:blank" name="class-frame" title="Class and interface descriptions">
|
||||
</frameset>
|
||||
</html>
|
||||
53
paper.js/assets/paperjs/examples/Animated/AnimatedStar.html
Normal file
53
paper.js/assets/paperjs/examples/Animated/AnimatedStar.html
Normal file
@ -0,0 +1,53 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Animated Star</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
var layer = project.activeLayer;
|
||||
|
||||
var values = {
|
||||
count: 34,
|
||||
points: 32
|
||||
};
|
||||
|
||||
for (var i = 0; i < values.count; i++) {
|
||||
var path = new Path({
|
||||
fillColor: i % 2 ? 'red' : 'black',
|
||||
closed: true
|
||||
});
|
||||
|
||||
var offset = new Point(20 + 10 * i, 0);
|
||||
var l = offset.length;
|
||||
for (var j = 0; j < values.points * 2; j++) {
|
||||
offset.angle += 360 / values.points;
|
||||
var vector = offset.normalize(l * (j % 2 ? 0.1 : -0.1));
|
||||
path.add(offset + vector);
|
||||
}
|
||||
path.smooth({ type: 'continuous' });
|
||||
layer.insertChild(0, new Group({
|
||||
children: [path],
|
||||
applyMatrix: false
|
||||
}));
|
||||
}
|
||||
|
||||
function onFrame(event) {
|
||||
for (var i = 0; i < values.count; i++) {
|
||||
var item = layer.children[i];
|
||||
var angle = (values.count - i) * Math.sin(event.count / 128) / 10;
|
||||
item.rotate(angle);
|
||||
}
|
||||
}
|
||||
|
||||
// Reposition the paths whenever the window is resized:
|
||||
function onResize(event) {
|
||||
layer.position = view.center;
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" resize stats hidpi="off"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
115
paper.js/assets/paperjs/examples/Animated/BooleanOperations.html
Normal file
115
paper.js/assets/paperjs/examples/Animated/BooleanOperations.html
Normal file
@ -0,0 +1,115 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Boolean Operations</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
var text = new PointText({
|
||||
position: view.center + [0, 200],
|
||||
fillColor: 'black',
|
||||
justification: 'center',
|
||||
fontSize: 20
|
||||
});
|
||||
|
||||
var originals = new Group({ insert: false }); // Don't insert in DOM.
|
||||
|
||||
var square = new Path.Rectangle({
|
||||
position: view.center,
|
||||
size: 300,
|
||||
parent: originals,
|
||||
fillColor: 'white'
|
||||
});
|
||||
|
||||
// Make a ring using subtraction of two circles:
|
||||
var inner = new Path.Circle({
|
||||
center: view.center,
|
||||
radius: 100,
|
||||
parent: originals,
|
||||
fillColor: 'white'
|
||||
});
|
||||
|
||||
var outer = new Path.Circle({
|
||||
center: view.center,
|
||||
radius: 140,
|
||||
parent: originals,
|
||||
fillColor: 'white'
|
||||
});
|
||||
|
||||
var ring = outer.subtract(inner);
|
||||
|
||||
var operations = ['unite', 'intersect', 'subtract', 'exclude', 'divide'];
|
||||
var colors = ['red', 'green', 'blue', 'black'];
|
||||
var curIndex = -1;
|
||||
var operation, result, activeItem;
|
||||
|
||||
// Change the mode every 3 seconds:
|
||||
setInterval(setMode, 3000);
|
||||
|
||||
// Set the initial mode:
|
||||
setMode();
|
||||
|
||||
function setMode() {
|
||||
curIndex++;
|
||||
if (curIndex == operations.length * 2)
|
||||
curIndex = 0;
|
||||
operation = operations[curIndex % operations.length];
|
||||
}
|
||||
|
||||
function onMouseDown(event) {
|
||||
var hitResult = originals.hitTest(event.point);
|
||||
activeItem = hitResult && hitResult.item;
|
||||
}
|
||||
|
||||
function onMouseDrag(event) {
|
||||
if (activeItem)
|
||||
activeItem.position = event.point;
|
||||
}
|
||||
|
||||
function onMouseUp() {
|
||||
activeItem = null;
|
||||
square.position = view.center;
|
||||
}
|
||||
|
||||
function onFrame(event) {
|
||||
if (activeItem != ring) {
|
||||
// Move the ring around:
|
||||
var offset = new Point(140, 80) * [Math.sin(event.count / 60), Math.sin(event.count / 40)];
|
||||
ring.position = view.center + offset;
|
||||
}
|
||||
|
||||
// Remove the result of the last path operation:
|
||||
if (result)
|
||||
result.remove();
|
||||
|
||||
// Perform the path operation on the ring:
|
||||
if (curIndex < operations.length) {
|
||||
result = square[operation](ring);
|
||||
text.content = 'square.' + operation + '(ring)';
|
||||
} else {
|
||||
result = ring[operation](square);
|
||||
text.content = 'ring.' + operation + '(square)';
|
||||
}
|
||||
result.selected = true;
|
||||
result.fillColor = colors[curIndex % colors.length];
|
||||
result.moveBelow(text);
|
||||
|
||||
// If the result is a group, color each of its children differently:
|
||||
if (result instanceof Group) {
|
||||
for (var i = 0; i < result.children.length; i++) {
|
||||
result.children[i].fillColor = colors[i];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function onResize() {
|
||||
text.position = view.center + [0, 200];
|
||||
square.position = view.center;
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" resize stats></canvas>
|
||||
</body>
|
||||
</html>
|
||||
151
paper.js/assets/paperjs/examples/Animated/CandyCrash.html
Normal file
151
paper.js/assets/paperjs/examples/Animated/CandyCrash.html
Normal file
@ -0,0 +1,151 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Candy Crash</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
// kynd.info 2014
|
||||
|
||||
function Ball(r, p, v) {
|
||||
this.radius = r;
|
||||
this.point = p;
|
||||
this.vector = v;
|
||||
this.maxVec = 15;
|
||||
this.numSegment = Math.floor(r / 3 + 2);
|
||||
this.boundOffset = [];
|
||||
this.boundOffsetBuff = [];
|
||||
this.sidePoints = [];
|
||||
this.path = new Path({
|
||||
fillColor: {
|
||||
hue: Math.random() * 360,
|
||||
saturation: 1,
|
||||
brightness: 1
|
||||
},
|
||||
blendMode: 'lighter'
|
||||
});
|
||||
|
||||
for (var i = 0; i < this.numSegment; i ++) {
|
||||
this.boundOffset.push(this.radius);
|
||||
this.boundOffsetBuff.push(this.radius);
|
||||
this.path.add(new Point());
|
||||
this.sidePoints.push(new Point({
|
||||
angle: 360 / this.numSegment * i,
|
||||
length: 1
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
Ball.prototype = {
|
||||
iterate: function() {
|
||||
this.checkBorders();
|
||||
if (this.vector.length > this.maxVec)
|
||||
this.vector.length = this.maxVec;
|
||||
this.point += this.vector;
|
||||
this.updateShape();
|
||||
},
|
||||
|
||||
checkBorders: function() {
|
||||
var size = view.size;
|
||||
if (this.point.x < -this.radius)
|
||||
this.point.x = size.width + this.radius;
|
||||
if (this.point.x > size.width + this.radius)
|
||||
this.point.x = -this.radius;
|
||||
if (this.point.y < -this.radius)
|
||||
this.point.y = size.height + this.radius;
|
||||
if (this.point.y > size.height + this.radius)
|
||||
this.point.y = -this.radius;
|
||||
},
|
||||
|
||||
updateShape: function() {
|
||||
var segments = this.path.segments;
|
||||
for (var i = 0; i < this.numSegment; i ++)
|
||||
segments[i].point = this.getSidePoint(i);
|
||||
|
||||
this.path.smooth();
|
||||
for (var i = 0; i < this.numSegment; i ++) {
|
||||
if (this.boundOffset[i] < this.radius / 4)
|
||||
this.boundOffset[i] = this.radius / 4;
|
||||
var next = (i + 1) % this.numSegment;
|
||||
var prev = (i > 0) ? i - 1 : this.numSegment - 1;
|
||||
var offset = this.boundOffset[i];
|
||||
offset += (this.radius - offset) / 15;
|
||||
offset += ((this.boundOffset[next] + this.boundOffset[prev]) / 2 - offset) / 3;
|
||||
this.boundOffsetBuff[i] = this.boundOffset[i] = offset;
|
||||
}
|
||||
},
|
||||
|
||||
react: function(b) {
|
||||
var dist = this.point.getDistance(b.point);
|
||||
if (dist < this.radius + b.radius && dist != 0) {
|
||||
var overlap = this.radius + b.radius - dist;
|
||||
var direc = (this.point - b.point).normalize(overlap * 0.015);
|
||||
this.vector += direc;
|
||||
b.vector -= direc;
|
||||
|
||||
this.calcBounds(b);
|
||||
b.calcBounds(this);
|
||||
this.updateBounds();
|
||||
b.updateBounds();
|
||||
}
|
||||
},
|
||||
|
||||
getBoundOffset: function(b) {
|
||||
var diff = this.point - b;
|
||||
var angle = (diff.angle + 180) % 360;
|
||||
return this.boundOffset[Math.floor(angle / 360 * this.boundOffset.length)];
|
||||
},
|
||||
|
||||
calcBounds: function(b) {
|
||||
for (var i = 0; i < this.numSegment; i ++) {
|
||||
var tp = this.getSidePoint(i);
|
||||
var bLen = b.getBoundOffset(tp);
|
||||
var td = tp.getDistance(b.point);
|
||||
if (td < bLen) {
|
||||
this.boundOffsetBuff[i] -= (bLen - td) / 2;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
getSidePoint: function(index) {
|
||||
return this.point + this.sidePoints[index] * this.boundOffset[index];
|
||||
},
|
||||
|
||||
updateBounds: function() {
|
||||
for (var i = 0; i < this.numSegment; i ++)
|
||||
this.boundOffset[i] = this.boundOffsetBuff[i];
|
||||
}
|
||||
};
|
||||
|
||||
//--------------------- main ---------------------
|
||||
|
||||
var balls = [];
|
||||
var numBalls = 18;
|
||||
for (var i = 0; i < numBalls; i++) {
|
||||
var position = Point.random() * view.size;
|
||||
var vector = new Point({
|
||||
angle: 360 * Math.random(),
|
||||
length: Math.random() * 10
|
||||
});
|
||||
var radius = Math.random() * 60 + 60;
|
||||
balls.push(new Ball(radius, position, vector));
|
||||
}
|
||||
|
||||
function onFrame() {
|
||||
for (var i = 0; i < balls.length - 1; i++) {
|
||||
for (var j = i + 1; j < balls.length; j++) {
|
||||
balls[i].react(balls[j]);
|
||||
}
|
||||
}
|
||||
for (var i = 0, l = balls.length; i < l; i++) {
|
||||
balls[i].iterate();
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" resize hidpi="off" style="background:black"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
50
paper.js/assets/paperjs/examples/Animated/Extruded.html
Normal file
50
paper.js/assets/paperjs/examples/Animated/Extruded.html
Normal file
@ -0,0 +1,50 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Extruded</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
var lineGroup = new Group();
|
||||
var lineCount = 100;
|
||||
for (var i = 0; i < lineCount; i++) {
|
||||
var linePath = new Path.Line([0, 0], [0, 0]);
|
||||
lineGroup.addChild(linePath);
|
||||
}
|
||||
lineGroup.strokeColor = 'red';
|
||||
|
||||
var path1 = new Path('M63.39307,265.71387c10.8667,6.96631 26.4707,12.26025 43.18896,12.26025c24.79932,0 39.28857,-13.09619 39.28857,-32.04346c0,-17.27588 -10.03125,-27.58545 -35.38721,-37.05908c-30.65088,-11.146 -49.59814,-27.30713 -49.59814,-53.49902c0,-29.25732 24.2417,-50.9917 60.74365,-50.9917c18.94727,0 33.1582,4.4585 41.23877,9.19531L156.18018,133.35986c-5.85156,-3.62256 -18.39014,-8.9165 -35.38721,-8.9165c-25.63525,0 -35.3877,15.3252 -35.3877,28.14258c0,17.5542 11.42432,26.19238 37.33789,36.22314c31.76514,12.26025 47.64795,27.58545 47.64795,55.1709c0,28.979 -21.17676,54.33496 -65.48096,54.33496c-18.11133,0 -37.89502,-5.57275 -47.92578,-12.26025z');
|
||||
path1.position = view.center;
|
||||
|
||||
var path2 = path1.clone();
|
||||
path1.scale(1.5);
|
||||
path2.scale(2);
|
||||
|
||||
var length1 = path1.length;
|
||||
var length2 = path2.length;
|
||||
function onFrame(event) {
|
||||
var vector = new Point({
|
||||
angle: -event.count % 360,
|
||||
length: 100
|
||||
});
|
||||
path1.rotate(-0.5);
|
||||
path1.position = view.center - vector;
|
||||
|
||||
path2.rotate(-0.5);
|
||||
path2.position = view.center + vector.normalize(50);
|
||||
|
||||
for (var i = 0; i < lineCount; i++) {
|
||||
var path = lineGroup.children[i];
|
||||
var l1 = (length1 / lineCount * (i + event.count / 10)) % length1;
|
||||
var l2 = (length2 / lineCount * (i + event.count / 10)) % length2;
|
||||
path.firstSegment.point = path1.getPointAt(l1),
|
||||
path.lastSegment.point = path2.getPointAt(l2);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" resize></canvas>
|
||||
</body>
|
||||
</html>
|
||||
53
paper.js/assets/paperjs/examples/Animated/Lines.html
Normal file
53
paper.js/assets/paperjs/examples/Animated/Lines.html
Normal file
@ -0,0 +1,53 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Lines</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
var amount = 45;
|
||||
for (var i = 0; i < amount; i++) {
|
||||
var path = new Path({
|
||||
fillColor: {
|
||||
hue: 1,
|
||||
saturation: 1,
|
||||
brightness: Math.random()
|
||||
},
|
||||
closed: true
|
||||
});
|
||||
}
|
||||
|
||||
var position = view.center;
|
||||
var mousePos = view.center;
|
||||
var children = project.activeLayer.children;
|
||||
|
||||
function iterate(count) {
|
||||
var delta = mousePos - position;
|
||||
position += delta / 10;
|
||||
for (var i = 1; i < amount; i++) {
|
||||
var path = children[i];
|
||||
var length = Math.abs(Math.sin(i + count / 40) * 300);
|
||||
path.segments = [
|
||||
position + delta / 1.5,
|
||||
position + { angle: i / amount * 360, length: length },
|
||||
position + { angle: (i + 1) / amount * 360, length: length }
|
||||
];
|
||||
path.fillColor.hue = count - length;
|
||||
}
|
||||
}
|
||||
|
||||
function onFrame(event) {
|
||||
iterate(event.count);
|
||||
}
|
||||
|
||||
function onMouseMove(event) {
|
||||
iterate();
|
||||
mousePos = event.point;
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body style="background:black">
|
||||
<canvas id="canvas" resize></canvas>
|
||||
</body>
|
||||
</html>
|
||||
70
paper.js/assets/paperjs/examples/Animated/Smoothing.html
Normal file
70
paper.js/assets/paperjs/examples/Animated/Smoothing.html
Normal file
@ -0,0 +1,70 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Smoothing</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
var width, height, center;
|
||||
var points = 10;
|
||||
var smooth = true;
|
||||
var path = new Path({
|
||||
fillColor: 'black'
|
||||
});
|
||||
var mousePos = view.center / 2;
|
||||
var pathHeight = mousePos.y;
|
||||
initializePath();
|
||||
|
||||
function initializePath() {
|
||||
center = view.center;
|
||||
width = view.size.width;
|
||||
height = view.size.height / 2;
|
||||
path.segments = [];
|
||||
path.add(view.bounds.bottomLeft);
|
||||
for (var i = 1; i < points; i++) {
|
||||
var point = new Point(width / points * i, center.y);
|
||||
path.add(point);
|
||||
}
|
||||
path.add(view.bounds.bottomRight);
|
||||
path.fullySelected = true;
|
||||
}
|
||||
|
||||
function onFrame(event) {
|
||||
pathHeight += (center.y - mousePos.y - pathHeight) / 10;
|
||||
for (var i = 1; i < points; i++) {
|
||||
var sinSeed = event.count + (i + i % 10) * 100;
|
||||
var sinHeight = Math.sin(sinSeed / 200) * pathHeight;
|
||||
var yPos = Math.sin(sinSeed / 100) * sinHeight + height;
|
||||
path.segments[i].point.y = yPos;
|
||||
}
|
||||
if (smooth)
|
||||
path.smooth({ type: 'continuous' });
|
||||
}
|
||||
|
||||
function onMouseMove(event) {
|
||||
mousePos = event.point;
|
||||
}
|
||||
|
||||
function onMouseDown(event) {
|
||||
smooth = !smooth;
|
||||
if (!smooth) {
|
||||
// If smooth has been turned off, we need to reset
|
||||
// the handles of the path:
|
||||
for (var i = 0, l = path.segments.length; i < l; i++) {
|
||||
var segment = path.segments[i];
|
||||
segment.handleIn = segment.handleOut = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Reposition the path whenever the window is resized:
|
||||
function onResize(event) {
|
||||
initializePath();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" resize></canvas>
|
||||
</body>
|
||||
</html>
|
||||
86
paper.js/assets/paperjs/examples/Animated/Space.html
Normal file
86
paper.js/assets/paperjs/examples/Animated/Space.html
Normal file
@ -0,0 +1,86 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Space</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
// The amount of symbol we want to place;
|
||||
var count = 150;
|
||||
|
||||
// Create a symbol, which we will use to place instances of later:
|
||||
var path = new Path.Circle({
|
||||
center: new Point(0, 0),
|
||||
radius: 5,
|
||||
fillColor: 'white',
|
||||
strokeColor: 'black'
|
||||
});
|
||||
|
||||
var symbol = new SymbolDefinition(path);
|
||||
|
||||
// Place the instances of the symbol:
|
||||
for (var i = 0; i < count; i++) {
|
||||
// The center position is a random point in the view:
|
||||
var center = Point.random() * view.size;
|
||||
var placed = symbol.place(center);
|
||||
var scale = (i + 1) / count;
|
||||
placed.scale(scale);
|
||||
placed.data.vector = new Point({
|
||||
angle: Math.random() * 360,
|
||||
length : scale * Math.random() / 5
|
||||
});
|
||||
}
|
||||
|
||||
var vector = new Point({
|
||||
angle: 45,
|
||||
length: 0
|
||||
});
|
||||
|
||||
var mouseVector = vector.clone();
|
||||
|
||||
function onMouseMove(event) {
|
||||
mouseVector = view.center - event.point;
|
||||
}
|
||||
|
||||
// The onFrame function is called up to 60 times a second:
|
||||
function onFrame(event) {
|
||||
vector = vector + (mouseVector - vector) / 30;
|
||||
|
||||
// Run through the active layer's children list and change
|
||||
// the position of the placed symbols:
|
||||
for (var i = 0; i < count; i++) {
|
||||
var item = project.activeLayer.children[i];
|
||||
var size = item.bounds.size;
|
||||
var length = vector.length / 10 * size.width / 10;
|
||||
item.position += vector.normalize(length) + item.data.vector;
|
||||
keepInView(item);
|
||||
}
|
||||
}
|
||||
|
||||
function keepInView(item) {
|
||||
var position = item.position;
|
||||
var itemBounds = item.bounds;
|
||||
var bounds = view.bounds;
|
||||
if (itemBounds.left > bounds.width) {
|
||||
position.x = -item.bounds.width;
|
||||
}
|
||||
|
||||
if (position.x < -itemBounds.width) {
|
||||
position.x = bounds.width + itemBounds.width;
|
||||
}
|
||||
|
||||
if (itemBounds.top > view.size.height) {
|
||||
position.y = -itemBounds.height;
|
||||
}
|
||||
|
||||
if (position.y < -itemBounds.height) {
|
||||
position.y = bounds.height + itemBounds.height / 2;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" resize hidpi="off" style="background:black"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,79 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Space</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
// The amount of symbol we want to place;
|
||||
var count = 150;
|
||||
|
||||
project.currentStyle = {
|
||||
fillColor: 'white'
|
||||
};
|
||||
|
||||
// Place the instances of the symbol:
|
||||
for (var i = 0; i < count; i++) {
|
||||
// The center position is a random point in the view:
|
||||
var center = Point.random() * view.size;
|
||||
var scale = (i + 1) / count;
|
||||
var path = new Shape.Circle(center, 5 * scale);
|
||||
path.data.vector = new Point({
|
||||
angle: Math.random() * 360,
|
||||
length : scale * Math.random() / 5
|
||||
});
|
||||
}
|
||||
|
||||
var vector = new Point({
|
||||
angle: 45,
|
||||
length: 0
|
||||
});
|
||||
|
||||
var mouseVector = vector.clone();
|
||||
|
||||
function onMouseMove(event) {
|
||||
mouseVector = view.center - event.point;
|
||||
}
|
||||
|
||||
// The onFrame function is called up to 60 times a second:
|
||||
function onFrame(event) {
|
||||
vector = vector + (mouseVector - vector) / 30;
|
||||
|
||||
// Run through the active layer's children list and change
|
||||
// the position of the placed symbols:
|
||||
for (var i = 0; i < count; i++) {
|
||||
var item = project.activeLayer.children[i];
|
||||
var size = item.bounds.size;
|
||||
var length = vector.length / 10 * size.width / 10;
|
||||
item.position += vector.normalize(length) + item.data.vector;
|
||||
keepInView(item);
|
||||
}
|
||||
}
|
||||
|
||||
function keepInView(item) {
|
||||
var position = item.position;
|
||||
var itemBounds = item.bounds;
|
||||
var bounds = view.bounds;
|
||||
if (itemBounds.left > bounds.width) {
|
||||
position.x = -item.bounds.width;
|
||||
}
|
||||
|
||||
if (position.x < -itemBounds.width) {
|
||||
position.x = bounds.width + itemBounds.width;
|
||||
}
|
||||
|
||||
if (itemBounds.top > view.size.height) {
|
||||
position.y = -itemBounds.height;
|
||||
}
|
||||
|
||||
if (position.y < -itemBounds.height) {
|
||||
position.y = bounds.height + itemBounds.height / 2;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" resize hidpi="off" style="background:black"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
569
paper.js/assets/paperjs/examples/Games/Paperoids.html
Normal file
569
paper.js/assets/paperjs/examples/Games/Paperoids.html
Normal file
@ -0,0 +1,569 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
<title>Paperoids</title>
|
||||
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
|
||||
//
|
||||
//
|
||||
// Paperoids - an Asteroids clone for paper.js
|
||||
//
|
||||
// Sorry nerds, no enemy ships or sound just yet.
|
||||
//
|
||||
// Version: 1.2.1
|
||||
// Author: David Hirmes (@hirmes)
|
||||
// Date: 2011-08-09
|
||||
//
|
||||
// Revision History:
|
||||
// 1.0 - 2011-07-13 - Initial release
|
||||
// 1.1 - 2011-07-13 - Optimizations by Jonathan Puckey (@jonathanpuckey)
|
||||
// 1.2 - 2011-07-16 - Refactored with closures (@jonathanpuckey)
|
||||
// 1.2.1- 2011-08-09 - bug fixes
|
||||
//
|
||||
|
||||
var presets = {
|
||||
speed: 0.2,
|
||||
maxRockSpeed: 4.5,
|
||||
rockCount: 6,
|
||||
lives: 3,
|
||||
freeShipScore: 10000,
|
||||
freeShipIncrement: 10000
|
||||
};
|
||||
|
||||
function initialize() {
|
||||
Rocks.add(presets.rockCount);
|
||||
Score.update();
|
||||
Lives.initialize();
|
||||
}
|
||||
|
||||
function onKeyUp(event) {
|
||||
if (event.key == 'space') {
|
||||
Ship.moveTo(Point.random() * view.size);
|
||||
Ship.stop();
|
||||
}
|
||||
if (event.key == 'z') {
|
||||
Ship.fire();
|
||||
}
|
||||
// Show stats:
|
||||
if (event.key == 'f') {
|
||||
var stats = document.getElementById('stats');
|
||||
if (stats) {
|
||||
stats.style.display = (stats.style.display == 'block')
|
||||
? 'none' : 'block';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onFrame() {
|
||||
Bullets.move();
|
||||
Rocks.iterateExplosions();
|
||||
Ship.checkCollisions();
|
||||
if (Key.isDown('left')) {
|
||||
Ship.turnLeft();
|
||||
}
|
||||
if (Key.isDown('right')) {
|
||||
Ship.turnRight();
|
||||
}
|
||||
if (Key.isDown('up')) {
|
||||
Ship.thrust();
|
||||
} else {
|
||||
Ship.coast();
|
||||
}
|
||||
Ship.move();
|
||||
}
|
||||
|
||||
project.currentStyle.strokeColor = 'white';
|
||||
|
||||
var Game = {
|
||||
roundDelay: false,
|
||||
over: function() {
|
||||
document.getElementById('gameover').style.display = 'block';
|
||||
},
|
||||
newRound: function() {
|
||||
Game.roundDelay = false;
|
||||
Rocks.add(presets.rockCount);
|
||||
},
|
||||
// Stats.js by Mr. Doob - https://github.com/mrdoob/stats.js
|
||||
};
|
||||
|
||||
var assets = {
|
||||
destroyedShip: new function() {
|
||||
var group = new Group(
|
||||
new Path([-10, -8], [10, 0]),
|
||||
new Path([10, 0], [-10, 8]),
|
||||
new Path([-8, 4], [-8, -4])
|
||||
);
|
||||
group.visible = false;
|
||||
return group;
|
||||
},
|
||||
explosion: new function() {
|
||||
var explosionPath = new Path.Circle(new Point(), 1);
|
||||
explosionPath.fillColor = 'white';
|
||||
explosionPath.strokeColor = null;
|
||||
return new SymbolDefinition(explosionPath);
|
||||
}
|
||||
};
|
||||
|
||||
var Ship = new function() {
|
||||
var path = new Path([-10, -8], [10, 0], [-10, 8], [-8, 4], [-8, -4]);
|
||||
path.closed = true;
|
||||
var thrust = new Path([-8, -4], [-14, 0], [-8, 4]);
|
||||
var group = new Group(path, thrust);
|
||||
group.position = view.bounds.center;
|
||||
return {
|
||||
item: group,
|
||||
|
||||
angle: 0,
|
||||
|
||||
vector: new Point({
|
||||
angle: 0.2,
|
||||
length: 1
|
||||
}),
|
||||
|
||||
turnLeft: function() {
|
||||
group.rotate(-3);
|
||||
this.angle -= 3;
|
||||
},
|
||||
|
||||
turnRight: function() {
|
||||
group.rotate(3);
|
||||
this.angle += 3;
|
||||
},
|
||||
|
||||
thrust: function() {
|
||||
thrust.visible = true;
|
||||
this.vector += new Point({
|
||||
angle: this.angle,
|
||||
length: presets.speed
|
||||
});
|
||||
if (this.vector.length > 8) {
|
||||
this.vector.length = 8;
|
||||
}
|
||||
},
|
||||
|
||||
stop: function() {
|
||||
this.vector.length = 0;
|
||||
},
|
||||
|
||||
fire: function() {
|
||||
if (!this.dying)
|
||||
Bullets.fire(this.item.position, this.angle);
|
||||
},
|
||||
|
||||
coast: function() {
|
||||
thrust.visible = false;
|
||||
this.vector *= .992;
|
||||
},
|
||||
|
||||
move: function() {
|
||||
group.position += this.vector;
|
||||
keepInView(group);
|
||||
},
|
||||
|
||||
moveTo: function(position) {
|
||||
group.position = position;
|
||||
keepInView(group);
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
this.destroyedShip = assets.destroyedShip.clone();
|
||||
this.destroyedShip.position = this.item.position;
|
||||
this.destroyedShip.visible = true;
|
||||
this.item.visible = false;
|
||||
this.stop();
|
||||
this.item.position = view.center;
|
||||
this.dying = true;
|
||||
},
|
||||
|
||||
destroyed: function() {
|
||||
this.item.visible = true;
|
||||
this.stop();
|
||||
this.item.position = view.center;
|
||||
this.dying = false;
|
||||
this.destroyedShip.visible = false;
|
||||
},
|
||||
|
||||
checkCollisions: function() {
|
||||
var crashRock;
|
||||
|
||||
// move rocks and do a hit-test
|
||||
// between bounding rect of rocks and ship
|
||||
for (var i = 0; i < Rocks.children.length; i++) {
|
||||
var rock = Rocks.children[i];
|
||||
rock.position += rock.vector;
|
||||
if (rock.bounds.intersects(this.item.bounds))
|
||||
crashRock = rock;
|
||||
keepInView(rock);
|
||||
}
|
||||
|
||||
if (this.dying) {
|
||||
var children = this.destroyedShip.children;
|
||||
children[0].position.x++;
|
||||
children[1].position.x--;
|
||||
children[2].position.x--;
|
||||
children[2].position.y++;
|
||||
children[0].rotate(1);
|
||||
children[1].rotate(-1);
|
||||
children[2].rotate(1);
|
||||
this.destroyedShip.opacity *= 0.98;
|
||||
|
||||
// don't update anything else if the ship is already dead.
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
// if bounding rect collision, do a line intersection test
|
||||
if (crashRock) {
|
||||
var tempRock = crashRock.symbol.definition.clone();
|
||||
tempRock.transform(crashRock.matrix);
|
||||
tempRock.remove();
|
||||
var intersections = this.item.firstChild.getIntersections(tempRock);
|
||||
if (intersections.length > 0)
|
||||
Lives.remove();
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
var Bullets = new function() {
|
||||
var group = new Group();
|
||||
var children = group.children;
|
||||
|
||||
function checkHits(bullet) {
|
||||
for (var r = 0; r < Rocks.children.length; r++) {
|
||||
var rock = Rocks.children[r];
|
||||
if (rock.bounds.contains(bullet.position) ) {
|
||||
Score.update(rock.shapeType);
|
||||
Rocks.explode(rock);
|
||||
if (rock.shapeType < Rocks.TYPE_SMALL ) {
|
||||
for (var j = 0; j < 2; j++) {
|
||||
Rocks.add(1, rock.shapeType + 4, rock.position);
|
||||
}
|
||||
}
|
||||
rock.remove();
|
||||
bullet.remove();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
fire: function(position, angle) {
|
||||
// We can only fire 5 bullets at a time:
|
||||
if (children.length == 5)
|
||||
return;
|
||||
var vector = new Point({
|
||||
angle: angle,
|
||||
length: 10
|
||||
});
|
||||
var bullet = new Path.Circle({
|
||||
center: position + vector,
|
||||
radius: 0.5,
|
||||
parent: group,
|
||||
fillColor: 'white',
|
||||
strokeWidth: 'white',
|
||||
strokeWidth: 0,
|
||||
data: {
|
||||
vector: vector,
|
||||
timeToDie: 58
|
||||
}
|
||||
});
|
||||
},
|
||||
move: function() {
|
||||
for (var i = 0; i < children.length; i++) {
|
||||
var bullet = children[i];
|
||||
bullet.data.timeToDie--;
|
||||
if (bullet.data.timeToDie < 1) {
|
||||
bullet.remove();
|
||||
} else {
|
||||
bullet.position += bullet.data.vector;
|
||||
checkHits(bullet);
|
||||
keepInView(bullet);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
var Rocks = new function() {
|
||||
var group = new Group();
|
||||
var shapes = [
|
||||
new Path(
|
||||
[-23, -40.5], [0, -30.5], [24, -40.5], [45, -21.5], [25, -12.5],
|
||||
[46, 9.5], [22, 38.5], [-10, 30.5], [-22, 40.5], [-46, 18.5],
|
||||
[-33, 0.5], [-44, -21.5], [-23, -40.5]),
|
||||
new Path(
|
||||
[-45, -9.5], [-12, -40.5], [24, -40.5], [46, -11.5], [45, 10.5],
|
||||
[24, 40.5], [0, 40.5], [0, 10.5], [-23, 38.5], [-46, 9.5], [-25, 0.5],
|
||||
[-45, -9.5]),
|
||||
new Path([-21.5, -39.5], [11.5, -39.5], [45.5, -20.5],
|
||||
[45.5, -8.5], [9.5, 0.5], [44.5, 21.5], [22.5, 39.5], [9.5, 31.5],
|
||||
[-20.5, 39.5], [-45.5, 10.5], [-45.5, -20.5], [-11.5, -21.5],
|
||||
[-21.5, -39.5]),
|
||||
new Path(
|
||||
[-22.5, -40.5], [-0.5, -19.5], [23.5, -39.5], [44.5, -21.5],
|
||||
[33.5, 0.5], [46.5, 19.5], [13.5, 40.5], [-22.5, 39.5], [-46.5, 18.5],
|
||||
[-46.5, -18.5], [-22.5, -40.5])
|
||||
];
|
||||
|
||||
// medium rocks
|
||||
for (var i = 4; i < 8; i++) {
|
||||
shapes[i] = shapes[i - 4].clone();
|
||||
shapes[i].scale(0.5);
|
||||
}
|
||||
|
||||
// small rocks
|
||||
for (var i = 8; i < 12; i++) {
|
||||
shapes[i] = shapes[i - 4].clone();
|
||||
shapes[i].scale(0.4);
|
||||
}
|
||||
|
||||
var rockSymbols = [];
|
||||
for (var i = 0; i < shapes.length; i++) {
|
||||
rockSymbols[i] = new SymbolDefinition(shapes[i]);
|
||||
}
|
||||
|
||||
var explosions = new Group();
|
||||
|
||||
return {
|
||||
shapes: shapes,
|
||||
children: group.children,
|
||||
make: function(type, pos) {
|
||||
var randomRock = type + Math.floor(4 * Math.random());
|
||||
var rock = rockSymbols[randomRock].place();
|
||||
rock.position = pos ? pos : Point.random() * view.size;
|
||||
rock.vector = new Point({
|
||||
angle: 360 * Math.random(),
|
||||
length: presets.maxRockSpeed * Math.random() + 0.1
|
||||
});
|
||||
rock.shapeType = type;
|
||||
return rock;
|
||||
},
|
||||
add: function(amount, type, position) {
|
||||
for (var i = 0; i < amount; i++) {
|
||||
var rock = this.make(type || this.TYPE_BIG, position);
|
||||
group.addChild(rock);
|
||||
}
|
||||
},
|
||||
explode: function(rock) {
|
||||
var boomRock = rock.symbol.definition.clone();
|
||||
boomRock.position = rock.position;
|
||||
for (var i = 0; i < boomRock.segments.length; i++) {
|
||||
var segmentPoint = boomRock.segments[i].point;
|
||||
var placed = assets.explosion.place(segmentPoint);
|
||||
placed.vector = (placed.position - rock.position) * 0.1;
|
||||
explosions.addChild(placed);
|
||||
}
|
||||
boomRock.remove();
|
||||
},
|
||||
iterateExplosions: function() {
|
||||
for (var i = 0; i < explosions.children.length; i++) {
|
||||
var explosion = explosions.children[i];
|
||||
explosion.vector.length *= .7;
|
||||
explosion.position += explosion.vector;
|
||||
explosion.opacity = explosion.vector.length;
|
||||
if (explosion.vector.length < 0.05 ) {
|
||||
explosion.remove();
|
||||
// if no more rocks, wait a second and start a new round
|
||||
if (this.children.length < 1 && !Game.roundDelay) {
|
||||
Game.roundDelay = true;
|
||||
presets.rockCount += 2;
|
||||
setTimeout(Game.newRound, 1000);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
TYPE_BIG: 0,
|
||||
TYPE_MEDIUM: 4,
|
||||
TYPE_SMALL: 8
|
||||
};
|
||||
};
|
||||
|
||||
var Score = new function() {
|
||||
var numberGroup = new Group(
|
||||
new Path([0, 0], [20, 0], [20, 27], [0, 27], [0, 0]),
|
||||
new Path([10, 0], [10, 27]),
|
||||
new Path([0, 0], [20, 0], [20, 14], [0, 14], [0, 27], [20, 27]),
|
||||
new Path([0, 0], [20, 0], [20, 14], [0, 14], [20, 14], [20, 27], [0, 27]),
|
||||
new Path([0, 0], [0, 14], [20, 14], [20, 0], [20, 27]),
|
||||
new Path([20, 0], [0, 0], [0, 14], [20, 14], [20, 27], [0, 27]),
|
||||
new Path([20, 0], [0, 0], [0, 27], [20, 27], [20, 14], [0, 14]),
|
||||
new Path([0, 0], [20, 0], [0, 27]),
|
||||
new Path([0, 0], [20, 0], [20, 27], [0, 27], [0, 0], [0, 14], [20, 14]),
|
||||
new Path([20, 14], [0, 14], [0, 0], [20, 0], [20, 27])
|
||||
);
|
||||
numberGroup.visible = false;
|
||||
var scoreDisplay = new Group();
|
||||
var score = 0;
|
||||
return {
|
||||
update: function(type) {
|
||||
if (type == Rocks.TYPE_BIG) score += 20;
|
||||
if (type == Rocks.TYPE_MEDIUM) score += 50;
|
||||
if (type == Rocks.TYPE_SMALL) score += 100;
|
||||
if (score >= presets.freeShipScore) {
|
||||
Lives.add(1);
|
||||
presets.freeShipScore += presets.freeShipIncrement;
|
||||
}
|
||||
scoreDisplay.removeChildren();
|
||||
|
||||
var scoreString = score + '';
|
||||
for (var i = 0; i < scoreString.length; i++) {
|
||||
var n = parseInt(scoreString[i], 10);
|
||||
scoreDisplay.addChild(numberGroup.children[n].clone());
|
||||
scoreDisplay.lastChild.position = [22 + i * 24, 22];
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
var Lives = new function() {
|
||||
var currentLives;
|
||||
var shipPath = Ship.item.firstChild.clone();
|
||||
project.activeLayer.addChild(shipPath);
|
||||
shipPath.visible = false;
|
||||
Ship.visible = false;
|
||||
var group = new Group();
|
||||
return {
|
||||
initialize: function() {
|
||||
currentLives = presets.lives;
|
||||
this.display();
|
||||
},
|
||||
add: function() {
|
||||
currentLives++;
|
||||
this.display();
|
||||
},
|
||||
remove: function() {
|
||||
currentLives--;
|
||||
this.display();
|
||||
Ship.destroy();
|
||||
setTimeout(function() {
|
||||
if (currentLives == 0) {
|
||||
Game.over();
|
||||
} else {
|
||||
Ship.destroyed();
|
||||
}
|
||||
}, 1200);
|
||||
},
|
||||
display: function() {
|
||||
group.removeChildren();
|
||||
for (var i = 0;i < currentLives - 1; i++) {
|
||||
var copy = shipPath.clone();
|
||||
copy.rotate(-90);
|
||||
copy.visible = true;
|
||||
group.addChild(copy);
|
||||
copy.position = [22+ i * copy.bounds.width, 53];
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
initialize();
|
||||
|
||||
// Stop left and right keyboard events from propagating.
|
||||
function onKeyDown(event) {
|
||||
if (event.key == 'left' || event.key == 'right') {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function keepInView(item) {
|
||||
var position = item.position;
|
||||
var itemBounds = item.bounds;
|
||||
var bounds = view.bounds;
|
||||
|
||||
if (itemBounds.left > bounds.width) {
|
||||
position.x = -item.bounds.width;
|
||||
}
|
||||
|
||||
if (position.x < -itemBounds.width) {
|
||||
position.x = bounds.width;
|
||||
}
|
||||
|
||||
if (itemBounds.top > view.size.height) {
|
||||
position.y = -itemBounds.height;
|
||||
}
|
||||
|
||||
if (position.y < -itemBounds.height) {
|
||||
position.y = bounds.height + itemBounds.height / 2;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style type="text/css">
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #000;
|
||||
font-family:Helvetica,Arial;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position:absolute;
|
||||
bottom:0;
|
||||
color:#ff0000;
|
||||
background-color: rgba(60,60,60,0.8);
|
||||
font-size:0.75em;
|
||||
padding:0.5em;
|
||||
color:#ddd;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.footer a {
|
||||
color: #fff;
|
||||
font-weight:
|
||||
bold; text-decoration: none;
|
||||
border-bottom: 1px solid #555;
|
||||
}
|
||||
|
||||
.footer b {
|
||||
background-color: #660000;
|
||||
padding-left: 0.25em;
|
||||
padding-right: 0.25em;
|
||||
}
|
||||
|
||||
.gameover {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 40%;
|
||||
top: 40%;
|
||||
color: #fff;
|
||||
background-color: rgba(60,60,60,0.8);
|
||||
padding: 32px;
|
||||
-moz-border-radius: 12px;
|
||||
-webkit-border-radius: 12px;
|
||||
border-radius: 12px;
|
||||
-moz-background-clip: padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.gameover a {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#stats {
|
||||
position: absolute;
|
||||
left: auto !important;
|
||||
right: 0px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" resize stats></canvas>
|
||||
<div id="footer" class="footer"><a href=#">Paperoids</a>. To Play: <b>←</b> and <b>→</b> to rotate. <b>↑</b> for thrust. <b>Z</b> to fire. <b>F</b> to show FPS. Follow @<a href="http://twitter.com/#/hirmes">hirmes</a> for updates. Made with the amazing <a href="http://paperjs.org">Paper.js</a></div>
|
||||
|
||||
<div id="gameover" class="gameover">Game Over. <a href="Paperoids.html">Play again</a>?</div>
|
||||
</body>
|
||||
</html>
|
||||
34
paper.js/assets/paperjs/examples/JSON/Circle Testing.html
Normal file
34
paper.js/assets/paperjs/examples/JSON/Circle Testing.html
Normal file
@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Circle Testing</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas1">
|
||||
var topLeft = new Point(200, 200);
|
||||
var size = new Size(150, 100);
|
||||
var rectangle = new Rectangle(topLeft, size);
|
||||
var path = new Path.Ellipse(rectangle);
|
||||
path.fillColor = 'black';
|
||||
|
||||
var topLeft = new Point(5, 400);
|
||||
var size = new Size(100, 50);
|
||||
var rectangle = new Rectangle(topLeft, size);
|
||||
var path = new Path.Ellipse(rectangle);
|
||||
path.fillColor = 'yellow';
|
||||
|
||||
var path = new Path.Circle(new Point(50, 50), 25);
|
||||
path.fillColor = 'red';
|
||||
window._json = project.exportJSON();
|
||||
console.log(window._json);
|
||||
</script>
|
||||
<script type="text/paperscript" canvas="canvas2">
|
||||
project.importJSON(window._json);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas1" width="500" height="500"></canvas>
|
||||
<canvas id="canvas2" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
25
paper.js/assets/paperjs/examples/JSON/Compound Path.html
Normal file
25
paper.js/assets/paperjs/examples/JSON/Compound Path.html
Normal file
@ -0,0 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Compound Path</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas1">
|
||||
project.currentStyle.fillColor = 'black';
|
||||
var path1 = new Path.Rectangle([200, 200], [100, 100]);
|
||||
var path2 = new Path.Rectangle([50, 50], [200, 200]);
|
||||
var path3 = new Path.Rectangle([0, 0], [400, 400]);
|
||||
new CompoundPath(path1, path2, path3);
|
||||
window._json = project.exportJSON();
|
||||
console.log(window._json);
|
||||
</script>
|
||||
<script type="text/paperscript" canvas="canvas2">
|
||||
project.importJSON(window._json);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas1" width="500" height="500"></canvas>
|
||||
<canvas id="canvas2" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Empty Path Testing</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas1">
|
||||
var path = new Path();
|
||||
path.strokeColor = 'black';
|
||||
path.add(new Point(30, 30));
|
||||
path.add(new Point(100, 100));
|
||||
|
||||
var segments = [new Point(30, 90), new Point(100, 150)];
|
||||
var path2 = new Path(segments);
|
||||
path2.strokeColor = 'yellow';
|
||||
|
||||
var path3 = new Path();
|
||||
|
||||
window._json = project.exportJSON();
|
||||
console.log(window._json);
|
||||
</script>
|
||||
<script type="text/paperscript" canvas="canvas2">
|
||||
project.importJSON(window._json);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas1" width="500" height="500"></canvas>
|
||||
<canvas id="canvas2" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
34
paper.js/assets/paperjs/examples/JSON/Gradients.html
Normal file
34
paper.js/assets/paperjs/examples/JSON/Gradients.html
Normal file
@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Gradients</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas1">
|
||||
var path = new Path.Circle({
|
||||
center: view.center,
|
||||
radius: view.bounds.height * 0.4
|
||||
});
|
||||
path.fillColor = {
|
||||
stops: ['yellow', 'red', 'black'],
|
||||
radial: true,
|
||||
origin: path.position,
|
||||
destination: path.bounds.rightCenter
|
||||
}
|
||||
|
||||
var symbol = new SymbolDefinition(path);
|
||||
symbol.place(view.center);
|
||||
|
||||
window._json = project.exportJSON();
|
||||
console.log(window._json);
|
||||
</script>
|
||||
<script type="text/paperscript" canvas="canvas2">
|
||||
project.importJSON(window._json);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas1" width="500" height="500"></canvas>
|
||||
<canvas id="canvas2" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
28
paper.js/assets/paperjs/examples/JSON/Group Transform.html
Normal file
28
paper.js/assets/paperjs/examples/JSON/Group Transform.html
Normal file
@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Group Transform</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas1">
|
||||
var circle1 = new Path.Circle(new Point(100, 100), 50);
|
||||
circle1.fillColor = 'red';
|
||||
var circle2 = new Path.Circle(new Point(200, 100), 50);
|
||||
circle2.fillColor = 'blue';
|
||||
var group = new Group(circle1, circle2);
|
||||
group.translate([100, 100]);
|
||||
group.scale(0.5);
|
||||
group.rotate(10);
|
||||
window._json = project.exportJSON();
|
||||
console.log(window._json);
|
||||
</script>
|
||||
<script type="text/paperscript" canvas="canvas2">
|
||||
project.importJSON(window._json);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas1" width="500" height="500"></canvas>
|
||||
<canvas id="canvas2" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
44
paper.js/assets/paperjs/examples/JSON/Line Testing.html
Normal file
44
paper.js/assets/paperjs/examples/JSON/Line Testing.html
Normal file
@ -0,0 +1,44 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Line Testing</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas1">
|
||||
var x1 = 5,
|
||||
x2 = 45,
|
||||
y1 = 5,
|
||||
y2 = 45;
|
||||
var line1 = new Path.Line([x1, y1], [x2, y2]);
|
||||
line1.strokeColor = "blue";
|
||||
line1.strokeWidth = "10";
|
||||
|
||||
var x3 = 20,
|
||||
x4 = 99,
|
||||
y3 = 20,
|
||||
y4 = 77;
|
||||
var line2 = new Path.Line([x3, y3], [x4, y4]);
|
||||
line2.strokeColor = "red";
|
||||
line2.strokeWidth = "2";
|
||||
|
||||
var x5 = 50,
|
||||
x6 = 200,
|
||||
y5 = 55,
|
||||
y6 = 300;
|
||||
var line3 = new Path.Line([x5, y5], [x6, y6]);
|
||||
line3.strokeColor = "yellow";
|
||||
line3.strokeWidth = "5";
|
||||
|
||||
window._json = project.exportJSON();
|
||||
console.log(window._json);
|
||||
</script>
|
||||
<script type="text/paperscript" canvas="canvas2">
|
||||
project.importJSON(window._json);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas1" width="500" height="500"></canvas>
|
||||
<canvas id="canvas2" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Random Path Testing</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas1">
|
||||
var center = new Point(100, 100);
|
||||
var sides = 3;
|
||||
var radius = 50;
|
||||
var triangle = new Path.RegularPolygon(center, sides, radius);
|
||||
triangle.fillColor = 'black';
|
||||
copy = triangle.clone();
|
||||
copy.strokeColor = 'blue';
|
||||
copy.rotate(45);
|
||||
|
||||
var center = new Point(100, 300);
|
||||
var sides = 10;
|
||||
var radius = 50;
|
||||
var decahedron = new Path.RegularPolygon(center, sides, radius);
|
||||
decahedron.fillColor = 'black';
|
||||
|
||||
var center = new Point(100, 400);
|
||||
var points = 6;
|
||||
var radius1 = 20;
|
||||
var radius2 = 50;
|
||||
var path = new Path.Star(center, points, radius1, radius2);
|
||||
path.fillColor = 'black';
|
||||
|
||||
window._json = project.exportJSON();
|
||||
console.log(window._json);
|
||||
</script>
|
||||
<script type="text/paperscript" canvas="canvas2">
|
||||
project.importJSON(window._json);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas1" width="500" height="500"></canvas>
|
||||
<canvas id="canvas2" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
29
paper.js/assets/paperjs/examples/JSON/Raster.html
Normal file
29
paper.js/assets/paperjs/examples/JSON/Raster.html
Normal file
File diff suppressed because one or more lines are too long
@ -0,0 +1,56 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Rectangle Testing</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas1">
|
||||
var point1 = new Point(10, 10);
|
||||
var size1 = new Size(50, 50);
|
||||
var rectangle1 = new Rectangle(point1, size1);
|
||||
var path1 = new Path.Rectangle(rectangle1);
|
||||
path1.strokeColor = 'black';
|
||||
path1.fillColor = 'red';
|
||||
path1.id = "square1";
|
||||
path1.strokeCap = "square";
|
||||
path1.opacity = ".1";
|
||||
path1.dashArray = [5, 2];
|
||||
path1.dashOffset = "0";
|
||||
|
||||
var point2 = new Point(75, 75);
|
||||
var point22 = new Point(100, 100);
|
||||
var path2 = new Path.Rectangle(point2, point22);
|
||||
path2.strokeColor = 'red';
|
||||
path2.strokeWidth = '4';
|
||||
path2.fillColor = 'blue';
|
||||
path2.id = "square2";
|
||||
path2.strokeCap = "butt";
|
||||
path2.opacity = "1";
|
||||
|
||||
var point3 = new Point(150, 150);
|
||||
var size3 = new Size(50, 50);
|
||||
var rectangle3 = new Rectangle(point3, size3);
|
||||
var path3 = new Path.Rectangle(rectangle3);
|
||||
path3.strokeColor = 'blue';
|
||||
|
||||
var point4 = new Point(200, 200);
|
||||
var size4 = new Size(100, 100);
|
||||
var rectangle4 = new Rectangle(point4, size4);
|
||||
var cornerSize4 = new Size(30, 30);
|
||||
var path4 = new Path.Rectangle(rectangle4, cornerSize4);
|
||||
path4.strokeColor= 'yellow';
|
||||
path4.fillColor='purple';
|
||||
|
||||
window._json = project.exportJSON();
|
||||
console.log(window._json);
|
||||
</script>
|
||||
<script type="text/paperscript" canvas="canvas2">
|
||||
project.importJSON(window._json);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas1" width="500" height="500"></canvas>
|
||||
<canvas id="canvas2" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,55 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Rotated Primitives</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas1">
|
||||
// This "arbitrary" shape triggered rectangles in the original code,
|
||||
// since point2 is as far from point0 as point3 is from point1.
|
||||
var path = new Path({
|
||||
closed: true,
|
||||
strokeColor: 'black'
|
||||
});
|
||||
path.moveTo(0, 0);
|
||||
path.lineTo(50, 50);
|
||||
path.lineTo(100, 100);
|
||||
path.lineTo(-50, 150);
|
||||
path.position += 100;
|
||||
|
||||
var rect = new Path.Rectangle({
|
||||
point: [200, 100],
|
||||
size: [200, 300],
|
||||
fillColor: 'red'
|
||||
});
|
||||
rect.rotate(40);
|
||||
|
||||
var circle = new Path.Circle({
|
||||
center: [200, 300],
|
||||
radius: 100,
|
||||
fillColor: 'green'
|
||||
});
|
||||
circle.scale(0.5, 1);
|
||||
circle.rotate(40);
|
||||
|
||||
var rect = new Path.Rectangle({
|
||||
point: [250, 20],
|
||||
size: [200, 300],
|
||||
radius: [40, 20],
|
||||
fillColor: 'yellow'
|
||||
});
|
||||
rect.rotate(-20);
|
||||
|
||||
window._json = project.exportJSON();
|
||||
console.log(window._json);
|
||||
</script>
|
||||
<script type="text/paperscript" canvas="canvas2">
|
||||
project.importJSON(window._json);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas1" width="500" height="500"></canvas>
|
||||
<canvas id="canvas2" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
43
paper.js/assets/paperjs/examples/JSON/Selection.html
Normal file
43
paper.js/assets/paperjs/examples/JSON/Selection.html
Normal file
@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Symbols</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas1">
|
||||
var path = new Path.Ellipse({
|
||||
from: [10, 10],
|
||||
to: [200, 100],
|
||||
fillColor: 'red'
|
||||
});
|
||||
path.firstSegment.handleOut.selected = true;
|
||||
|
||||
var circle = new Path.Circle({
|
||||
center: [50, 150],
|
||||
radius: 25,
|
||||
fillColor: 'blue'
|
||||
});
|
||||
circle.selected = true;
|
||||
|
||||
var rectangle = new Path.Rectangle({
|
||||
from: [25, 200],
|
||||
to: [100, 225],
|
||||
fillColor: 'green'
|
||||
});
|
||||
rectangle.lastSegment.point.selected = true;
|
||||
|
||||
var group = new Group(circle, rectangle);
|
||||
|
||||
window._json = project.exportJSON();
|
||||
console.log(window._json);
|
||||
</script>
|
||||
<script type="text/paperscript" canvas="canvas2">
|
||||
project.importJSON(window._json);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas1" width="500" height="500"></canvas>
|
||||
<canvas id="canvas2" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
54
paper.js/assets/paperjs/examples/JSON/Shapes.html
Normal file
54
paper.js/assets/paperjs/examples/JSON/Shapes.html
Normal file
@ -0,0 +1,54 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Symbols</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas1">
|
||||
var circle = new Shape.Circle({
|
||||
center: [100, 100],
|
||||
radius: 50,
|
||||
fillColor: 'red'
|
||||
});
|
||||
|
||||
var ellipse = new Shape.Ellipse({
|
||||
center: [100, 200],
|
||||
radius: [50, 25],
|
||||
fillColor: 'blue',
|
||||
strokeColor: 'black',
|
||||
strokeWidth: 4,
|
||||
rotation: 20
|
||||
});
|
||||
|
||||
var rect = new Shape.Rectangle({
|
||||
center: [100, 300],
|
||||
size: [100, 50],
|
||||
fillColor: 'green',
|
||||
strokeColor: 'black',
|
||||
strokeWidth: 4,
|
||||
rotation: -20
|
||||
});
|
||||
|
||||
var roundRect = new Shape.Rectangle({
|
||||
center: [100, 400],
|
||||
size: [50, 100],
|
||||
radius: [15, 20],
|
||||
fillColor: 'orange',
|
||||
strokeColor: 'black',
|
||||
strokeWidth: 4,
|
||||
rotation: 20
|
||||
});
|
||||
|
||||
window._json = project.exportJSON();
|
||||
console.log(window._json);
|
||||
</script>
|
||||
<script type="text/paperscript" canvas="canvas2">
|
||||
project.importJSON(window._json);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas1" width="500" height="500"></canvas>
|
||||
<canvas id="canvas2" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
30
paper.js/assets/paperjs/examples/JSON/Symbols.html
Normal file
30
paper.js/assets/paperjs/examples/JSON/Symbols.html
Normal file
@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Symbols</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas1">
|
||||
var ellipse = new Path.Ellipse({
|
||||
from: [0, 0],
|
||||
to: [200, 100],
|
||||
fillColor: 'red'
|
||||
});
|
||||
var symbol = new SymbolDefinition(ellipse);
|
||||
var p1 = symbol.place([100, 100]);
|
||||
p1.rotate(45);
|
||||
var p2 = symbol.place([300, 200]);
|
||||
p2.rotate(-30);
|
||||
window._json = project.exportJSON();
|
||||
console.log(window._json);
|
||||
</script>
|
||||
<script type="text/paperscript" canvas="canvas2">
|
||||
project.importJSON(window._json);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas1" width="500" height="500"></canvas>
|
||||
<canvas id="canvas2" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
38
paper.js/assets/paperjs/examples/JSON/Text Testing.html
Normal file
38
paper.js/assets/paperjs/examples/JSON/Text Testing.html
Normal file
@ -0,0 +1,38 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Text Testing</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas1">
|
||||
var text = new PointText(new Point(50, 100));
|
||||
text.fillColor = 'black';
|
||||
text.content = 'This is a test';
|
||||
|
||||
var text = new PointText(new Point(100, 150));
|
||||
text.fillColor = 'red';
|
||||
text.strokeWidth = '4';
|
||||
text.content = 'This is also a test';
|
||||
/*
|
||||
text.scale(5);
|
||||
text.translate(15, 15);
|
||||
text.rotate(20);
|
||||
text.shear(20, 5);
|
||||
*/
|
||||
text.rotate(45);
|
||||
text.shear(.85, .15);
|
||||
text.scale(.85, 2);
|
||||
|
||||
window._json = project.exportJSON();
|
||||
console.log(window._json);
|
||||
</script>
|
||||
<script type="text/paperscript" canvas="canvas2">
|
||||
project.importJSON(window._json);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas1" width="500" height="500"></canvas>
|
||||
<canvas id="canvas2" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
19
paper.js/assets/paperjs/examples/JSON/Tiger.html
Normal file
19
paper.js/assets/paperjs/examples/JSON/Tiger.html
Normal file
File diff suppressed because one or more lines are too long
32
paper.js/assets/paperjs/examples/JSON/Transform Test 1.html
Normal file
32
paper.js/assets/paperjs/examples/JSON/Transform Test 1.html
Normal file
@ -0,0 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Transform Testing</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas1">
|
||||
var circlePath = new Path.Circle(new Point(280, 100), 25);
|
||||
circlePath.strokeColor = 'black';
|
||||
circlePath.fillColor = 'white';
|
||||
|
||||
var clones = 30;
|
||||
var angle = 360 / clones;
|
||||
|
||||
for (var i = 0; i < clones; i++) {
|
||||
var clonedPath = circlePath.clone();
|
||||
clonedPath.rotate(angle * i, circlePath.bounds.topLeft);
|
||||
};
|
||||
|
||||
window._json = project.exportJSON();
|
||||
console.log(window._json);
|
||||
</script>
|
||||
<script type="text/paperscript" canvas="canvas2">
|
||||
project.importJSON(window._json);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas1" width="500" height="500"></canvas>
|
||||
<canvas id="canvas2" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
30
paper.js/assets/paperjs/examples/JSON/Transform Test 2.html
Normal file
30
paper.js/assets/paperjs/examples/JSON/Transform Test 2.html
Normal file
@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Rectangle Testing</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas1">
|
||||
var path = new Path.Rectangle(new Point(50, 50), new Size(100, 50));
|
||||
path.style = {
|
||||
fillColor: 'white',
|
||||
strokeColor: 'black'
|
||||
};
|
||||
var copy = path.clone();
|
||||
copy.strokeColor = 'red';
|
||||
copy.rotate(-45);
|
||||
copy.scale(0.5);
|
||||
|
||||
window._json = project.exportJSON();
|
||||
console.log(window._json);
|
||||
</script>
|
||||
<script type="text/paperscript" canvas="canvas2">
|
||||
project.importJSON(window._json);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas1" width="500" height="500"></canvas>
|
||||
<canvas id="canvas2" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
52
paper.js/assets/paperjs/examples/Node.js/AnimatedStar.js
Normal file
52
paper.js/assets/paperjs/examples/Node.js/AnimatedStar.js
Normal file
@ -0,0 +1,52 @@
|
||||
// Please note: When loading paper as a normal module installed in node_modules,
|
||||
// you would use this instead:
|
||||
// var paper = require('paper-jsdom-canvas');
|
||||
var paper = require('../../dist/paper-core.js');
|
||||
paper.setup(new paper.Size(1024, 768));
|
||||
|
||||
var layer = paper.project.activeLayer;
|
||||
|
||||
var values = {
|
||||
count: 34,
|
||||
points: 32
|
||||
};
|
||||
|
||||
initialize();
|
||||
|
||||
paper.view.exportFrames({
|
||||
amount: 100,
|
||||
directory: __dirname,
|
||||
onComplete: function() {
|
||||
console.log('Done exporting.');
|
||||
},
|
||||
onProgress: function(event) {
|
||||
console.log(event.percentage + '% complete, frame took: ' + event.delta);
|
||||
}
|
||||
});
|
||||
|
||||
function initialize() {
|
||||
for (var i = 0; i < values.count; i++) {
|
||||
var offset = new paper.Point(20 + 10 * i, 0);
|
||||
var path = new paper.Path();
|
||||
path.fillColor = i % 2 ? 'red' : 'black';
|
||||
path.closed = true;
|
||||
|
||||
var l = offset.length;
|
||||
for (var j = 0; j < values.points * 2; j++) {
|
||||
offset.angle += 360 / values.points;
|
||||
var vector = offset.normalize(l * (j % 2 ? 0.1 : -0.1));
|
||||
path.add(offset.add(vector));
|
||||
}
|
||||
path.smooth();
|
||||
layer.insertChild(0, path);
|
||||
}
|
||||
layer.fitBounds(paper.view.bounds);
|
||||
}
|
||||
|
||||
paper.view.onFrame = function(event) {
|
||||
for (var i = 0, l = layer.children.length; i < l; i++) {
|
||||
var item = layer.children[i];
|
||||
var angle = (values.count - i) * Math.sin(event.count / 128) / 10;
|
||||
item.rotate(angle);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,36 @@
|
||||
// Please note: When loading paper as a normal module installed in node_modules,
|
||||
// you would use this instead:
|
||||
// var paper = require('paper-jsdom-canvas');
|
||||
var paper = require('../../dist/paper-core.js');
|
||||
var http = require('http');
|
||||
|
||||
http.createServer(function(request, response) {
|
||||
var canvas = paper.createCanvas(800, 800);
|
||||
paper.setup(canvas);
|
||||
with(paper) {
|
||||
var style = {
|
||||
fillColor: new Color(1, 1, 0, 0.5),
|
||||
strokeColor: new Color(0, 0, 0),
|
||||
strokeWidth: 1.5
|
||||
};
|
||||
|
||||
var first = new Path.Rectangle([50, 50], [150, 150]);
|
||||
first.style = style;
|
||||
var second = first.clone().translate(50, 50);
|
||||
second.style = style;
|
||||
|
||||
var intersection = first.subtract(second);
|
||||
intersection.style = style;
|
||||
intersection.translate(250, 0);
|
||||
view.update();
|
||||
}
|
||||
var stream = canvas.pngStream();
|
||||
stream.on('data', function(chunk) {
|
||||
response.write(chunk);
|
||||
});
|
||||
stream.on('end', function() {
|
||||
response.end();
|
||||
});
|
||||
}).listen(3000);
|
||||
|
||||
console.log('Server running at http://127.0.0.1:3000/');
|
||||
20
paper.js/assets/paperjs/examples/Node.js/JSONtoPDF.js
Normal file
20
paper.js/assets/paperjs/examples/Node.js/JSONtoPDF.js
Normal file
@ -0,0 +1,20 @@
|
||||
// Please note: When loading paper as a normal module installed in node_modules,
|
||||
// you would use this instead:
|
||||
// var paper = require('paper-jsdom-canvas');
|
||||
var paper = require('../../dist/paper-core.js');
|
||||
var path = require('path');
|
||||
var fs = require('fs');
|
||||
|
||||
var canvas = paper.createCanvas(612, 792, 'pdf');
|
||||
paper.setup(canvas);
|
||||
fs.readFile('./in.json', { encoding: 'utf8' }, function (err, data) {
|
||||
if (err)
|
||||
throw err;
|
||||
paper.project.importJSON(data);
|
||||
paper.view.update();
|
||||
fs.writeFile(path.resolve('./out.pdf'), canvas.toBuffer(), function (err) {
|
||||
if (err)
|
||||
throw err;
|
||||
console.log('Saved!');
|
||||
});
|
||||
});
|
||||
32
paper.js/assets/paperjs/examples/Node.js/Raster.js
Normal file
32
paper.js/assets/paperjs/examples/Node.js/Raster.js
Normal file
File diff suppressed because one or more lines are too long
33
paper.js/assets/paperjs/examples/Node.js/RasterRemote.js
Normal file
33
paper.js/assets/paperjs/examples/Node.js/RasterRemote.js
Normal file
@ -0,0 +1,33 @@
|
||||
// Please note: When loading paper as a normal module installed in node_modules,
|
||||
// you would use this instead:
|
||||
// var paper = require('paper-jsdom-canvas');
|
||||
var paper = require('../../dist/paper-core.js');
|
||||
var fs = require('fs');
|
||||
|
||||
var canvas = paper.createCanvas(800, 600);
|
||||
paper.setup(canvas);
|
||||
|
||||
var url = 'http://assets.paperjs.org/images/marilyn.jpg';
|
||||
var raster = new paper.Raster(url);
|
||||
raster.position = paper.view.center;
|
||||
|
||||
raster.onLoad = function() {
|
||||
paper.view.update();
|
||||
console.log('The image has loaded:' + raster.bounds);
|
||||
|
||||
// Saving the canvas to a file.
|
||||
out = fs.createWriteStream(__dirname + '/canvas.png');
|
||||
stream = canvas.pngStream();
|
||||
|
||||
stream.on('data', function(chunk) {
|
||||
out.write(chunk);
|
||||
});
|
||||
|
||||
stream.on('end', function() {
|
||||
console.log('saved png');
|
||||
});
|
||||
};
|
||||
|
||||
raster.onError = function(message) {
|
||||
console.error(message);
|
||||
};
|
||||
52
paper.js/assets/paperjs/examples/Node.js/SvgExport.js
Normal file
52
paper.js/assets/paperjs/examples/Node.js/SvgExport.js
Normal file
@ -0,0 +1,52 @@
|
||||
// Please note: When loading paper as a normal module installed in node_modules,
|
||||
// you would use this instead:
|
||||
// var paper = require('paper-jsdom-canvas');
|
||||
var paper = require('../../dist/paper-core.js');
|
||||
var path = require('path');
|
||||
var fs = require('fs');
|
||||
|
||||
with (paper) {
|
||||
paper.setup(new Size(300, 600));
|
||||
var stops = [new Color(1, 1, 0, 0), 'red', 'black'];
|
||||
|
||||
var radius = view.bounds.width * 0.4,
|
||||
from = new Point(view.center.x),
|
||||
to = from.add(radius, 0);
|
||||
|
||||
var circle = new Path.Circle({
|
||||
center: from,
|
||||
radius: radius,
|
||||
fillColor: {
|
||||
stops: stops,
|
||||
radial: true,
|
||||
origin: from,
|
||||
destination: to
|
||||
},
|
||||
strokeColor: 'black'
|
||||
});
|
||||
|
||||
var from = view.bounds.leftCenter,
|
||||
to = view.bounds.bottomRight;
|
||||
|
||||
var rect = new Path.Rectangle({
|
||||
from: from,
|
||||
to: to,
|
||||
fillColor: {
|
||||
stops: stops,
|
||||
radial: false,
|
||||
origin: from,
|
||||
destination: to
|
||||
},
|
||||
strokeColor: 'black'
|
||||
});
|
||||
|
||||
rect.rotate(45).scale(0.7);
|
||||
|
||||
var svg = project.exportSVG({ asString: true });
|
||||
console.log(svg);
|
||||
|
||||
fs.writeFile(path.resolve('./out.svg'), svg, function (err) {
|
||||
if (err) throw err;
|
||||
console.log('Saved!');
|
||||
});
|
||||
}
|
||||
23
paper.js/assets/paperjs/examples/Node.js/SvgImport.js
Normal file
23
paper.js/assets/paperjs/examples/Node.js/SvgImport.js
Normal file
@ -0,0 +1,23 @@
|
||||
// Please note: When loading paper as a normal module installed in node_modules,
|
||||
// you would use this instead:
|
||||
// var paper = require('paper-jsdom-canvas');
|
||||
var paper = require('../../dist/paper-core.js');
|
||||
|
||||
paper.setup(new paper.Size(300, 600));
|
||||
paper.project.importSVG('in.svg', {
|
||||
onLoad: function(item) {
|
||||
paper.view.exportFrames({
|
||||
amount: 1,
|
||||
directory: __dirname,
|
||||
onComplete: function() {
|
||||
console.log('Done exporting.');
|
||||
},
|
||||
onProgress: function(event) {
|
||||
console.log(event.percentage + '% complete, frame took: ' + event.delta);
|
||||
}
|
||||
});
|
||||
},
|
||||
onError: function(message) {
|
||||
console.error(message);
|
||||
}
|
||||
});
|
||||
16
paper.js/assets/paperjs/examples/Node.js/Tadpoles.js
Normal file
16
paper.js/assets/paperjs/examples/Node.js/Tadpoles.js
Normal file
@ -0,0 +1,16 @@
|
||||
// Please note: When loading paper as a normal module installed in node_modules,
|
||||
// you would use this instead:
|
||||
// var paper = require('paper-jsdom-canvas');
|
||||
var paper = require('../../dist/paper-full.js');
|
||||
var scope = require('./Tadpoles.pjs')(new paper.Size(1024, 768));
|
||||
|
||||
scope.view.exportFrames({
|
||||
amount: 400,
|
||||
directory: __dirname,
|
||||
onComplete: function() {
|
||||
console.log('Done exporting.');
|
||||
},
|
||||
onProgress: function(event) {
|
||||
console.log(event.percentage + '% complete, frame took: ' + event.delta);
|
||||
}
|
||||
});
|
||||
278
paper.js/assets/paperjs/examples/Node.js/Tadpoles.pjs
Normal file
278
paper.js/assets/paperjs/examples/Node.js/Tadpoles.pjs
Normal file
@ -0,0 +1,278 @@
|
||||
// Adapted from Flocking Processing example by Daniel Schiffman:
|
||||
// http://processing.org/learning/topics/flocking.html
|
||||
|
||||
project.currentStyle = {
|
||||
strokeColor: 'white',
|
||||
strokeWidth: 2,
|
||||
strokeCap: 'round'
|
||||
};
|
||||
|
||||
new Path.Rectangle(view.bounds).fillColor = 'black';
|
||||
|
||||
var head = new Path.Ellipse([0, 0], [13, 8]);
|
||||
head.fillColor = 'white';
|
||||
head.strokeColor = null;
|
||||
var headSymbol = new SymbolDefinition(head);
|
||||
|
||||
var size = view.size;
|
||||
|
||||
var Boid = Base.extend({
|
||||
initialize: function(position, maxSpeed, maxForce) {
|
||||
var strength = Math.random() * 0.5;
|
||||
this.acc = new Point(0, 0);
|
||||
this.vel = Point.random() * 2 - 1;
|
||||
this.loc = position.clone();
|
||||
this.r = 30;
|
||||
this.maxSpeed = maxSpeed + strength;
|
||||
this.maxForce = maxForce + strength;
|
||||
this.head = headSymbol.place();
|
||||
this.path = new Path();
|
||||
this.shortPath = new Path();
|
||||
this.shortPath.strokeWidth = 4;
|
||||
for (var i = 0, l = strength * 10 + 10; i < l; i++) {
|
||||
this.path.add(this.loc);
|
||||
if (i < 3)
|
||||
this.shortPath.add(this.loc);
|
||||
}
|
||||
|
||||
this.firstSegment = this.path.segments[0];
|
||||
this.count = 0;
|
||||
this.lastRot = 0;
|
||||
},
|
||||
|
||||
run: function(boids) {
|
||||
this.lastLoc = this.loc.clone();
|
||||
if (!groupTogether) {
|
||||
this.flock(boids);
|
||||
} else {
|
||||
this.align(boids);
|
||||
}
|
||||
this.borders();
|
||||
|
||||
this.update();
|
||||
this.firstSegment.point = this.loc;
|
||||
var lastPoint = this.firstSegment.point;
|
||||
var lastVector = this.loc - this.lastLoc;
|
||||
var segments = this.path.segments;
|
||||
for (var i = 1, l = segments.length; i < l; i++) {
|
||||
var segment = segments[i];
|
||||
var vector = lastPoint - segment.point;
|
||||
this.count += this.vel.length * 10;
|
||||
var rotLength = Math.sin((this.count + i * 3) / 300);
|
||||
var rotated = lastVector.rotate(90).normalize(rotLength);
|
||||
lastPoint += lastVector.normalize(-5 - this.vel.length / 3);
|
||||
segment.point = lastPoint;
|
||||
segment.point += rotated;
|
||||
lastVector = vector;
|
||||
}
|
||||
this.path.smooth();
|
||||
this.head.position = this.loc;
|
||||
var vector = this.loc - this.lastLoc;
|
||||
var rot = vector.angle;
|
||||
this.head.rotate(rot - this.lastRot);
|
||||
this.lastRot = rot;
|
||||
|
||||
var shortSegments = this.shortPath.segments;
|
||||
for (var i = 0; i < 3; i++)
|
||||
shortSegments[i] = segments[i].clone();
|
||||
},
|
||||
|
||||
// We accumulate a new acceleration each time based on three rules
|
||||
flock: function(boids) {
|
||||
var sep = this.separate(boids) * 3;
|
||||
var ali = this.align(boids);
|
||||
var coh = this.cohesion(boids);
|
||||
this.acc += sep + ali + coh;
|
||||
},
|
||||
|
||||
update: function() {
|
||||
// Update velocity
|
||||
this.vel += this.acc;
|
||||
// Limit speed (vector#limit?)
|
||||
this.vel.length = Math.min(this.maxSpeed, this.vel.length);
|
||||
this.loc += this.vel;
|
||||
// Reset acceleration to 0 each cycle
|
||||
this.acc.length = 0;
|
||||
},
|
||||
|
||||
seek: function(target) {
|
||||
this.acc += this.steer(target, false);
|
||||
},
|
||||
|
||||
arrive: function(target) {
|
||||
this.acc += this.steer(target, true);
|
||||
},
|
||||
|
||||
// A method that calculates a steering vector towards a target
|
||||
// Takes a second argument, if true, it slows down as it approaches
|
||||
// the target
|
||||
steer: function(target, slowdown) {
|
||||
var steer,
|
||||
desired = target - this.loc,
|
||||
d = desired.length;
|
||||
if (d > 0) {
|
||||
// Two options for desired vector magnitude
|
||||
// (1 -- based on distance, 2 -- maxSpeed)
|
||||
if (slowdown && d < 100) {
|
||||
// // This damping is somewhat arbitrary:
|
||||
desired.length = this.maxSpeed * (d / 100);
|
||||
} else {
|
||||
desired.length = this.maxSpeed;
|
||||
}
|
||||
steer = desired - this.vel;
|
||||
steer.length = Math.min(this.maxForce, steer.length);
|
||||
} else {
|
||||
steer = new Point(0, 0);
|
||||
}
|
||||
return steer;
|
||||
},
|
||||
|
||||
borders: function() {
|
||||
var loc = this.loc;
|
||||
var r = this.r;
|
||||
var oldLoc = this.loc.clone();
|
||||
var width = size.width;
|
||||
var height = size.height;
|
||||
if (loc.x < -r) loc.x = width + r;
|
||||
if (loc.y < -r) loc.y = height + r;
|
||||
if (loc.x > width + r) loc.x = -r;
|
||||
if (loc.y > height + r) loc.y = -r;
|
||||
var vector = this.loc - oldLoc;
|
||||
if (!vector.isZero())
|
||||
this.path.position += vector;
|
||||
},
|
||||
|
||||
separate: function(boids) {
|
||||
var desiredSeperation = 60;
|
||||
var steer = new Point(0, 0);
|
||||
var count = 0;
|
||||
// For every boid in the system, check if it's too close
|
||||
for (var i = 0, l = boids.length; i < l; i++) {
|
||||
var other = boids[i];
|
||||
var d = other.loc.getDistance(this.loc);
|
||||
if (d > 0 && d < desiredSeperation) {
|
||||
// Calculate vector pointing away from neighbor
|
||||
var diff = this.loc - other.loc;
|
||||
steer += diff.normalize(1 / d);
|
||||
count++;
|
||||
}
|
||||
}
|
||||
// Average -- divide by how many
|
||||
if (count > 0)
|
||||
steer /= count;
|
||||
if (steer.length > 0) {
|
||||
// Implement Reynolds: Steering = Desired - Velocity
|
||||
steer.length = this.maxSpeed;
|
||||
steer -= this.vel;
|
||||
steer.length = Math.min(steer.length, this.maxForce);
|
||||
}
|
||||
return steer;
|
||||
},
|
||||
|
||||
// Alignment
|
||||
// For every nearby boid in the system, calculate the average velocity
|
||||
align: function(boids) {
|
||||
var neighborDist = 25;
|
||||
var steer = new Point(0, 0);
|
||||
var count = 0;
|
||||
var nearest = 999;
|
||||
var closestPoint;
|
||||
for (var i = 0, l = boids.length; i < l; i++) {
|
||||
var other = boids[i];
|
||||
var d = this.loc.getDistance(other.loc);
|
||||
if (d > 0 && d < nearest) {
|
||||
closestPoint = other.loc;
|
||||
nearest = d;
|
||||
}
|
||||
if (d > 0 && d < neighborDist) {
|
||||
steer += other.vel;
|
||||
count++;
|
||||
}
|
||||
}
|
||||
|
||||
if (count > 0)
|
||||
steer /= count;
|
||||
if (steer.length > 0) {
|
||||
// Implement Reynolds: Steering = Desired - Velocity
|
||||
steer.length = this.maxSpeed;
|
||||
steer -= this.vel;
|
||||
steer.length = Math.min(steer.length, this.maxForce);
|
||||
}
|
||||
return steer;
|
||||
},
|
||||
|
||||
// Cohesion
|
||||
// For the average location (i.e. center) of all nearby boids,
|
||||
// calculate steering vector towards that location
|
||||
cohesion: function(boids) {
|
||||
var neighborDist = 100;
|
||||
var sum = new Point(0, 0);
|
||||
var count = 0;
|
||||
for (var i = 0, l = boids.length; i < l; i++) {
|
||||
var other = boids[i];
|
||||
var d = this.loc.getDistance(other.loc);
|
||||
if (d > 0 && d < neighborDist) {
|
||||
sum += other.loc; // Add location
|
||||
count++;
|
||||
}
|
||||
}
|
||||
if (count > 0) {
|
||||
sum /= count;
|
||||
// Steer towards the location
|
||||
return this.steer(sum, false);
|
||||
}
|
||||
return sum;
|
||||
}
|
||||
});
|
||||
|
||||
var heartPath = new Path([
|
||||
[[514.6962890625, 624.703125], [7.0966796875, -26.3369140625], [-7.10205078125, -27.0244140625]],
|
||||
[[484.29052734375, 548.6025390625], [13.16845703125, 23.7060546875], [-13.173828125, -23.70703125]],
|
||||
[[407.84619140625, 438.14453125], [37.79296875, 49.935546875], [-27.71630859375, -36.6435546875]],
|
||||
[[356.654296875, 368.400390625], [6.41015625, 9.8505859375], [-10.53759765625, -16.02978515625]],
|
||||
[[333.80712890625, 324.25146484375], [4.69189453125, 13.3994140625], [-4.697265625, -13.39892578125]],
|
||||
[[326.76416015625, 283.53857421875], [0, 13.74267578125], [0, -25.42431640625]],
|
||||
[[352.18798828125, 219.634765625], [-16.95263671875, 17.17822265625], [16.94775390625, -17.1787109375]],
|
||||
[[415.0615234375, 193.8671875], [-24.96826171875, 0], [25.19287109375, 0]],
|
||||
[[480.68310546875, 220.66552734375], [-18.552734375, -17.86572265625], [13.96826171875, 13.28662109375]],
|
||||
[[514.6962890625, 280.10302734375], [-8.70703125, -26.3369140625], [7.55859375, -25.88037109375]],
|
||||
[[546.6484375, 221.0087890625], [-13.7431640625, 13.517578125], [19.0087890625, -18.32177734375]],
|
||||
[[612.61328125, 193.5234375], [-24.9677734375, 0], [24.7373046875, 0]],
|
||||
[[675.486328125, 219.119140625], [-17.177734375, -17.06005859375], [17.1787109375, 17.06591796875]],
|
||||
[[701.2548828125, 280.10302734375], [0, -23.58837890625], [0, 20.61376953125]],
|
||||
[[686.1376953125, 344.52197265625], [10.076171875, -22.33203125], [-10.08203125, 22.33203125]],
|
||||
[[627.73046875, 432.3046875], [28.8603515625, -36.1875], [-37.5673828125, 47.412109375]],
|
||||
[[545.6171875, 549.1171875], [17.1787109375, -30.458984375], [-13.517578125, 24.0498046875]]
|
||||
]);
|
||||
heartPath.closed = true;
|
||||
heartPath.position = view.center;
|
||||
heartPath.strokeColor = null;
|
||||
heartPath.scale(1.5);
|
||||
|
||||
var groupTogether = false;
|
||||
var pathLength = heartPath.length;
|
||||
var mouseDown = false;
|
||||
var boids = [];
|
||||
|
||||
// Add the boids:
|
||||
for (var i = 0; i < 300; i++) {
|
||||
var position = view.center;
|
||||
boids.push(new Boid(position, 10, 0.05));
|
||||
}
|
||||
|
||||
function onFrame(event) {
|
||||
for (var i = 0, l = boids.length; i < l; i++) {
|
||||
if (groupTogether) {
|
||||
var length = ((i + event.count / 30) % l) / l * pathLength;
|
||||
var point = heartPath.getPointAt(length);
|
||||
boids[i].arrive(point);
|
||||
}
|
||||
boids[i].run(boids);
|
||||
}
|
||||
}
|
||||
|
||||
// Reposition the heart path whenever the window is resized:
|
||||
function onResize(event) {
|
||||
size = view.size;
|
||||
heartPath.position = view.center;
|
||||
}
|
||||
1
paper.js/assets/paperjs/examples/Node.js/in.json
Normal file
1
paper.js/assets/paperjs/examples/Node.js/in.json
Normal file
File diff suppressed because one or more lines are too long
16
paper.js/assets/paperjs/examples/Node.js/in.svg
Normal file
16
paper.js/assets/paperjs/examples/Node.js/in.svg
Normal file
@ -0,0 +1,16 @@
|
||||
<svg x="0" y="0" width="300" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
|
||||
<linearGradient x1="45" y1="345" x2="255" y2="555" gradientUnits="userSpaceOnUse" id="gradient-2">
|
||||
<stop offset="0" stop-color="rgb(255, 255, 0)" stop-opacity="0"></stop>
|
||||
<stop offset="0.5" stop-color="rgb(255, 0, 0)"></stop>
|
||||
<stop offset="1" stop-color="rgb(0, 0, 0)"></stop>
|
||||
</linearGradient>
|
||||
<radialGradient cx="150" cy="150" r="120" gradientUnits="userSpaceOnUse" id="gradient-1">
|
||||
<stop offset="0" stop-color="rgb(255, 255, 0)" stop-opacity="0"></stop>
|
||||
<stop offset="0.5" stop-color="rgb(255, 0, 0)"></stop>
|
||||
<stop offset="1" stop-color="rgb(0, 0, 0)"></stop>
|
||||
</radialGradient>
|
||||
<g fill="none" stroke="rgb(0, 0, 0)" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0">
|
||||
<circle cx="150" cy="150" r="120" fill="url(#gradient-1)"></circle>
|
||||
<rect x="45" y="345" width="210" height="210" transform="rotate(45,150,450)" fill="url(#gradient-2)"></rect>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1,115 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Path Intersections</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
var text = new PointText({
|
||||
position: view.center + [0, 200],
|
||||
fillColor: 'black',
|
||||
justification: 'center',
|
||||
fontSize: 20
|
||||
});
|
||||
|
||||
var originals = new Group({ insert: false }); // Don't insert in DOM.
|
||||
|
||||
var square = new Path.Rectangle({
|
||||
position: view.center,
|
||||
size: 300,
|
||||
parent: originals,
|
||||
fillColor: 'white'
|
||||
});
|
||||
|
||||
// Make a ring using subtraction of two circles:
|
||||
var inner = new Path.Circle({
|
||||
center: view.center,
|
||||
radius: 100,
|
||||
parent: originals,
|
||||
fillColor: 'white'
|
||||
});
|
||||
|
||||
var outer = new Path.Circle({
|
||||
center: view.center,
|
||||
radius: 140,
|
||||
parent: originals,
|
||||
fillColor: 'white'
|
||||
});
|
||||
|
||||
var ring = outer.subtract(inner);
|
||||
|
||||
var operations = ['unite', 'intersect', 'subtract', 'exclude', 'divide'];
|
||||
var colors = ['red', 'green', 'blue', 'black'];
|
||||
var curIndex = -1;
|
||||
var operation, result, activeItem;
|
||||
|
||||
// Change the mode every 3 seconds:
|
||||
setInterval(setMode, 3000);
|
||||
|
||||
// Set the initial mode:
|
||||
setMode();
|
||||
|
||||
function setMode() {
|
||||
curIndex++;
|
||||
if (curIndex == operations.length * 2)
|
||||
curIndex = 0;
|
||||
operation = operations[curIndex % operations.length];
|
||||
}
|
||||
|
||||
function onMouseDown(event) {
|
||||
var hitResult = originals.hitTest(event.point);
|
||||
activeItem = hitResult && hitResult.item;
|
||||
}
|
||||
|
||||
function onMouseDrag(event) {
|
||||
if (activeItem)
|
||||
activeItem.position = event.point;
|
||||
}
|
||||
|
||||
function onMouseUp() {
|
||||
activeItem = null;
|
||||
square.position = view.center;
|
||||
}
|
||||
|
||||
function onFrame(event) {
|
||||
if (activeItem != ring) {
|
||||
// Move the ring around:
|
||||
var offset = new Point(140, 80) * [Math.sin(event.count / 60), Math.sin(event.count / 40)];
|
||||
ring.position = view.center + offset;
|
||||
}
|
||||
|
||||
// Remove the result of the last path operation:
|
||||
if (result)
|
||||
result.remove();
|
||||
|
||||
// Perform the path operation on the ring:
|
||||
if (curIndex < operations.length) {
|
||||
result = square[operation](ring);
|
||||
text.content = 'square.' + operation + '(ring)';
|
||||
} else {
|
||||
result = ring[operation](square);
|
||||
text.content = 'ring.' + operation + '(square)';
|
||||
}
|
||||
result.selected = true;
|
||||
result.fillColor = colors[curIndex % colors.length];
|
||||
result.moveBelow(text);
|
||||
|
||||
// If the result is a group, color each of its children differently:
|
||||
if (result instanceof Group) {
|
||||
for (var i = 0; i < result.children.length; i++) {
|
||||
result.children[i].fillColor = colors[i];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function onResize() {
|
||||
text.position = view.center + [0, 200];
|
||||
square.position = view.center;
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" resize></canvas>
|
||||
</body>
|
||||
</html>
|
||||
103
paper.js/assets/paperjs/examples/Paperjs.org/BouncingBalls.html
Normal file
103
paper.js/assets/paperjs/examples/Paperjs.org/BouncingBalls.html
Normal file
@ -0,0 +1,103 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Bouncing Balls</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
var Ball = function(point, vector) {
|
||||
if (!vector || vector.isZero()) {
|
||||
this.vector = Point.random() * 5;
|
||||
} else {
|
||||
this.vector = vector * 2;
|
||||
}
|
||||
this.point = point;
|
||||
this.dampen = 0.4;
|
||||
this.gravity = 3;
|
||||
this.bounce = -0.6;
|
||||
|
||||
var color = {
|
||||
hue: Math.random() * 360,
|
||||
saturation: 1,
|
||||
brightness: 1
|
||||
};
|
||||
var gradient = new Gradient([color, 'black'], true);
|
||||
|
||||
var radius = this.radius = 50 * Math.random() + 30;
|
||||
// Wrap CompoundPath in a Group, since CompoundPaths directly
|
||||
// applies the transformations to the content, just like Path.
|
||||
var ball = new CompoundPath({
|
||||
children: [
|
||||
new Path.Circle({
|
||||
radius: radius
|
||||
}),
|
||||
new Path.Circle({
|
||||
center: radius / 8,
|
||||
radius: radius / 3
|
||||
})
|
||||
],
|
||||
fillColor: new Color(gradient, 0, radius, radius / 8),
|
||||
});
|
||||
|
||||
this.item = new Group({
|
||||
children: [ball],
|
||||
applyMatrix: false,
|
||||
position: this.point
|
||||
});
|
||||
}
|
||||
|
||||
Ball.prototype.iterate = function() {
|
||||
var size = view.size;
|
||||
this.vector.y += this.gravity;
|
||||
this.vector.x *= 0.99;
|
||||
var pre = this.point + this.vector;
|
||||
if (pre.x < this.radius || pre.x > size.width - this.radius)
|
||||
this.vector.x *= -this.dampen;
|
||||
if (pre.y < this.radius || pre.y > size.height - this.radius) {
|
||||
if (Math.abs(this.vector.x) < 3)
|
||||
this.vector = Point.random() * [150, 100] + [-75, 20];
|
||||
this.vector.y *= this.bounce;
|
||||
}
|
||||
|
||||
var max = Point.max(this.radius, this.point + this.vector);
|
||||
this.item.position = this.point = Point.min(max, size - this.radius);
|
||||
this.item.rotate(this.vector.x);
|
||||
};
|
||||
|
||||
|
||||
var balls = [];
|
||||
for (var i = 0; i < 10; i++) {
|
||||
var position = Point.random() * view.size,
|
||||
vector = (Point.random() - [0.5, 0]) * [50, 100],
|
||||
ball = new Ball(position, vector);
|
||||
balls.push(ball);
|
||||
}
|
||||
|
||||
var textItem = new PointText({
|
||||
point: [20, 30],
|
||||
fillColor: 'black',
|
||||
content: 'Click, drag and release to add balls.'
|
||||
});
|
||||
|
||||
var lastDelta;
|
||||
function onMouseDrag(event) {
|
||||
lastDelta = event.delta;
|
||||
}
|
||||
|
||||
function onMouseUp(event) {
|
||||
var ball = new Ball(event.point, lastDelta);
|
||||
balls.push(ball);
|
||||
lastDelta = null;
|
||||
}
|
||||
|
||||
function onFrame() {
|
||||
for (var i = 0, l = balls.length; i < l; i++)
|
||||
balls[i].iterate();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" resize></canvas>
|
||||
</body>
|
||||
</html>
|
||||
54
paper.js/assets/paperjs/examples/Paperjs.org/Chain.html
Normal file
54
paper.js/assets/paperjs/examples/Paperjs.org/Chain.html
Normal file
@ -0,0 +1,54 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Chain</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
// Adapted from the following Processing example:
|
||||
// http://processing.org/learning/topics/follow3.html
|
||||
|
||||
// The amount of points in the path:
|
||||
var points = 25;
|
||||
|
||||
// The distance between the points:
|
||||
var length = 35;
|
||||
|
||||
var path = new Path({
|
||||
strokeColor: '#E4141B',
|
||||
strokeWidth: 20,
|
||||
strokeCap: 'round'
|
||||
});
|
||||
|
||||
var start = view.center / [10, 1];
|
||||
for (var i = 0; i < points; i++)
|
||||
path.add(start + new Point(i * length, 0));
|
||||
|
||||
function onMouseMove(event) {
|
||||
path.firstSegment.point = event.point;
|
||||
for (var i = 0; i < points - 1; i++) {
|
||||
var segment = path.segments[i];
|
||||
var nextSegment = segment.next;
|
||||
var vector = segment.point - nextSegment.point;
|
||||
vector.length = length;
|
||||
nextSegment.point = segment.point - vector;
|
||||
}
|
||||
path.smooth({ type: 'continuous' });
|
||||
}
|
||||
|
||||
function onMouseDown(event) {
|
||||
path.fullySelected = true;
|
||||
path.strokeColor = '#e08285';
|
||||
}
|
||||
|
||||
function onMouseUp(event) {
|
||||
path.fullySelected = false;
|
||||
path.strokeColor = '#e4141b';
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" resize></canvas>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
122
paper.js/assets/paperjs/examples/Paperjs.org/FutureSplash.html
Normal file
122
paper.js/assets/paperjs/examples/Paperjs.org/FutureSplash.html
Normal file
@ -0,0 +1,122 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Future Splash</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
// Code ported to Paper.js from http://the389.com/9/1/
|
||||
// with permission.
|
||||
|
||||
var values = {
|
||||
friction: 0.8,
|
||||
timeStep: 0.01,
|
||||
amount: 15,
|
||||
mass: 2,
|
||||
count: 0
|
||||
};
|
||||
values.invMass = 1 / values.mass;
|
||||
|
||||
var path, springs;
|
||||
var size = view.size * [1.2, 1];
|
||||
|
||||
var Spring = function(a, b, strength, restLength) {
|
||||
this.a = a;
|
||||
this.b = b;
|
||||
this.restLength = restLength || 80;
|
||||
this.strength = strength ? strength : 0.55;
|
||||
this.mamb = values.invMass * values.invMass;
|
||||
};
|
||||
|
||||
Spring.prototype.update = function() {
|
||||
var delta = this.b - this.a;
|
||||
var dist = delta.length;
|
||||
var normDistStrength = (dist - this.restLength) /
|
||||
(dist * this.mamb) * this.strength;
|
||||
delta.y *= normDistStrength * values.invMass * 0.2;
|
||||
if (!this.a.fixed)
|
||||
this.a.y += delta.y;
|
||||
if (!this.b.fixed)
|
||||
this.b.y -= delta.y;
|
||||
};
|
||||
|
||||
|
||||
function createPath(strength) {
|
||||
var path = new Path({
|
||||
fillColor: 'black'
|
||||
});
|
||||
springs = [];
|
||||
for (var i = 0; i <= values.amount; i++) {
|
||||
var segment = path.add(new Point(i / values.amount, 0.5) * size);
|
||||
var point = segment.point;
|
||||
if (i == 0 || i == values.amount)
|
||||
point.y += size.height;
|
||||
point.px = point.x;
|
||||
point.py = point.y;
|
||||
// The first two and last two points are fixed:
|
||||
point.fixed = i < 2 || i > values.amount - 2;
|
||||
if (i > 0) {
|
||||
var spring = new Spring(segment.previous.point, point, strength);
|
||||
springs.push(spring);
|
||||
}
|
||||
}
|
||||
path.position.x -= size.width / 4;
|
||||
return path;
|
||||
}
|
||||
|
||||
function onResize() {
|
||||
if (path)
|
||||
path.remove();
|
||||
size = view.bounds.size * [2, 1];
|
||||
path = createPath(0.1);
|
||||
}
|
||||
|
||||
function onMouseMove(event) {
|
||||
var location = path.getNearestLocation(event.point);
|
||||
var segment = location.segment;
|
||||
var point = segment.point;
|
||||
|
||||
if (!point.fixed && location.distance < size.height / 4) {
|
||||
var y = event.point.y;
|
||||
point.y += (y - point.y) / 6;
|
||||
var previous = segment.previous && segment.previous.point;
|
||||
var next = segment.next && segment.next.point;
|
||||
if (previous && !previous.fixed)
|
||||
previous.y += (y - previous.y) / 24;
|
||||
if (next && !next.fixed)
|
||||
next.y += (y - next.y) / 24;
|
||||
}
|
||||
}
|
||||
|
||||
function onFrame(event) {
|
||||
updateWave(path);
|
||||
}
|
||||
|
||||
function updateWave(path) {
|
||||
var force = 1 - values.friction * values.timeStep * values.timeStep;
|
||||
for (var i = 0, l = path.segments.length; i < l; i++) {
|
||||
var point = path.segments[i].point;
|
||||
var dy = (point.y - point.py) * force;
|
||||
point.py = point.y;
|
||||
point.y = Math.max(point.y + dy, 0);
|
||||
}
|
||||
|
||||
for (var j = 0, l = springs.length; j < l; j++) {
|
||||
springs[j].update();
|
||||
}
|
||||
path.smooth({ type: 'continuous' });
|
||||
}
|
||||
|
||||
function onKeyDown(event) {
|
||||
if (event.key == 'space') {
|
||||
path.fullySelected = !path.fullySelected;
|
||||
path.fillColor = path.fullySelected ? null : 'black';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" resize hidpi="off"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
103
paper.js/assets/paperjs/examples/Paperjs.org/HitTesting.html
Normal file
103
paper.js/assets/paperjs/examples/Paperjs.org/HitTesting.html
Normal file
@ -0,0 +1,103 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Hit Testing</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
var values = {
|
||||
paths: 50,
|
||||
minPoints: 5,
|
||||
maxPoints: 15,
|
||||
minRadius: 30,
|
||||
maxRadius: 90
|
||||
};
|
||||
|
||||
var hitOptions = {
|
||||
segments: true,
|
||||
stroke: true,
|
||||
fill: true,
|
||||
tolerance: 5
|
||||
};
|
||||
|
||||
createPaths();
|
||||
|
||||
function createPaths() {
|
||||
var radiusDelta = values.maxRadius - values.minRadius;
|
||||
var pointsDelta = values.maxPoints - values.minPoints;
|
||||
for (var i = 0; i < values.paths; i++) {
|
||||
var radius = values.minRadius + Math.random() * radiusDelta;
|
||||
var points = values.minPoints + Math.floor(Math.random() * pointsDelta);
|
||||
var path = createBlob(view.size * Point.random(), radius, points);
|
||||
var lightness = (Math.random() - 0.5) * 0.4 + 0.4;
|
||||
var hue = Math.random() * 360;
|
||||
path.fillColor = { hue: hue, saturation: 1, lightness: lightness };
|
||||
path.strokeColor = 'black';
|
||||
};
|
||||
}
|
||||
|
||||
function createBlob(center, maxRadius, points) {
|
||||
var path = new Path();
|
||||
path.closed = true;
|
||||
for (var i = 0; i < points; i++) {
|
||||
var delta = new Point({
|
||||
length: (maxRadius * 0.5) + (Math.random() * maxRadius * 0.5),
|
||||
angle: (360 / points) * i
|
||||
});
|
||||
path.add(center + delta);
|
||||
}
|
||||
path.smooth();
|
||||
return path;
|
||||
}
|
||||
|
||||
var segment, path;
|
||||
var movePath = false;
|
||||
function onMouseDown(event) {
|
||||
segment = path = null;
|
||||
var hitResult = project.hitTest(event.point, hitOptions);
|
||||
if (!hitResult)
|
||||
return;
|
||||
|
||||
if (event.modifiers.shift) {
|
||||
if (hitResult.type == 'segment') {
|
||||
hitResult.segment.remove();
|
||||
};
|
||||
return;
|
||||
}
|
||||
|
||||
if (hitResult) {
|
||||
path = hitResult.item;
|
||||
if (hitResult.type == 'segment') {
|
||||
segment = hitResult.segment;
|
||||
} else if (hitResult.type == 'stroke') {
|
||||
var location = hitResult.location;
|
||||
segment = path.insert(location.index + 1, event.point);
|
||||
path.smooth();
|
||||
}
|
||||
}
|
||||
movePath = hitResult.type == 'fill';
|
||||
if (movePath)
|
||||
project.activeLayer.addChild(hitResult.item);
|
||||
}
|
||||
|
||||
function onMouseMove(event) {
|
||||
project.activeLayer.selected = false;
|
||||
if (event.item)
|
||||
event.item.selected = true;
|
||||
}
|
||||
|
||||
function onMouseDrag(event) {
|
||||
if (segment) {
|
||||
segment.point += event.delta;
|
||||
path.smooth();
|
||||
} else if (path) {
|
||||
path.position += event.delta;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" resize style="background:black"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
132
paper.js/assets/paperjs/examples/Paperjs.org/MetaBalls.html
Normal file
132
paper.js/assets/paperjs/examples/Paperjs.org/MetaBalls.html
Normal file
@ -0,0 +1,132 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Meta Balls</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
// Ported from original Metaball script by SATO Hiroyuki
|
||||
// http://park12.wakwak.com/~shp/lc/et/en_aics_script.html
|
||||
project.currentStyle = {
|
||||
fillColor: 'black'
|
||||
};
|
||||
|
||||
var ballPositions = [[255, 129], [610, 73], [486, 363],
|
||||
[117, 459], [484, 726], [843, 306], [789, 615], [1049, 82],
|
||||
[1292, 428], [1117, 733], [1352, 86], [92, 798]];
|
||||
|
||||
var handle_len_rate = 2.4;
|
||||
var circlePaths = [];
|
||||
var radius = 50;
|
||||
for (var i = 0, l = ballPositions.length; i < l; i++) {
|
||||
var circlePath = new Path.Circle({
|
||||
center: ballPositions[i],
|
||||
radius: 50
|
||||
});
|
||||
circlePaths.push(circlePath);
|
||||
}
|
||||
|
||||
var largeCircle = new Path.Circle({
|
||||
center: [676, 433],
|
||||
radius: 100
|
||||
});
|
||||
circlePaths.push(largeCircle);
|
||||
|
||||
function onMouseMove(event) {
|
||||
largeCircle.position = event.point;
|
||||
generateConnections(circlePaths);
|
||||
}
|
||||
|
||||
var connections = new Group();
|
||||
function generateConnections(paths) {
|
||||
// Remove the last connection paths:
|
||||
connections.removeChildren();
|
||||
|
||||
for (var i = 0, l = paths.length; i < l; i++) {
|
||||
for (var j = i - 1; j >= 0; j--) {
|
||||
var path = metaball(paths[i], paths[j], 0.5, handle_len_rate, 300);
|
||||
if (path) {
|
||||
connections.appendTop(path);
|
||||
path.removeOnMove();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
generateConnections(circlePaths);
|
||||
|
||||
// ---------------------------------------------
|
||||
function metaball(ball1, ball2, v, handle_len_rate, maxDistance) {
|
||||
var center1 = ball1.position;
|
||||
var center2 = ball2.position;
|
||||
var radius1 = ball1.bounds.width / 2;
|
||||
var radius2 = ball2.bounds.width / 2;
|
||||
var pi2 = Math.PI / 2;
|
||||
var d = center1.getDistance(center2);
|
||||
var u1, u2;
|
||||
|
||||
if (radius1 == 0 || radius2 == 0)
|
||||
return;
|
||||
|
||||
if (d > maxDistance || d <= Math.abs(radius1 - radius2)) {
|
||||
return;
|
||||
} else if (d < radius1 + radius2) { // case circles are overlapping
|
||||
u1 = Math.acos((radius1 * radius1 + d * d - radius2 * radius2) /
|
||||
(2 * radius1 * d));
|
||||
u2 = Math.acos((radius2 * radius2 + d * d - radius1 * radius1) /
|
||||
(2 * radius2 * d));
|
||||
} else {
|
||||
u1 = 0;
|
||||
u2 = 0;
|
||||
}
|
||||
|
||||
var angle1 = (center2 - center1).getAngleInRadians();
|
||||
var angle2 = Math.acos((radius1 - radius2) / d);
|
||||
var angle1a = angle1 + u1 + (angle2 - u1) * v;
|
||||
var angle1b = angle1 - u1 - (angle2 - u1) * v;
|
||||
var angle2a = angle1 + Math.PI - u2 - (Math.PI - u2 - angle2) * v;
|
||||
var angle2b = angle1 - Math.PI + u2 + (Math.PI - u2 - angle2) * v;
|
||||
var p1a = center1 + getVector(angle1a, radius1);
|
||||
var p1b = center1 + getVector(angle1b, radius1);
|
||||
var p2a = center2 + getVector(angle2a, radius2);
|
||||
var p2b = center2 + getVector(angle2b, radius2);
|
||||
|
||||
// define handle length by the distance between
|
||||
// both ends of the curve to draw
|
||||
var totalRadius = (radius1 + radius2);
|
||||
var d2 = Math.min(v * handle_len_rate, (p1a - p2a).length / totalRadius);
|
||||
|
||||
// case circles are overlapping:
|
||||
d2 *= Math.min(1, d * 2 / (radius1 + radius2));
|
||||
|
||||
radius1 *= d2;
|
||||
radius2 *= d2;
|
||||
|
||||
var path = new Path({
|
||||
segments: [p1a, p2a, p2b, p1b],
|
||||
style: ball1.style,
|
||||
closed: true
|
||||
});
|
||||
var segments = path.segments;
|
||||
segments[0].handleOut = getVector(angle1a - pi2, radius1);
|
||||
segments[1].handleIn = getVector(angle2a + pi2, radius2);
|
||||
segments[2].handleOut = getVector(angle2b - pi2, radius2);
|
||||
segments[3].handleIn = getVector(angle1b + pi2, radius1);
|
||||
return path;
|
||||
}
|
||||
|
||||
// ------------------------------------------------
|
||||
function getVector(radians, length) {
|
||||
return new Point({
|
||||
// Convert radians to degrees:
|
||||
angle: radians * 180 / Math.PI,
|
||||
length: length
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" resize></canvas>
|
||||
</body>
|
||||
</html>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user