mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-06 04:42:15 -05:00
Prebuilt module for commit a183dc0c0d
This commit is contained in:
Paper.js Bot
parent
28796a2776
commit
86ffb832fa
48 changed files with 134003 additions and 28 deletions
414
dist/docs/assets/css/docs.css
vendored
Normal file
414
dist/docs/assets/css/docs.css
vendored
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
dist/docs/assets/js/codemirror.js
vendored
Normal file
4
dist/docs/assets/js/codemirror.js
vendored
Normal file
File diff suppressed because one or more lines are too long
493
dist/docs/assets/js/docs.js
vendored
Normal file
493
dist/docs/assets/js/docs.js
vendored
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
dist/docs/assets/js/jquery.js
vendored
Normal file
6
dist/docs/assets/js/jquery.js
vendored
Normal file
File diff suppressed because one or more lines are too long
17353
dist/docs/assets/js/paper.js
vendored
Normal file
17353
dist/docs/assets/js/paper.js
vendored
Normal file
File diff suppressed because it is too large
Load diff
2188
dist/docs/classes/Color.html
vendored
Normal file
2188
dist/docs/classes/Color.html
vendored
Normal file
File diff suppressed because it is too large
Load diff
8879
dist/docs/classes/CompoundPath.html
vendored
Normal file
8879
dist/docs/classes/CompoundPath.html
vendored
Normal file
File diff suppressed because it is too large
Load diff
2323
dist/docs/classes/Curve.html
vendored
Normal file
2323
dist/docs/classes/Curve.html
vendored
Normal file
File diff suppressed because it is too large
Load diff
672
dist/docs/classes/CurveLocation.html
vendored
Normal file
672
dist/docs/classes/CurveLocation.html
vendored
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.3 (develop)<br>
|
||||
Copyright © 2011—2019 <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
dist/docs/classes/Event.html
vendored
Normal file
176
dist/docs/classes/Event.html
vendored
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.3 (develop)<br>
|
||||
Copyright © 2011—2019 <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
dist/docs/classes/Gradient.html
vendored
Normal file
240
dist/docs/classes/Gradient.html
vendored
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.3 (develop)<br>
|
||||
Copyright © 2011—2019 <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
dist/docs/classes/GradientStop.html
vendored
Normal file
273
dist/docs/classes/GradientStop.html
vendored
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.3 (develop)<br>
|
||||
Copyright © 2011—2019 <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>
|
||||
6866
dist/docs/classes/Group.html
vendored
Normal file
6866
dist/docs/classes/Group.html
vendored
Normal file
File diff suppressed because it is too large
Load diff
239
dist/docs/classes/HitResult.html
vendored
Normal file
239
dist/docs/classes/HitResult.html
vendored
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.3 (develop)<br>
|
||||
Copyright © 2011—2019 <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>
|
||||
6630
dist/docs/classes/Item.html
vendored
Normal file
6630
dist/docs/classes/Item.html
vendored
Normal file
File diff suppressed because it is too large
Load diff
139
dist/docs/classes/Key.html
vendored
Normal file
139
dist/docs/classes/Key.html
vendored
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.3 (develop)<br>
|
||||
Copyright © 2011—2019 <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
dist/docs/classes/KeyEvent.html
vendored
Normal file
308
dist/docs/classes/KeyEvent.html
vendored
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.3 (develop)<br>
|
||||
Copyright © 2011—2019 <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>
|
||||
6852
dist/docs/classes/Layer.html
vendored
Normal file
6852
dist/docs/classes/Layer.html
vendored
Normal file
File diff suppressed because it is too large
Load diff
1744
dist/docs/classes/Matrix.html
vendored
Normal file
1744
dist/docs/classes/Matrix.html
vendored
Normal file
File diff suppressed because it is too large
Load diff
355
dist/docs/classes/MouseEvent.html
vendored
Normal file
355
dist/docs/classes/MouseEvent.html
vendored
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.3 (develop)<br>
|
||||
Copyright © 2011—2019 <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
dist/docs/classes/PaperScope.html
vendored
Normal file
459
dist/docs/classes/PaperScope.html
vendored
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.3 (develop)<br>
|
||||
Copyright © 2011—2019 <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
dist/docs/classes/PaperScript.html
vendored
Normal file
198
dist/docs/classes/PaperScript.html
vendored
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.3 (develop)<br>
|
||||
Copyright © 2011—2019 <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>
|
||||
11777
dist/docs/classes/Path.html
vendored
Normal file
11777
dist/docs/classes/Path.html
vendored
Normal file
File diff suppressed because it is too large
Load diff
8641
dist/docs/classes/PathItem.html
vendored
Normal file
8641
dist/docs/classes/PathItem.html
vendored
Normal file
File diff suppressed because it is too large
Load diff
2699
dist/docs/classes/Point.html
vendored
Normal file
2699
dist/docs/classes/Point.html
vendored
Normal file
File diff suppressed because it is too large
Load diff
7031
dist/docs/classes/PointText.html
vendored
Normal file
7031
dist/docs/classes/PointText.html
vendored
Normal file
File diff suppressed because it is too large
Load diff
1305
dist/docs/classes/Project.html
vendored
Normal file
1305
dist/docs/classes/Project.html
vendored
Normal file
File diff suppressed because it is too large
Load diff
7773
dist/docs/classes/Raster.html
vendored
Normal file
7773
dist/docs/classes/Raster.html
vendored
Normal file
File diff suppressed because it is too large
Load diff
1654
dist/docs/classes/Rectangle.html
vendored
Normal file
1654
dist/docs/classes/Rectangle.html
vendored
Normal file
File diff suppressed because it is too large
Load diff
939
dist/docs/classes/Segment.html
vendored
Normal file
939
dist/docs/classes/Segment.html
vendored
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 optionaly 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.3 (develop)<br>
|
||||
Copyright © 2011—2019 <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>
|
||||
7365
dist/docs/classes/Shape.html
vendored
Normal file
7365
dist/docs/classes/Shape.html
vendored
Normal file
File diff suppressed because it is too large
Load diff
1825
dist/docs/classes/Size.html
vendored
Normal file
1825
dist/docs/classes/Size.html
vendored
Normal file
File diff suppressed because it is too large
Load diff
919
dist/docs/classes/Style.html
vendored
Normal file
919
dist/docs/classes/Style.html
vendored
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.3 (develop)<br>
|
||||
Copyright © 2011—2019 <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
dist/docs/classes/SymbolDefinition.html
vendored
Normal file
311
dist/docs/classes/SymbolDefinition.html
vendored
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.3 (develop)<br>
|
||||
Copyright © 2011—2019 <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>
|
||||
6757
dist/docs/classes/SymbolItem.html
vendored
Normal file
6757
dist/docs/classes/SymbolItem.html
vendored
Normal file
File diff suppressed because it is too large
Load diff
6871
dist/docs/classes/TextItem.html
vendored
Normal file
6871
dist/docs/classes/TextItem.html
vendored
Normal file
File diff suppressed because it is too large
Load diff
761
dist/docs/classes/Tool.html
vendored
Normal file
761
dist/docs/classes/Tool.html
vendored
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.3 (develop)<br>
|
||||
Copyright © 2011—2019 <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
dist/docs/classes/ToolEvent.html
vendored
Normal file
446
dist/docs/classes/ToolEvent.html
vendored
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.3 (develop)<br>
|
||||
Copyright © 2011—2019 <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
dist/docs/classes/Tween.html
vendored
Normal file
374
dist/docs/classes/Tween.html
vendored
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.3 (develop)<br>
|
||||
Copyright © 2011—2019 <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
dist/docs/classes/View.html
vendored
Normal file
1772
dist/docs/classes/View.html
vendored
Normal file
File diff suppressed because it is too large
Load diff
425
dist/docs/classes/global.html
vendored
Normal file
425
dist/docs/classes/global.html
vendored
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.3 (develop)<br>
|
||||
Copyright © 2011—2019 <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
dist/docs/classes/index.html
vendored
Normal file
88
dist/docs/classes/index.html
vendored
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Paper.js v0.12.3 (develop)</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.3 (develop)</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
dist/docs/index.html
vendored
Normal file
11
dist/docs/index.html
vendored
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Paper.js v0.12.3 (develop)</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>
|
||||
29
dist/paper-core.js
vendored
29
dist/paper-core.js
vendored
|
|
@ -9,7 +9,7 @@
|
|||
*
|
||||
* All rights reserved.
|
||||
*
|
||||
* Date: Fri Dec 13 14:32:31 2019 +0100
|
||||
* Date: Fri Dec 13 16:13:56 2019 +0100
|
||||
*
|
||||
***
|
||||
*
|
||||
|
|
@ -977,8 +977,13 @@ var CollisionDetection = {
|
|||
|
||||
findBoundsCollisions: function(boundsA, boundsB, tolerance,
|
||||
sweepVertical, onlySweepAxisCollisions) {
|
||||
var lo, hi;
|
||||
var binarySearch = function(indices, coordinateValue, coordinate) {
|
||||
var self = !boundsB || boundsA === boundsB,
|
||||
allBounds = self ? boundsA : boundsA.concat(boundsB),
|
||||
countA = boundsA.length,
|
||||
countAll = allBounds.length,
|
||||
lo, hi;
|
||||
|
||||
function binarySearch(indices, coordinateValue, coordinate) {
|
||||
lo = 0;
|
||||
hi = indices.length;
|
||||
while (lo < hi) {
|
||||
|
|
@ -990,12 +995,8 @@ var CollisionDetection = {
|
|||
}
|
||||
}
|
||||
return lo - 1;
|
||||
};
|
||||
}
|
||||
|
||||
var self = !boundsB || boundsA === boundsB,
|
||||
allBounds = self ? boundsA : boundsA.concat(boundsB),
|
||||
countA = boundsA.length,
|
||||
countAll = allBounds.length;
|
||||
var coordP0 = sweepVertical ? 1 : 0,
|
||||
coordP1 = coordP0 + 2,
|
||||
coordS0 = sweepVertical ? 0 : 1,
|
||||
|
|
@ -1011,7 +1012,7 @@ var CollisionDetection = {
|
|||
allCollisions = new Array(countA);
|
||||
for (var i = 0; i < countAll; i++) {
|
||||
var currentIndex = allIndicesByP0[i],
|
||||
currentBounds = allBounds[currentIndex];
|
||||
currentBounds = allBounds[currentIndex],
|
||||
currentOriginalIndex = self ? currentIndex
|
||||
: currentIndex - countA,
|
||||
isCurrentA = currentIndex < countA,
|
||||
|
|
@ -10446,11 +10447,11 @@ PathItem.inject(new function() {
|
|||
clockwise = first.isClockwise();
|
||||
for (var i = 0; i < length; i++) {
|
||||
var path1 = sorted[i],
|
||||
indicesI = collisions[i];
|
||||
indicesI = collisions[i],
|
||||
entry1 = lookup[path1._id],
|
||||
containerWinding = 0;
|
||||
if (indicesI) {
|
||||
var entry1 = lookup[path1._id],
|
||||
point = null;
|
||||
containerWinding = 0;
|
||||
var point = null;
|
||||
for (var j = indicesI.length - 1; j >= 0; j--) {
|
||||
if (indicesI[j] < i) {
|
||||
point = point || path1.getInteriorPoint();
|
||||
|
|
@ -10969,7 +10970,7 @@ PathItem.inject(new function() {
|
|||
|
||||
return {
|
||||
_getWinding: function(point, dir, closed) {
|
||||
let curves = this.getCurves();
|
||||
var curves = this.getCurves();
|
||||
return getWinding(point, curves, curves, dir, closed);
|
||||
},
|
||||
|
||||
|
|
|
|||
38
dist/paper-core.min.js
vendored
Normal file
38
dist/paper-core.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
29
dist/paper-full.js
vendored
29
dist/paper-full.js
vendored
|
|
@ -9,7 +9,7 @@
|
|||
*
|
||||
* All rights reserved.
|
||||
*
|
||||
* Date: Fri Dec 13 14:32:31 2019 +0100
|
||||
* Date: Fri Dec 13 16:13:56 2019 +0100
|
||||
*
|
||||
***
|
||||
*
|
||||
|
|
@ -980,8 +980,13 @@ var CollisionDetection = {
|
|||
|
||||
findBoundsCollisions: function(boundsA, boundsB, tolerance,
|
||||
sweepVertical, onlySweepAxisCollisions) {
|
||||
var lo, hi;
|
||||
var binarySearch = function(indices, coordinateValue, coordinate) {
|
||||
var self = !boundsB || boundsA === boundsB,
|
||||
allBounds = self ? boundsA : boundsA.concat(boundsB),
|
||||
countA = boundsA.length,
|
||||
countAll = allBounds.length,
|
||||
lo, hi;
|
||||
|
||||
function binarySearch(indices, coordinateValue, coordinate) {
|
||||
lo = 0;
|
||||
hi = indices.length;
|
||||
while (lo < hi) {
|
||||
|
|
@ -993,12 +998,8 @@ var CollisionDetection = {
|
|||
}
|
||||
}
|
||||
return lo - 1;
|
||||
};
|
||||
}
|
||||
|
||||
var self = !boundsB || boundsA === boundsB,
|
||||
allBounds = self ? boundsA : boundsA.concat(boundsB),
|
||||
countA = boundsA.length,
|
||||
countAll = allBounds.length;
|
||||
var coordP0 = sweepVertical ? 1 : 0,
|
||||
coordP1 = coordP0 + 2,
|
||||
coordS0 = sweepVertical ? 0 : 1,
|
||||
|
|
@ -1014,7 +1015,7 @@ var CollisionDetection = {
|
|||
allCollisions = new Array(countA);
|
||||
for (var i = 0; i < countAll; i++) {
|
||||
var currentIndex = allIndicesByP0[i],
|
||||
currentBounds = allBounds[currentIndex];
|
||||
currentBounds = allBounds[currentIndex],
|
||||
currentOriginalIndex = self ? currentIndex
|
||||
: currentIndex - countA,
|
||||
isCurrentA = currentIndex < countA,
|
||||
|
|
@ -10449,11 +10450,11 @@ PathItem.inject(new function() {
|
|||
clockwise = first.isClockwise();
|
||||
for (var i = 0; i < length; i++) {
|
||||
var path1 = sorted[i],
|
||||
indicesI = collisions[i];
|
||||
indicesI = collisions[i],
|
||||
entry1 = lookup[path1._id],
|
||||
containerWinding = 0;
|
||||
if (indicesI) {
|
||||
var entry1 = lookup[path1._id],
|
||||
point = null;
|
||||
containerWinding = 0;
|
||||
var point = null;
|
||||
for (var j = indicesI.length - 1; j >= 0; j--) {
|
||||
if (indicesI[j] < i) {
|
||||
point = point || path1.getInteriorPoint();
|
||||
|
|
@ -10972,7 +10973,7 @@ PathItem.inject(new function() {
|
|||
|
||||
return {
|
||||
_getWinding: function(point, dir, closed) {
|
||||
let curves = this.getCurves();
|
||||
var curves = this.getCurves();
|
||||
return getWinding(point, curves, curves, dir, closed);
|
||||
},
|
||||
|
||||
|
|
|
|||
39
dist/paper-full.min.js
vendored
Normal file
39
dist/paper-full.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
7341
dist/paper.d.ts
vendored
Normal file
7341
dist/paper.d.ts
vendored
Normal file
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue