mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-01 02:38:43 -05:00
Switch from dist/paper.js to dist/paper-full.js and explain the different versions in the README.
Closes #422.
This commit is contained in:
parent
95bcdac57c
commit
fe064e9cc3
117 changed files with 570 additions and 13184 deletions
12
README.md
12
README.md
|
@ -24,7 +24,15 @@ With Bower installed, simply type this command in your project folder:
|
||||||
|
|
||||||
bower install paper
|
bower install paper
|
||||||
|
|
||||||
Upon execution, you will find a `paper` folder inside the project's `component` folder. For more information on Bower and to learn about its features for dependence tracking, see <http://bower.io/>.
|
Upon execution, you will find a `paper` folder inside the project's `bower_components` folder. For more information on Bower and to learn about its features for dependence tracking, see <http://bower.io/>.
|
||||||
|
|
||||||
|
## Which Version to Use?
|
||||||
|
|
||||||
|
The various distributions come with three different pre-build versions of Paper.js, in minified and normal variants:
|
||||||
|
|
||||||
|
- `paper-full.js` – The full version for the browser, including PaperScript support and Acorn.js
|
||||||
|
- `paper-core.js` – The core version for the browser, without PaperScript support nor Acorn.js. Use this to shave off some bytes when working with JavaScript directly.
|
||||||
|
- `paper-node.js` – The version for Node.js. It is recommended to install this through NPM, see below.
|
||||||
|
|
||||||
## Installing Paper.js for Node.js through NPM
|
## Installing Paper.js for Node.js through NPM
|
||||||
|
|
||||||
|
@ -142,7 +150,7 @@ And to go back to a built library
|
||||||
cd build
|
cd build
|
||||||
./build.sh
|
./build.sh
|
||||||
|
|
||||||
Note that your PaperScripts examples do not need to change, they can simply load `dist/paper.js`, which will always do the right rhing. Note also that `src/load.js` handles both browsers and Node.js, through the handy PrePro library <http://github.com/lehni/prepro.js>.
|
Note that your PaperScripts examples do not need to change, they can keep loading `dist/paper-full.js`, which will always do the right thing. Note also that `src/load.js` handles both browsers and Node.js, through the handy PrePro JS preprocessing library <http://github.com/lehni/prepro.js>.
|
||||||
|
|
||||||
### Testing
|
### Testing
|
||||||
|
|
||||||
|
|
|
@ -16,7 +16,7 @@
|
||||||
"vector", "graphic", "graphics", "2d", "geometry", "bezier", "curve",
|
"vector", "graphic", "graphics", "2d", "geometry", "bezier", "curve",
|
||||||
"curves", "path", "paths", "canvas", "svg", "paper", "paper.js"
|
"curves", "path", "paths", "canvas", "svg", "paper", "paper.js"
|
||||||
],
|
],
|
||||||
"main": "dist/paper.js",
|
"main": "dist/paper-full.js",
|
||||||
"ignore": [
|
"ignore": [
|
||||||
"build",
|
"build",
|
||||||
"components",
|
"components",
|
||||||
|
|
|
@ -33,10 +33,3 @@ fi
|
||||||
./preprocess.sh $MODE ../src/paper.js "-i '../src/constants.js'" ../dist/paper-full.js
|
./preprocess.sh $MODE ../src/paper.js "-i '../src/constants.js'" ../dist/paper-full.js
|
||||||
./preprocess.sh $MODE ../src/paper.js "-o '{ \"paperScript\": false, \"palette\": false }' -i '../src/constants.js'" ../dist/paper-core.js
|
./preprocess.sh $MODE ../src/paper.js "-o '{ \"paperScript\": false, \"palette\": false }' -i '../src/constants.js'" ../dist/paper-core.js
|
||||||
./preprocess.sh $MODE ../src/paper.js "-o '{ \"environment\": \"node\", \"legacy\": false }' -i '../src/constants.js'" ../dist/paper-node.js
|
./preprocess.sh $MODE ../src/paper.js "-o '{ \"environment\": \"node\", \"legacy\": false }' -i '../src/constants.js'" ../dist/paper-node.js
|
||||||
|
|
||||||
# Remove the existing file and copy paper-full.js to paper.js now
|
|
||||||
if [ -f ../dist/paper.js ]
|
|
||||||
then
|
|
||||||
rm ../dist/paper.js
|
|
||||||
fi
|
|
||||||
cp ../dist/paper-full.js ../dist/paper.js
|
|
||||||
|
|
|
@ -10,13 +10,13 @@
|
||||||
#
|
#
|
||||||
# All rights reserved.
|
# All rights reserved.
|
||||||
|
|
||||||
# This script simply copies src/load.js to dist/paper.js and dist/paper-node.js,
|
# This script simply creates symbolic links to src/load.js from
|
||||||
# which loads the library from separate sources through PrePro both in the
|
# dist/paper-full.js and dist/paper-node.js, which loads the library from
|
||||||
# browser and in Node.js.
|
# separate sources through PrePro both in the browser and in Node.js.
|
||||||
|
|
||||||
if [ -f ../dist/paper.js ]
|
if [ -f ../dist/paper-full.js ]
|
||||||
then
|
then
|
||||||
rm ../dist/paper.js
|
rm ../dist/paper-full.js
|
||||||
fi
|
fi
|
||||||
|
|
||||||
if [ -f ../dist/paper-node.js ]
|
if [ -f ../dist/paper-node.js ]
|
||||||
|
@ -24,5 +24,5 @@ then
|
||||||
rm ../dist/paper-node.js
|
rm ../dist/paper-node.js
|
||||||
fi
|
fi
|
||||||
|
|
||||||
cp ../src/load.js ../dist/paper.js
|
ln -s ../src/load.js ../dist/paper-full.js
|
||||||
cp ../src/load.js ../dist/paper-node.js
|
ln -s ../src/load.js ../dist/paper-node.js
|
||||||
|
|
|
@ -29,9 +29,6 @@ cp $BASE/dist/paper-core.js dist
|
||||||
cp $BASE/dist/paper-core.min.js dist
|
cp $BASE/dist/paper-core.min.js dist
|
||||||
# Copy examples over
|
# Copy examples over
|
||||||
cp -r $BASE/examples .
|
cp -r $BASE/examples .
|
||||||
# Replace "dist/paper.js" with "dist/paper-full.js" in examples
|
|
||||||
# (command taken from http://stackoverflow.com/questions/1583219/awk-sed-how-to-do-a-recursive-find-replace-of-a-string)
|
|
||||||
find ./examples -type f -name "*.html" -print0 | xargs -0 sed -i '' 's/dist\/paper\.js/dist\/paper-full\.js/g'
|
|
||||||
# Copy docs over
|
# Copy docs over
|
||||||
cp -r $BASE/dist/docs .
|
cp -r $BASE/dist/docs .
|
||||||
# Zip the whole thing
|
# Zip the whole thing
|
||||||
|
|
|
@ -8,5 +8,5 @@
|
||||||
"vector", "graphic", "graphics", "2d", "geometry", "bezier", "curve",
|
"vector", "graphic", "graphics", "2d", "geometry", "bezier", "curve",
|
||||||
"curves", "path", "paths", "canvas", "svg", "paper", "paper.js"
|
"curves", "path", "paths", "canvas", "svg", "paper", "paper.js"
|
||||||
],
|
],
|
||||||
"scripts": ["./dist/paper.js"]
|
"scripts": ["./dist/paper-full.js"]
|
||||||
}
|
}
|
12874
dist/paper.js
vendored
12874
dist/paper.js
vendored
File diff suppressed because one or more lines are too long
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Animated Star</title>
|
<title>Animated Star</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
var layer = project.activeLayer;
|
var layer = project.activeLayer;
|
||||||
|
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Candy Crash</title>
|
<title>Candy Crash</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
// kynd.info 2014
|
// kynd.info 2014
|
||||||
|
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Extruded</title>
|
<title>Extruded</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
var lineGroup = new Group();
|
var lineGroup = new Group();
|
||||||
var lineCount = 100;
|
var lineCount = 100;
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Lines</title>
|
<title>Lines</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
var amount = 45;
|
var amount = 45;
|
||||||
for (var i = 0; i < amount; i++) {
|
for (var i = 0; i < amount; i++) {
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Smoothing</title>
|
<title>Smoothing</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
var width, height, center;
|
var width, height, center;
|
||||||
var points = 10;
|
var points = 10;
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Space</title>
|
<title>Space</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
// The amount of symbol we want to place;
|
// The amount of symbol we want to place;
|
||||||
var count = 150;
|
var count = 150;
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Space</title>
|
<title>Space</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
// The amount of symbol we want to place;
|
// The amount of symbol we want to place;
|
||||||
var count = 150;
|
var count = 150;
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||||
<title>Paperoids</title>
|
<title>Paperoids</title>
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
|
|
||||||
//
|
//
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Palette</title>
|
<title>Palette</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
var values = {
|
var values = {
|
||||||
number: 1,
|
number: 1,
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Circle Testing</title>
|
<title>Circle Testing</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas1">
|
<script type="text/paperscript" canvas="canvas1">
|
||||||
var topLeft = new Point(200, 200);
|
var topLeft = new Point(200, 200);
|
||||||
var size = new Size(150, 100);
|
var size = new Size(150, 100);
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Compound Path</title>
|
<title>Compound Path</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas1">
|
<script type="text/paperscript" canvas="canvas1">
|
||||||
project.currentStyle.fillColor = 'black';
|
project.currentStyle.fillColor = 'black';
|
||||||
var path1 = new Path.Rectangle([200, 200], [100, 100]);
|
var path1 = new Path.Rectangle([200, 200], [100, 100]);
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Empty Path Testing</title>
|
<title>Empty Path Testing</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas1">
|
<script type="text/paperscript" canvas="canvas1">
|
||||||
var path = new Path();
|
var path = new Path();
|
||||||
path.strokeColor = 'black';
|
path.strokeColor = 'black';
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Gradients</title>
|
<title>Gradients</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas1">
|
<script type="text/paperscript" canvas="canvas1">
|
||||||
var path = new Path.Circle(view.center, view.bounds.height * 0.4);
|
var path = new Path.Circle(view.center, view.bounds.height * 0.4);
|
||||||
path.fillColor = {
|
path.fillColor = {
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Group Transform</title>
|
<title>Group Transform</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas1">
|
<script type="text/paperscript" canvas="canvas1">
|
||||||
var circle1 = new Path.Circle(new Point(100, 100), 50);
|
var circle1 = new Path.Circle(new Point(100, 100), 50);
|
||||||
circle1.fillColor = 'red';
|
circle1.fillColor = 'red';
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Line Testing</title>
|
<title>Line Testing</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas1">
|
<script type="text/paperscript" canvas="canvas1">
|
||||||
var x1 = 5,
|
var x1 = 5,
|
||||||
x2 = 45,
|
x2 = 45,
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Random Path Testing</title>
|
<title>Random Path Testing</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas1">
|
<script type="text/paperscript" canvas="canvas1">
|
||||||
var center = new Point(100, 100);
|
var center = new Point(100, 100);
|
||||||
var sides = 3;
|
var sides = 3;
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Raster</title>
|
<title>Raster</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas1">
|
<script type="text/paperscript" canvas="canvas1">
|
||||||
var raster = new Raster('lenna'); // new Raster('http://www.lps.usp.br/~hae/apostila/imagens/lenna.jpg');
|
var raster = new Raster('lenna'); // new Raster('http://www.lps.usp.br/~hae/apostila/imagens/lenna.jpg');
|
||||||
raster.onLoad = function() {
|
raster.onLoad = function() {
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Rectangle Testing</title>
|
<title>Rectangle Testing</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas1">
|
<script type="text/paperscript" canvas="canvas1">
|
||||||
var point1 = new Point(10, 10);
|
var point1 = new Point(10, 10);
|
||||||
var size1 = new Size(50, 50);
|
var size1 = new Size(50, 50);
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Rotated Primitives</title>
|
<title>Rotated Primitives</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas1">
|
<script type="text/paperscript" canvas="canvas1">
|
||||||
// This "arbitrary" shape triggered rectangles in the original code,
|
// This "arbitrary" shape triggered rectangles in the original code,
|
||||||
// since point2 is as far from point0 as point3 is from point1.
|
// since point2 is as far from point0 as point3 is from point1.
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Symbols</title>
|
<title>Symbols</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas1">
|
<script type="text/paperscript" canvas="canvas1">
|
||||||
var path = new Path.Ellipse({
|
var path = new Path.Ellipse({
|
||||||
from: [10, 10],
|
from: [10, 10],
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Symbols</title>
|
<title>Symbols</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas1">
|
<script type="text/paperscript" canvas="canvas1">
|
||||||
var ellipse = new Shape.Ellipse({
|
var ellipse = new Shape.Ellipse({
|
||||||
from: [10, 10],
|
from: [10, 10],
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Symbols</title>
|
<title>Symbols</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas1">
|
<script type="text/paperscript" canvas="canvas1">
|
||||||
var ellipse = new Path.Ellipse({
|
var ellipse = new Path.Ellipse({
|
||||||
from: [0, 0],
|
from: [0, 0],
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Text Testing</title>
|
<title>Text Testing</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas1">
|
<script type="text/paperscript" canvas="canvas1">
|
||||||
var text = new PointText(new Point(50, 100));
|
var text = new PointText(new Point(50, 100));
|
||||||
text.fillColor = 'black';
|
text.fillColor = 'black';
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Transform Testing</title>
|
<title>Transform Testing</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas1">
|
<script type="text/paperscript" canvas="canvas1">
|
||||||
var circlePath = new Path.Circle(new Point(280, 100), 25);
|
var circlePath = new Path.Circle(new Point(280, 100), 25);
|
||||||
circlePath.strokeColor = 'black';
|
circlePath.strokeColor = 'black';
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Rectangle Testing</title>
|
<title>Rectangle Testing</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas1">
|
<script type="text/paperscript" canvas="canvas1">
|
||||||
var path = new Path.Rectangle(new Point(50, 50), new Size(100, 50));
|
var path = new Path.Rectangle(new Point(50, 50), new Size(100, 50));
|
||||||
path.style = {
|
path.style = {
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Bouncing Balls</title>
|
<title>Bouncing Balls</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
var Ball = function(point, vector) {
|
var Ball = function(point, vector) {
|
||||||
if (!vector || vector.isZero()) {
|
if (!vector || vector.isZero()) {
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Chain</title>
|
<title>Chain</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
// Adapted from the following Processing example:
|
// Adapted from the following Processing example:
|
||||||
// http://processing.org/learning/topics/follow3.html
|
// http://processing.org/learning/topics/follow3.html
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Division Raster</title>
|
<title>Division Raster</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
// Based on 'JPEG Raster' by Jonathan Puckey:
|
// Based on 'JPEG Raster' by Jonathan Puckey:
|
||||||
// http://www.flickr.com/photos/puckey/3179779686/in/photostream/
|
// http://www.flickr.com/photos/puckey/3179779686/in/photostream/
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Future Splash</title>
|
<title>Future Splash</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
// Code ported to Paper.js from http://the389.com/9/1/
|
// Code ported to Paper.js from http://the389.com/9/1/
|
||||||
// with permission.
|
// with permission.
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Hit Testing</title>
|
<title>Hit Testing</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
var values = {
|
var values = {
|
||||||
paths: 50,
|
paths: 50,
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Interactive Tiger</title>
|
<title>Interactive Tiger</title>
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
// Import the tiger svg:
|
// Import the tiger svg:
|
||||||
project.importSVG(document.getElementById('svg'));
|
project.importSVG(document.getElementById('svg'));
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Meta Balls</title>
|
<title>Meta Balls</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
// Ported from original Metaball script by SATO Hiroyuki
|
// Ported from original Metaball script by SATO Hiroyuki
|
||||||
// http://park12.wakwak.com/~shp/lc/et/en_aics_script.html
|
// http://park12.wakwak.com/~shp/lc/et/en_aics_script.html
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Nyan Rainbow</title>
|
<title>Nyan Rainbow</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/javascript" src="http://paperjs.org/assets/mediaelement/mediaelement.js"></script>
|
<script type="text/javascript" src="http://paperjs.org/assets/mediaelement/mediaelement.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
// A tribute to Nyan Cat http://www.youtube.com/watch?v=QH2-TGUlwu4
|
// A tribute to Nyan Cat http://www.youtube.com/watch?v=QH2-TGUlwu4
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Path Intersections</title>
|
<title>Path Intersections</title>
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
var words = project.importSVG(document.getElementById('svg'));
|
var words = project.importSVG(document.getElementById('svg'));
|
||||||
words.fillColor = null;
|
words.fillColor = null;
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Q*bertify</title>
|
<title>Q*bertify</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
// Please note: dragging and dropping images only works for
|
// Please note: dragging and dropping images only works for
|
||||||
// certain browsers when serving this script online:
|
// certain browsers when serving this script online:
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Radial Rainbows</title>
|
<title>Radial Rainbows</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
var point = view.center;
|
var point = view.center;
|
||||||
|
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Rounded Rectangles</title>
|
<title>Rounded Rectangles</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
var mousePoint = view.center;
|
var mousePoint = view.center;
|
||||||
var amount = 25;
|
var amount = 25;
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Erik Liked To Dance</title>
|
<title>Erik Liked To Dance</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
var leftPath = new Path({
|
var leftPath = new Path({
|
||||||
strokeColor: 'red',
|
strokeColor: 'red',
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Simplify</title>
|
<title>Simplify</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
var path;
|
var path;
|
||||||
|
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Spiral Raster</title>
|
<title>Spiral Raster</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
// Please note: dragging and dropping images only works for
|
// Please note: dragging and dropping images only works for
|
||||||
// certain browsers when serving this script online:
|
// certain browsers when serving this script online:
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Tadpoles</title>
|
<title>Tadpoles</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
// Adapted from Flocking Processing example by Daniel Schiffman:
|
// Adapted from Flocking Processing example by Daniel Schiffman:
|
||||||
// http://processing.org/learning/topics/flocking.html
|
// http://processing.org/learning/topics/flocking.html
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Voronoi</title>
|
<title>Voronoi</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/javascript" src="http://jonathanpuckey.com/static/rhill-voronoi-core.js"></script>
|
<script type="text/javascript" src="http://jonathanpuckey.com/static/rhill-voronoi-core.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
var voronoi = new Voronoi();
|
var voronoi = new Voronoi();
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Phyllotaxis Raster</title>
|
<title>Phyllotaxis Raster</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
// Example inspired by: 'Phyllotactic Spirals' by Ken Frederick
|
// Example inspired by: 'Phyllotactic Spirals' by Ken Frederick
|
||||||
// http://scriptographer.org/scripts/general-scripts/phyllotactic-spirals/
|
// http://scriptographer.org/scripts/general-scripts/phyllotactic-spirals/
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Raster</title>
|
<title>Raster</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
// http://en.wikipedia.org/wiki/Lenna
|
// http://en.wikipedia.org/wiki/Lenna
|
||||||
// Load from Server:
|
// Load from Server:
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Rotation Raster</title>
|
<title>Rotation Raster</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
var raster = new Raster('lenna');
|
var raster = new Raster('lenna');
|
||||||
var size = new Size(50, 50);
|
var size = new Size(50, 50);
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Circle Testing</title>
|
<title>Circle Testing</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
var topLeft = new Point(200, 200);
|
var topLeft = new Point(200, 200);
|
||||||
var size = new Size(150, 100);
|
var size = new Size(150, 100);
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Compound Path</title>
|
<title>Compound Path</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
project.currentStyle.fillColor = 'black';
|
project.currentStyle.fillColor = 'black';
|
||||||
var path1 = new Path.Rectangle([200, 200], [100, 100]);
|
var path1 = new Path.Rectangle([200, 200], [100, 100]);
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Empty Path Testing</title>
|
<title>Empty Path Testing</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
var path = new Path();
|
var path = new Path();
|
||||||
path.strokeColor = 'black';
|
path.strokeColor = 'black';
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Gradients</title>
|
<title>Gradients</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
var stops = [new Color(1, 1, 0, 0), 'red', 'black'];
|
var stops = [new Color(1, 1, 0, 0), 'red', 'black'];
|
||||||
|
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Group Transform</title>
|
<title>Group Transform</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
var circle1 = new Path.Circle(new Point(100, 100), 50);
|
var circle1 = new Path.Circle(new Point(100, 100), 50);
|
||||||
circle1.fillColor = 'red';
|
circle1.fillColor = 'red';
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Line Testing</title>
|
<title>Line Testing</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
var x1 = 5,
|
var x1 = 5,
|
||||||
x2 = 45,
|
x2 = 45,
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Random Path Testing</title>
|
<title>Random Path Testing</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
var center = new Point(100, 100);
|
var center = new Point(100, 100);
|
||||||
var sides = 3;
|
var sides = 3;
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Raster</title>
|
<title>Raster</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
var raster = new Raster('lenna');
|
var raster = new Raster('lenna');
|
||||||
raster.position = view.center;
|
raster.position = view.center;
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Rectangle Testing</title>
|
<title>Rectangle Testing</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
var point1 = new Point(10, 10);
|
var point1 = new Point(10, 10);
|
||||||
var size1 = new Size(50, 50);
|
var size1 = new Size(50, 50);
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Rotated Primitives</title>
|
<title>Rotated Primitives</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
// This "arbitrary" shape triggered rectangles in the original code,
|
// This "arbitrary" shape triggered rectangles in the original code,
|
||||||
// since point2 is as far from point0 as point3 is from point1.
|
// since point2 is as far from point0 as point3 is from point1.
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Shapes</title>
|
<title>Shapes</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
var rect = new Shape.Rectangle({
|
var rect = new Shape.Rectangle({
|
||||||
point: [200, 100],
|
point: [200, 100],
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Symbols</title>
|
<title>Symbols</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
var ellipse = new Path.Ellipse({
|
var ellipse = new Path.Ellipse({
|
||||||
from: [0, 0],
|
from: [0, 0],
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Text Testing</title>
|
<title>Text Testing</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
var text = new PointText(new Point(50, 100));
|
var text = new PointText(new Point(50, 100));
|
||||||
text.fillColor = 'black';
|
text.fillColor = 'black';
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Transform Testing</title>
|
<title>Transform Testing</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
var circlePath = new Path.Circle(new Point(280, 100), 25);
|
var circlePath = new Path.Circle(new Point(280, 100), 25);
|
||||||
circlePath.strokeColor = 'black';
|
circlePath.strokeColor = 'black';
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Rectangle Testing</title>
|
<title>Rectangle Testing</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
var path = new Path.Rectangle(new Point(50, 50), new Size(100, 50));
|
var path = new Path.Rectangle(new Point(50, 50), new Size(100, 50));
|
||||||
path.style = {
|
path.style = {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Arcs Testing</title>
|
<title>Arcs Testing</title>
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
project.importSVG(document.getElementById('svg'));
|
project.importSVG(document.getElementById('svg'));
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Butterfly</title>
|
<title>Butterfly</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
var start = Date.now();
|
var start = Date.now();
|
||||||
project.importSVG(document.getElementById('svg'));
|
project.importSVG(document.getElementById('svg'));
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Circle and Ellipse Testing</title>
|
<title>Circle and Ellipse Testing</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
project.importSVG(document.getElementById('svg'));
|
project.importSVG(document.getElementById('svg'));
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Clipping</title>
|
<title>Clipping</title>
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
project.importSVG(document.getElementById('Layer_1'));
|
project.importSVG(document.getElementById('Layer_1'));
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Import From File</title>
|
<title>Import From File</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
var file = document.getElementById('file');
|
var file = document.getElementById('file');
|
||||||
file.addEventListener('change', function (event) {
|
file.addEventListener('change', function (event) {
|
||||||
|
|
138
examples/SVG Import/Gradient.html
Normal file
138
examples/SVG Import/Gradient.html
Normal file
|
@ -0,0 +1,138 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Gradients</title>
|
||||||
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
|
<script type="text/paperscript" canvas="canvas">
|
||||||
|
project.importSVG(document.getElementById('svg'));
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
version="1.1"
|
||||||
|
width="210mm"
|
||||||
|
height="297mm"
|
||||||
|
id="svg">
|
||||||
|
<defs
|
||||||
|
id="defs1903">
|
||||||
|
<linearGradient
|
||||||
|
id="linearGradient3794">
|
||||||
|
<stop
|
||||||
|
id="stop3796"
|
||||||
|
style="stop-color:#ff5555;stop-opacity:1"
|
||||||
|
offset="0" />
|
||||||
|
<stop
|
||||||
|
id="stop3808"
|
||||||
|
style="stop-color:#522ba8;stop-opacity:1"
|
||||||
|
offset="0.18868095" />
|
||||||
|
<stop
|
||||||
|
id="stop3802"
|
||||||
|
style="stop-color:#ff00ff;stop-opacity:1"
|
||||||
|
offset="0.38376093" />
|
||||||
|
<stop
|
||||||
|
id="stop3804"
|
||||||
|
style="stop-color:#ff6600;stop-opacity:1"
|
||||||
|
offset="0.57983696" />
|
||||||
|
<stop
|
||||||
|
id="stop3806"
|
||||||
|
style="stop-color:#28170b;stop-opacity:1"
|
||||||
|
offset="0.80833077" />
|
||||||
|
<stop
|
||||||
|
id="stop3798"
|
||||||
|
style="stop-color:#ff5555;stop-opacity:0"
|
||||||
|
offset="1" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient
|
||||||
|
id="linearGradient3770">
|
||||||
|
<stop
|
||||||
|
id="stop3772"
|
||||||
|
style="stop-color:#d1ab00;stop-opacity:1"
|
||||||
|
offset="0" />
|
||||||
|
<stop
|
||||||
|
id="stop3788"
|
||||||
|
style="stop-color:#502d16;stop-opacity:1"
|
||||||
|
offset="0.0625" />
|
||||||
|
<stop
|
||||||
|
id="stop3786"
|
||||||
|
style="stop-color:#ff5555;stop-opacity:1"
|
||||||
|
offset="0.125" />
|
||||||
|
<stop
|
||||||
|
id="stop3784"
|
||||||
|
style="stop-color:#00ff00;stop-opacity:1"
|
||||||
|
offset="0.54704088" />
|
||||||
|
<stop
|
||||||
|
id="stop3782"
|
||||||
|
style="stop-color:#ffff00;stop-opacity:1"
|
||||||
|
offset="0.79772007" />
|
||||||
|
<stop
|
||||||
|
id="stop3774"
|
||||||
|
style="stop-color:#2b1100;stop-opacity:1"
|
||||||
|
offset="1" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient
|
||||||
|
id="linearGradient3760">
|
||||||
|
<stop
|
||||||
|
id="stop3762"
|
||||||
|
style="stop-color:#ff6600;stop-opacity:1"
|
||||||
|
offset="0" />
|
||||||
|
<stop
|
||||||
|
id="stop3764"
|
||||||
|
style="stop-color:#2b1100;stop-opacity:1"
|
||||||
|
offset="1" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient
|
||||||
|
x1="443.22928"
|
||||||
|
y1="215.30028"
|
||||||
|
x2="867.58954"
|
||||||
|
y2="229.58598"
|
||||||
|
id="linearGradient3768"
|
||||||
|
xlink:href="#linearGradient3760"
|
||||||
|
gradientUnits="userSpaceOnUse" />
|
||||||
|
<linearGradient
|
||||||
|
x1="443.22928"
|
||||||
|
y1="215.30028"
|
||||||
|
x2="867.58954"
|
||||||
|
y2="229.58598"
|
||||||
|
id="linearGradient3776"
|
||||||
|
xlink:href="#linearGradient3770"
|
||||||
|
gradientUnits="userSpaceOnUse" />
|
||||||
|
<linearGradient
|
||||||
|
x1="454.28571"
|
||||||
|
y1="-7.6378121"
|
||||||
|
x2="591.42859"
|
||||||
|
y2="480.93362"
|
||||||
|
id="linearGradient3800"
|
||||||
|
xlink:href="#linearGradient3794"
|
||||||
|
gradientUnits="userSpaceOnUse" />
|
||||||
|
</defs>
|
||||||
|
<metadata
|
||||||
|
id="metadata1906">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title></dc:title>
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<g
|
||||||
|
id="layer1">
|
||||||
|
<path
|
||||||
|
d="m 325.71425,440.93359 -24.52516,-67.66103 -63.02035,-34.75536 5.11537,-71.78671 -43.43569,-57.38329 33.87141,-63.49982 -16.34058,-70.089121 56.77078,-44.233226 13.57994,-70.675915 69.85396,-17.318309 41.15239,-59.042199 70.85875,12.5911 61.6092,-37.19955 59.61144,40.3234 71.41322,-8.92476 38.05675,61.08341 68.86926,20.893202 9.92171,71.281547 54.41716,47.098539 -19.92888,69.154452 30.55585,65.16011 -46.33359,55.06994 1.41115,71.9549 -64.7268,31.46332 -27.97755,66.30805 -71.92816,2.4164 -52.52867,49.19593 -66.69248,-27.04832 -67.99711,23.57737 -49.92508,-51.83614 z"
|
||||||
|
transform="translate(-125.71429,194.28571)"
|
||||||
|
id="path3792"
|
||||||
|
style="fill:url(#linearGradient3800);fill-opacity:1" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
<canvas id="canvas" width="300" height="600"></canvas>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -3,7 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Gradients</title>
|
<title>Gradients</title>
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
project.importSVG(document.getElementById('svg'));
|
project.importSVG(document.getElementById('svg'));
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Inkscape</title>
|
<title>Inkscape</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
var start = Date.now();
|
var start = Date.now();
|
||||||
project.importSVG(document.getElementById('svg2'));
|
project.importSVG(document.getElementById('svg2'));
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Line Testing</title>
|
<title>Line Testing</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
project.importSVG(document.getElementById('svg'));
|
project.importSVG(document.getElementById('svg'));
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Gradients</title>
|
<title>Gradients</title>
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
project.importSVG(document.getElementById('Layer_1'));
|
project.importSVG(document.getElementById('Layer_1'));
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Multiple Paths Test</title>
|
<title>Multiple Paths Test</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
project.importSVG(document.getElementById('svg'));
|
project.importSVG(document.getElementById('svg'));
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Multiple Paths Test 2</title>
|
<title>Multiple Paths Test 2</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
project.importSVG(document.getElementById('svg'));
|
project.importSVG(document.getElementById('svg'));
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Nested Groups Test</title>
|
<title>Nested Groups Test</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
project.importSVG(document.getElementById('svg'));
|
project.importSVG(document.getElementById('svg'));
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Rect Testing</title>
|
<title>Rect Testing</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
project.importSVG(document.getElementById('svg'));
|
project.importSVG(document.getElementById('svg'));
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Rect Testing</title>
|
<title>Rect Testing</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
var group = project.importSVG(document.getElementById('svg'));
|
var group = project.importSVG(document.getElementById('svg'));
|
||||||
console.log(JSON.stringify(group.children[0].data));
|
console.log(JSON.stringify(group.children[0].data));
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Multiple Paths Test 2</title>
|
<title>Multiple Paths Test 2</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
project.importSVG(document.getElementById('svg'));
|
project.importSVG(document.getElementById('svg'));
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Stroke Bounds</title>
|
<title>Stroke Bounds</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
project.importSVG(document.getElementById('svg'));
|
project.importSVG(document.getElementById('svg'));
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Text Testing</title>
|
<title>Text Testing</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
project.importSVG(document.getElementById('svg'));
|
project.importSVG(document.getElementById('svg'));
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Tiger</title>
|
<title>Tiger</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
var start = Date.now();
|
var start = Date.now();
|
||||||
project.importSVG(document.getElementById('svg'));
|
project.importSVG(document.getElementById('svg'));
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Transform Testing</title>
|
<title>Transform Testing</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
project.importSVG(document.getElementById('svg'));
|
project.importSVG(document.getElementById('svg'));
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Viewbox 1</title>
|
<title>Viewbox 1</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
project.importSVG(document.getElementById('svg'));
|
project.importSVG(document.getElementById('svg'));
|
||||||
</script>
|
</script>
|
||||||
|
|
124
examples/SVG Import/gradient.svg
Normal file
124
examples/SVG Import/gradient.svg
Normal file
|
@ -0,0 +1,124 @@
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
version="1.1"
|
||||||
|
width="210mm"
|
||||||
|
height="297mm"
|
||||||
|
id="svg1901">
|
||||||
|
<defs
|
||||||
|
id="defs1903">
|
||||||
|
<linearGradient
|
||||||
|
id="linearGradient3794">
|
||||||
|
<stop
|
||||||
|
id="stop3796"
|
||||||
|
style="stop-color:#ff5555;stop-opacity:1"
|
||||||
|
offset="0" />
|
||||||
|
<stop
|
||||||
|
id="stop3808"
|
||||||
|
style="stop-color:#522ba8;stop-opacity:1"
|
||||||
|
offset="0.18868095" />
|
||||||
|
<stop
|
||||||
|
id="stop3802"
|
||||||
|
style="stop-color:#ff00ff;stop-opacity:1"
|
||||||
|
offset="0.38376093" />
|
||||||
|
<stop
|
||||||
|
id="stop3804"
|
||||||
|
style="stop-color:#ff6600;stop-opacity:1"
|
||||||
|
offset="0.57983696" />
|
||||||
|
<stop
|
||||||
|
id="stop3806"
|
||||||
|
style="stop-color:#28170b;stop-opacity:1"
|
||||||
|
offset="0.80833077" />
|
||||||
|
<stop
|
||||||
|
id="stop3798"
|
||||||
|
style="stop-color:#ff5555;stop-opacity:0"
|
||||||
|
offset="1" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient
|
||||||
|
id="linearGradient3770">
|
||||||
|
<stop
|
||||||
|
id="stop3772"
|
||||||
|
style="stop-color:#d1ab00;stop-opacity:1"
|
||||||
|
offset="0" />
|
||||||
|
<stop
|
||||||
|
id="stop3788"
|
||||||
|
style="stop-color:#502d16;stop-opacity:1"
|
||||||
|
offset="0.0625" />
|
||||||
|
<stop
|
||||||
|
id="stop3786"
|
||||||
|
style="stop-color:#ff5555;stop-opacity:1"
|
||||||
|
offset="0.125" />
|
||||||
|
<stop
|
||||||
|
id="stop3784"
|
||||||
|
style="stop-color:#00ff00;stop-opacity:1"
|
||||||
|
offset="0.54704088" />
|
||||||
|
<stop
|
||||||
|
id="stop3782"
|
||||||
|
style="stop-color:#ffff00;stop-opacity:1"
|
||||||
|
offset="0.79772007" />
|
||||||
|
<stop
|
||||||
|
id="stop3774"
|
||||||
|
style="stop-color:#2b1100;stop-opacity:1"
|
||||||
|
offset="1" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient
|
||||||
|
id="linearGradient3760">
|
||||||
|
<stop
|
||||||
|
id="stop3762"
|
||||||
|
style="stop-color:#ff6600;stop-opacity:1"
|
||||||
|
offset="0" />
|
||||||
|
<stop
|
||||||
|
id="stop3764"
|
||||||
|
style="stop-color:#2b1100;stop-opacity:1"
|
||||||
|
offset="1" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient
|
||||||
|
x1="443.22928"
|
||||||
|
y1="215.30028"
|
||||||
|
x2="867.58954"
|
||||||
|
y2="229.58598"
|
||||||
|
id="linearGradient3768"
|
||||||
|
xlink:href="#linearGradient3760"
|
||||||
|
gradientUnits="userSpaceOnUse" />
|
||||||
|
<linearGradient
|
||||||
|
x1="443.22928"
|
||||||
|
y1="215.30028"
|
||||||
|
x2="867.58954"
|
||||||
|
y2="229.58598"
|
||||||
|
id="linearGradient3776"
|
||||||
|
xlink:href="#linearGradient3770"
|
||||||
|
gradientUnits="userSpaceOnUse" />
|
||||||
|
<linearGradient
|
||||||
|
x1="454.28571"
|
||||||
|
y1="-7.6378121"
|
||||||
|
x2="591.42859"
|
||||||
|
y2="480.93362"
|
||||||
|
id="linearGradient3800"
|
||||||
|
xlink:href="#linearGradient3794"
|
||||||
|
gradientUnits="userSpaceOnUse" />
|
||||||
|
</defs>
|
||||||
|
<metadata
|
||||||
|
id="metadata1906">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title></dc:title>
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<g
|
||||||
|
id="layer1">
|
||||||
|
<path
|
||||||
|
d="m 325.71425,440.93359 -24.52516,-67.66103 -63.02035,-34.75536 5.11537,-71.78671 -43.43569,-57.38329 33.87141,-63.49982 -16.34058,-70.089121 56.77078,-44.233226 13.57994,-70.675915 69.85396,-17.318309 41.15239,-59.042199 70.85875,12.5911 61.6092,-37.19955 59.61144,40.3234 71.41322,-8.92476 38.05675,61.08341 68.86926,20.893202 9.92171,71.281547 54.41716,47.098539 -19.92888,69.154452 30.55585,65.16011 -46.33359,55.06994 1.41115,71.9549 -64.7268,31.46332 -27.97755,66.30805 -71.92816,2.4164 -52.52867,49.19593 -66.69248,-27.04832 -67.99711,23.57737 -49.92508,-51.83614 z"
|
||||||
|
transform="translate(-125.71429,194.28571)"
|
||||||
|
id="path3792"
|
||||||
|
style="fill:url(#linearGradient3800);fill-opacity:1" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 3.8 KiB |
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Arcs</title>
|
<title>Arcs</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
var values = {
|
var values = {
|
||||||
points: 20,
|
points: 20,
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>BlendModes</title>
|
<title>BlendModes</title>
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
var stops = [];
|
var stops = [];
|
||||||
for (var i = 0; i < 6; i++)
|
for (var i = 0; i < 6; i++)
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>Boolean Study</title>
|
<title>Boolean Study</title>
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
paper.install(window);
|
paper.install(window);
|
||||||
|
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Compound Path</title>
|
<title>Compound Path</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
project.currentStyle.fillColor = 'black';
|
project.currentStyle.fillColor = 'black';
|
||||||
var path1 = new Path.Rectangle([200, 200], [100, 100]);
|
var path1 = new Path.Rectangle([200, 200], [100, 100]);
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Curve Time Parameterization</title>
|
<title>Curve Time Parameterization</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
var path = new Path();
|
var path = new Path();
|
||||||
path.moveTo(200, 200);
|
path.moveTo(200, 200);
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>HslColor</title>
|
<title>HslColor</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
var steps = {
|
var steps = {
|
||||||
hue: 100,
|
hue: 100,
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Path Structure</title>
|
<title>Path Structure</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
var y = view.size.height / 2;
|
var y = view.size.height / 2;
|
||||||
var width = view.size.width;
|
var width = view.size.width;
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Resize</title>
|
<title>Resize</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
var redPath = new Path.Circle({
|
var redPath = new Path.Circle({
|
||||||
center: view.center,
|
center: view.center,
|
||||||
|
|
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue