mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2024-12-28 17:02:24 -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:
Jürg Lehni
parent
95bcdac57c
commit
fe064e9cc3
117 changed files with 570 additions and 13184 deletions
14
README.md
14
README.md
|
|
@ -24,7 +24,15 @@ With Bower installed, simply type this command in your project folder:
|
|||
|
||||
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
|
||||
|
||||
|
|
@ -50,7 +58,7 @@ Also, whenever you would like to update the modules, you will need to execute:
|
|||
|
||||
You might also need these additional packages if you don't usually build from c++ sources:
|
||||
|
||||
sudo apt-get install build-essential libssl-dev libjpeg8-dev libgif-dev
|
||||
sudo apt-get install build-essential libssl-dev libjpeg8-dev libgif-dev
|
||||
|
||||
**Ater Cairo has been installed:**
|
||||
|
||||
|
|
@ -142,7 +150,7 @@ And to go back to a built library
|
|||
cd build
|
||||
./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
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
"vector", "graphic", "graphics", "2d", "geometry", "bezier", "curve",
|
||||
"curves", "path", "paths", "canvas", "svg", "paper", "paper.js"
|
||||
],
|
||||
"main": "dist/paper.js",
|
||||
"main": "dist/paper-full.js",
|
||||
"ignore": [
|
||||
"build",
|
||||
"components",
|
||||
|
|
|
|||
|
|
@ -32,11 +32,4 @@ fi
|
|||
|
||||
./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 '{ \"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
|
||||
./preprocess.sh $MODE ../src/paper.js "-o '{ \"environment\": \"node\", \"legacy\": false }' -i '../src/constants.js'" ../dist/paper-node.js
|
||||
|
|
|
|||
|
|
@ -10,13 +10,13 @@
|
|||
#
|
||||
# All rights reserved.
|
||||
|
||||
# This script simply copies src/load.js to dist/paper.js and dist/paper-node.js,
|
||||
# which loads the library from separate sources through PrePro both in the
|
||||
# browser and in Node.js.
|
||||
# This script simply creates symbolic links to src/load.js from
|
||||
# dist/paper-full.js and dist/paper-node.js, which loads the library from
|
||||
# separate sources through PrePro both in the browser and in Node.js.
|
||||
|
||||
if [ -f ../dist/paper.js ]
|
||||
if [ -f ../dist/paper-full.js ]
|
||||
then
|
||||
rm ../dist/paper.js
|
||||
rm ../dist/paper-full.js
|
||||
fi
|
||||
|
||||
if [ -f ../dist/paper-node.js ]
|
||||
|
|
@ -24,5 +24,5 @@ then
|
|||
rm ../dist/paper-node.js
|
||||
fi
|
||||
|
||||
cp ../src/load.js ../dist/paper.js
|
||||
cp ../src/load.js ../dist/paper-node.js
|
||||
ln -s ../src/load.js ../dist/paper-full.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
|
||||
# Copy examples over
|
||||
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
|
||||
cp -r $BASE/dist/docs .
|
||||
# Zip the whole thing
|
||||
|
|
|
|||
|
|
@ -8,5 +8,5 @@
|
|||
"vector", "graphic", "graphics", "2d", "geometry", "bezier", "curve",
|
||||
"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">
|
||||
<title>Animated Star</title>
|
||||
<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">
|
||||
var layer = project.activeLayer;
|
||||
|
||||
|
|
@ -50,4 +50,4 @@
|
|||
<body>
|
||||
<canvas id="canvas" resize stats hidpi="off"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Candy Crash</title>
|
||||
<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">
|
||||
// kynd.info 2014
|
||||
|
||||
|
|
@ -148,4 +148,4 @@
|
|||
<body>
|
||||
<canvas id="canvas" resize hidpi="off" style="background:black"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Extruded</title>
|
||||
<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">
|
||||
var lineGroup = new Group();
|
||||
var lineCount = 100;
|
||||
|
|
@ -47,4 +47,4 @@
|
|||
<body>
|
||||
<canvas id="canvas" resize></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Lines</title>
|
||||
<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">
|
||||
var amount = 45;
|
||||
for (var i = 0; i < amount; i++) {
|
||||
|
|
@ -50,4 +50,4 @@
|
|||
<body style="background:black">
|
||||
<canvas id="canvas" resize></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Smoothing</title>
|
||||
<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">
|
||||
var width, height, center;
|
||||
var points = 10;
|
||||
|
|
@ -67,4 +67,4 @@
|
|||
<body>
|
||||
<canvas id="canvas" resize></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Space</title>
|
||||
<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">
|
||||
// The amount of symbol we want to place;
|
||||
var count = 150;
|
||||
|
|
@ -83,4 +83,4 @@
|
|||
<body>
|
||||
<canvas id="canvas" resize hidpi="off" style="background:black"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Space</title>
|
||||
<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">
|
||||
// The amount of symbol we want to place;
|
||||
var count = 150;
|
||||
|
|
@ -76,4 +76,4 @@
|
|||
<body>
|
||||
<canvas id="canvas" resize hidpi="off" style="background:black"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
<title>Paperoids</title>
|
||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
||||
<script type="text/javascript" src="../../dist/paper-full.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
|
||||
//
|
||||
|
|
@ -152,22 +152,22 @@
|
|||
if (!this.dying)
|
||||
Bullets.fire(this.item.position, this.angle);
|
||||
},
|
||||
|
||||
|
||||
coast: function() {
|
||||
thrust.visible = false;
|
||||
this.vector *= .992;
|
||||
},
|
||||
|
||||
|
||||
move: function() {
|
||||
group.position += this.vector;
|
||||
keepInView(group);
|
||||
},
|
||||
|
||||
|
||||
moveTo: function(position) {
|
||||
group.position = position;
|
||||
keepInView(group);
|
||||
},
|
||||
|
||||
|
||||
destroy: function() {
|
||||
this.destroyedShip = assets.destroyedShip.clone();
|
||||
this.destroyedShip.position = this.item.position;
|
||||
|
|
@ -177,7 +177,7 @@
|
|||
this.item.position = view.center;
|
||||
this.dying = true;
|
||||
},
|
||||
|
||||
|
||||
destroyed: function() {
|
||||
this.item.visible = true;
|
||||
this.stop();
|
||||
|
|
@ -185,7 +185,7 @@
|
|||
this.dying = false;
|
||||
this.destroyedShip.visible = false;
|
||||
},
|
||||
|
||||
|
||||
checkCollisions: function() {
|
||||
var crashRock;
|
||||
|
||||
|
|
@ -293,7 +293,7 @@
|
|||
new Path(
|
||||
[-23, -40.5], [0, -30.5], [24, -40.5], [45, -21.5], [25, -12.5],
|
||||
[46, 9.5], [22, 38.5], [-10, 30.5], [-22, 40.5], [-46, 18.5],
|
||||
[-33, 0.5], [-44, -21.5], [-23, -40.5]),
|
||||
[-33, 0.5], [-44, -21.5], [-23, -40.5]),
|
||||
new Path(
|
||||
[-45, -9.5], [-12, -40.5], [24, -40.5], [46, -11.5], [45, 10.5],
|
||||
[24, 40.5], [0, 40.5], [0, 10.5], [-23, 38.5], [-46, 9.5], [-25, 0.5],
|
||||
|
|
@ -491,7 +491,7 @@
|
|||
}
|
||||
</script>
|
||||
<style type="text/css">
|
||||
body {
|
||||
body {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
background-color: #000;
|
||||
|
|
@ -530,12 +530,12 @@
|
|||
color: #fff;
|
||||
background-color: rgba(60,60,60,0.8);
|
||||
padding: 32px;
|
||||
-moz-border-radius: 12px;
|
||||
-webkit-border-radius: 12px;
|
||||
border-radius: 12px;
|
||||
-moz-border-radius: 12px;
|
||||
-webkit-border-radius: 12px;
|
||||
border-radius: 12px;
|
||||
-moz-background-clip: padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip: padding-box;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.gameover a {
|
||||
|
|
@ -553,7 +553,7 @@
|
|||
<body style="background:black">
|
||||
<canvas style="position:absolute" id="canvas" resize stats></canvas>
|
||||
<div id="footer" class="footer"><a href=#">Paperoids</a>. To Play: <b>←</b> and <b>→</b> to rotate. <b>↑</b> for thrust. <b>Z</b> to fire. <b>F</b> to show FPS. Follow @<a href="http://twitter.com/#/hirmes">hirmes</a> for updates. Made with the amazing <a href="http://paperjs.org">Paper.js</a></div>
|
||||
|
||||
|
||||
<div id="gameover" class="gameover">Game Over. <a href="Paperoids.html">Play again</a>?</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Palette</title>
|
||||
<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">
|
||||
var values = {
|
||||
number: 1,
|
||||
|
|
|
|||
|
|
@ -4,20 +4,20 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Circle Testing</title>
|
||||
<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">
|
||||
var topLeft = new Point(200, 200);
|
||||
var size = new Size(150, 100);
|
||||
var rectangle = new Rectangle(topLeft, size);
|
||||
var path = new Path.Ellipse(rectangle);
|
||||
path.fillColor = 'black';
|
||||
|
||||
|
||||
var topLeft = new Point(5, 400);
|
||||
var size = new Size(100, 50);
|
||||
var rectangle = new Rectangle(topLeft, size);
|
||||
var path = new Path.Ellipse(rectangle);
|
||||
path.fillColor = 'yellow';
|
||||
|
||||
|
||||
var path = new Path.Circle(new Point(50, 50), 25);
|
||||
path.fillColor = 'red';
|
||||
window._json = project.exportJSON();
|
||||
|
|
@ -31,4 +31,4 @@
|
|||
<canvas id="canvas1" width="500" height="500"></canvas>
|
||||
<canvas id="canvas2" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Compound Path</title>
|
||||
<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">
|
||||
project.currentStyle.fillColor = 'black';
|
||||
var path1 = new Path.Rectangle([200, 200], [100, 100]);
|
||||
|
|
@ -22,4 +22,4 @@
|
|||
<canvas id="canvas1" width="500" height="500"></canvas>
|
||||
<canvas id="canvas2" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,19 +4,19 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Empty Path Testing</title>
|
||||
<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">
|
||||
var path = new Path();
|
||||
path.strokeColor = 'black';
|
||||
path.add(new Point(30, 30));
|
||||
path.add(new Point(100, 100));
|
||||
|
||||
|
||||
var segments = [new Point(30, 90), new Point(100, 150)];
|
||||
var path2 = new Path(segments);
|
||||
path2.strokeColor = 'yellow';
|
||||
|
||||
var path3 = new Path();
|
||||
|
||||
|
||||
window._json = project.exportJSON();
|
||||
console.log(window._json);
|
||||
</script>
|
||||
|
|
@ -28,4 +28,4 @@
|
|||
<canvas id="canvas1" width="500" height="500"></canvas>
|
||||
<canvas id="canvas2" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Gradients</title>
|
||||
<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">
|
||||
var path = new Path.Circle(view.center, view.bounds.height * 0.4);
|
||||
path.fillColor = {
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
stops: ['yellow', 'red', 'black'],
|
||||
radial: true,
|
||||
origin: path.position,
|
||||
destination: path.bounds.rightCenter
|
||||
destination: path.bounds.rightCenter
|
||||
}
|
||||
path.strokeColor = 'black';
|
||||
window._json = project.exportJSON();
|
||||
|
|
@ -26,4 +26,4 @@
|
|||
<canvas id="canvas1" width="500" height="500"></canvas>
|
||||
<canvas id="canvas2" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Group Transform</title>
|
||||
<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">
|
||||
var circle1 = new Path.Circle(new Point(100, 100), 50);
|
||||
circle1.fillColor = 'red';
|
||||
|
|
@ -25,4 +25,4 @@
|
|||
<canvas id="canvas1" width="500" height="500"></canvas>
|
||||
<canvas id="canvas2" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Line Testing</title>
|
||||
<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">
|
||||
var x1 = 5,
|
||||
x2 = 45,
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
var line1 = new Path.Line([x1, y1], [x2, y2]);
|
||||
line1.strokeColor = "blue";
|
||||
line1.strokeWidth = "10";
|
||||
|
||||
|
||||
var x3 = 20,
|
||||
x4 = 99,
|
||||
y3 = 20,
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
var line2 = new Path.Line([x3, y3], [x4, y4]);
|
||||
line2.strokeColor = "red";
|
||||
line2.strokeWidth = "2";
|
||||
|
||||
|
||||
var x5 = 50,
|
||||
x6 = 200,
|
||||
y5 = 55,
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
var line3 = new Path.Line([x5, y5], [x6, y6]);
|
||||
line3.strokeColor = "yellow";
|
||||
line3.strokeWidth = "5";
|
||||
|
||||
|
||||
window._json = project.exportJSON();
|
||||
console.log(window._json);
|
||||
</script>
|
||||
|
|
@ -41,4 +41,4 @@
|
|||
<canvas id="canvas1" width="500" height="500"></canvas>
|
||||
<canvas id="canvas2" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Random Path Testing</title>
|
||||
<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">
|
||||
var center = new Point(100, 100);
|
||||
var sides = 3;
|
||||
|
|
@ -14,20 +14,20 @@
|
|||
copy = triangle.clone();
|
||||
copy.strokeColor = 'blue';
|
||||
copy.rotate(45);
|
||||
|
||||
|
||||
var center = new Point(100, 300);
|
||||
var sides = 10;
|
||||
var radius = 50;
|
||||
var decahedron = new Path.RegularPolygon(center, sides, radius);
|
||||
decahedron.fillColor = 'black';
|
||||
|
||||
|
||||
var center = new Point(100, 400);
|
||||
var points = 6;
|
||||
var radius1 = 20;
|
||||
var radius2 = 50;
|
||||
var path = new Path.Star(center, points, radius1, radius2);
|
||||
path.fillColor = 'black';
|
||||
|
||||
|
||||
window._json = project.exportJSON();
|
||||
console.log(window._json);
|
||||
</script>
|
||||
|
|
@ -39,4 +39,4 @@
|
|||
<canvas id="canvas1" width="500" height="500"></canvas>
|
||||
<canvas id="canvas2" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Rectangle Testing</title>
|
||||
<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">
|
||||
var point1 = new Point(10, 10);
|
||||
var size1 = new Size(50, 50);
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
path1.opacity = ".1";
|
||||
path1.dashArray = [5, 2];
|
||||
path1.dashOffset = "0";
|
||||
|
||||
|
||||
var point2 = new Point(75, 75);
|
||||
var point22 = new Point(100, 100);
|
||||
var path2 = new Path.Rectangle(point2, point22);
|
||||
|
|
@ -27,13 +27,13 @@
|
|||
path2.id = "square2";
|
||||
path2.strokeCap = "butt";
|
||||
path2.opacity = "1";
|
||||
|
||||
|
||||
var point3 = new Point(150, 150);
|
||||
var size3 = new Size(50, 50);
|
||||
var rectangle3 = new Rectangle(point3, size3);
|
||||
var path3 = new Path.Rectangle(rectangle3);
|
||||
path3.strokeColor = 'blue';
|
||||
|
||||
|
||||
var point4 = new Point(200, 200);
|
||||
var size4 = new Size(100, 100);
|
||||
var rectangle4 = new Rectangle(point4, size4);
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
var path4 = new Path.Rectangle(rectangle4, cornerSize4);
|
||||
path4.strokeColor= 'yellow';
|
||||
path4.fillColor='purple';
|
||||
|
||||
|
||||
window._json = project.exportJSON();
|
||||
console.log(window._json);
|
||||
</script>
|
||||
|
|
@ -53,4 +53,4 @@
|
|||
<canvas id="canvas1" width="500" height="500"></canvas>
|
||||
<canvas id="canvas2" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Rotated Primitives</title>
|
||||
<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">
|
||||
// This "arbitrary" shape triggered rectangles in the original code,
|
||||
// since point2 is as far from point0 as point3 is from point1.
|
||||
|
|
@ -52,4 +52,4 @@
|
|||
<canvas id="canvas1" width="500" height="500"></canvas>
|
||||
<canvas id="canvas2" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Symbols</title>
|
||||
<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">
|
||||
var path = new Path.Ellipse({
|
||||
from: [10, 10],
|
||||
|
|
@ -40,4 +40,4 @@
|
|||
<canvas id="canvas1" width="500" height="500"></canvas>
|
||||
<canvas id="canvas2" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Symbols</title>
|
||||
<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">
|
||||
var ellipse = new Shape.Ellipse({
|
||||
from: [10, 10],
|
||||
|
|
@ -36,4 +36,4 @@
|
|||
<canvas id="canvas1" width="500" height="500"></canvas>
|
||||
<canvas id="canvas2" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Symbols</title>
|
||||
<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">
|
||||
var ellipse = new Path.Ellipse({
|
||||
from: [0, 0],
|
||||
|
|
@ -27,4 +27,4 @@
|
|||
<canvas id="canvas1" width="500" height="500"></canvas>
|
||||
<canvas id="canvas2" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,12 +4,12 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Text Testing</title>
|
||||
<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">
|
||||
var text = new PointText(new Point(50, 100));
|
||||
text.fillColor = 'black';
|
||||
text.content = 'This is a test';
|
||||
|
||||
|
||||
var text = new PointText(new Point(100, 150));
|
||||
text.fillColor = 'red';
|
||||
text.strokeWidth = '4';
|
||||
|
|
@ -35,4 +35,4 @@
|
|||
<canvas id="canvas1" width="500" height="500"></canvas>
|
||||
<canvas id="canvas2" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Transform Testing</title>
|
||||
<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">
|
||||
var circlePath = new Path.Circle(new Point(280, 100), 25);
|
||||
circlePath.strokeColor = 'black';
|
||||
|
|
@ -29,4 +29,4 @@
|
|||
<canvas id="canvas1" width="500" height="500"></canvas>
|
||||
<canvas id="canvas2" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Rectangle Testing</title>
|
||||
<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">
|
||||
var path = new Path.Rectangle(new Point(50, 50), new Size(100, 50));
|
||||
path.style = {
|
||||
|
|
@ -27,4 +27,4 @@
|
|||
<canvas id="canvas1" width="500" height="500"></canvas>
|
||||
<canvas id="canvas2" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Bouncing Balls</title>
|
||||
<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">
|
||||
var Ball = function(point, vector) {
|
||||
if (!vector || vector.isZero()) {
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
var gradient = new Gradient([color, 'black'], true);
|
||||
|
||||
var radius = this.radius = 50 * Math.random() + 30;
|
||||
// Wrap CompoundPath in a Group, since CompoundPaths directly
|
||||
// Wrap CompoundPath in a Group, since CompoundPaths directly
|
||||
// applies the transformations to the content, just like Path.
|
||||
var ball = new CompoundPath({
|
||||
children: [
|
||||
|
|
@ -100,4 +100,4 @@
|
|||
<body>
|
||||
<canvas id="canvas" resize></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Chain</title>
|
||||
<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">
|
||||
// Adapted from the following Processing example:
|
||||
// http://processing.org/learning/topics/follow3.html
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Future Splash</title>
|
||||
<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">
|
||||
// Code ported to Paper.js from http://the389.com/9/1/
|
||||
// with permission.
|
||||
|
|
@ -121,4 +121,4 @@
|
|||
<body>
|
||||
<canvas id="canvas" resize hidpi="off"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Hit Testing</title>
|
||||
<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">
|
||||
var values = {
|
||||
paths: 50,
|
||||
|
|
@ -100,4 +100,4 @@
|
|||
<body>
|
||||
<canvas id="canvas" resize style="background:black"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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">
|
||||
// Import the tiger svg:
|
||||
project.importSVG(document.getElementById('svg'));
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
},
|
||||
mousedrag: function(event) {
|
||||
this.position += event.delta;
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<body>
|
||||
<canvas id="canvas" width="600" height="600" resize=true></canvas>
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
|
|
@ -770,4 +770,4 @@
|
|||
</g>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Meta Balls</title>
|
||||
<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">
|
||||
// Ported from original Metaball script by SATO Hiroyuki
|
||||
// http://park12.wakwak.com/~shp/lc/et/en_aics_script.html
|
||||
|
|
@ -129,4 +129,4 @@
|
|||
<body>
|
||||
<canvas id="canvas" resize></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Nyan Rainbow</title>
|
||||
<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/paperscript" canvas="canvas">
|
||||
// A tribute to Nyan Cat http://www.youtube.com/watch?v=QH2-TGUlwu4
|
||||
|
|
@ -199,4 +199,4 @@
|
|||
<audio id="nyan" src="http://dl.dropbox.com/u/31703/nyan.mp3" autoplay autobuffer preload=none loop style="display:none"></audio>
|
||||
<canvas id="canvas" resize hidpi="off"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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">
|
||||
var words = project.importSVG(document.getElementById('svg'));
|
||||
words.fillColor = null;
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<body>
|
||||
<canvas id="canvas" width="600" height="600" resize=true></canvas>
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
|
|
@ -74,4 +74,4 @@
|
|||
</g>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Radial Rainbows</title>
|
||||
<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">
|
||||
var point = view.center;
|
||||
|
||||
|
|
@ -77,4 +77,4 @@
|
|||
<body>
|
||||
<canvas id="canvas" hidpi="off" resize></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Rounded Rectangles</title>
|
||||
<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">
|
||||
var mousePoint = view.center;
|
||||
var amount = 25;
|
||||
|
|
@ -38,4 +38,4 @@
|
|||
<body>
|
||||
<canvas id="canvas" resize hidpi="off"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Erik Liked To Dance</title>
|
||||
<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">
|
||||
var leftPath = new Path({
|
||||
strokeColor: 'red',
|
||||
|
|
@ -99,7 +99,7 @@
|
|||
request.open("GET", url, true);
|
||||
request.responseType = "arraybuffer";
|
||||
|
||||
request.onload = function() {
|
||||
request.onload = function() {
|
||||
audio.decodeAudioData(
|
||||
request.response,
|
||||
function(buffer) {
|
||||
|
|
@ -108,7 +108,7 @@
|
|||
source.start(0);
|
||||
view.play();
|
||||
},
|
||||
|
||||
|
||||
function(buffer) {
|
||||
alert("Error loading MP3");
|
||||
}
|
||||
|
|
@ -137,4 +137,4 @@
|
|||
<body>
|
||||
<canvas id="canvas" resize></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Simplify</title>
|
||||
<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">
|
||||
var path;
|
||||
|
||||
|
|
@ -60,4 +60,4 @@
|
|||
<body>
|
||||
<canvas id="canvas" resize></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Tadpoles</title>
|
||||
<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">
|
||||
// Adapted from Flocking Processing example by Daniel Schiffman:
|
||||
// http://processing.org/learning/topics/flocking.html
|
||||
|
|
@ -280,4 +280,4 @@
|
|||
<body>
|
||||
<canvas id="canvas" resize></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Voronoi</title>
|
||||
<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/paperscript" canvas="canvas">
|
||||
var voronoi = new Voronoi();
|
||||
|
|
@ -83,7 +83,7 @@
|
|||
}
|
||||
function createPath(points, center) {
|
||||
var path = new Path();
|
||||
if (!selected) {
|
||||
if (!selected) {
|
||||
path.fillColor = spotColor;
|
||||
} else {
|
||||
path.fullySelected = selected;
|
||||
|
|
@ -131,4 +131,4 @@
|
|||
<body>
|
||||
<canvas id="canvas" resize></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -4,23 +4,23 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Circle Testing</title>
|
||||
<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">
|
||||
var topLeft = new Point(200, 200);
|
||||
var size = new Size(150, 100);
|
||||
var rectangle = new Rectangle(topLeft, size);
|
||||
var path = new Path.Ellipse(rectangle);
|
||||
path.fillColor = 'black';
|
||||
|
||||
|
||||
var topLeft = new Point(5, 400);
|
||||
var size = new Size(100, 50);
|
||||
var rectangle = new Rectangle(topLeft, size);
|
||||
var path = new Path.Ellipse(rectangle);
|
||||
path.fillColor = 'yellow';
|
||||
|
||||
|
||||
var path = new Path.Circle(new Point(50, 50), 25);
|
||||
path.fillColor = 'red';
|
||||
|
||||
|
||||
document.getElementById('svg').appendChild(project.exportSVG());
|
||||
</script>
|
||||
</head>
|
||||
|
|
@ -28,4 +28,4 @@
|
|||
<canvas id="canvas" width="500" height="500"></canvas>
|
||||
<svg id="svg" width="500" height="500"></svg>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Compound Path</title>
|
||||
<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">
|
||||
project.currentStyle.fillColor = 'black';
|
||||
var path1 = new Path.Rectangle([200, 200], [100, 100]);
|
||||
|
|
@ -18,4 +18,4 @@
|
|||
<canvas id="canvas" width="500" height="500"></canvas>
|
||||
<svg id="svg" width="500" height="500"></svg>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,19 +4,19 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Empty Path Testing</title>
|
||||
<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">
|
||||
var path = new Path();
|
||||
path.strokeColor = 'black';
|
||||
path.add(new Point(30, 30));
|
||||
path.add(new Point(100, 100));
|
||||
|
||||
|
||||
var segments = [new Point(30, 90), new Point(100, 150)];
|
||||
var path2 = new Path(segments);
|
||||
path2.strokeColor = 'yellow';
|
||||
|
||||
var path3 = new Path();
|
||||
|
||||
|
||||
document.getElementById('svg').appendChild(project.exportSVG());
|
||||
</script>
|
||||
</head>
|
||||
|
|
@ -24,4 +24,4 @@
|
|||
<canvas id="canvas" width="500" height="500"></canvas>
|
||||
<svg id="svg" width="500" height="500"></svg>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Gradients</title>
|
||||
<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">
|
||||
var stops = [new Color(1, 1, 0, 0), 'red', 'black'];
|
||||
|
||||
|
|
@ -48,4 +48,4 @@
|
|||
<canvas id="canvas" width="300" height="600"></canvas>
|
||||
<svg id="svg" width="300" height="600"></svg>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Group Transform</title>
|
||||
<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">
|
||||
var circle1 = new Path.Circle(new Point(100, 100), 50);
|
||||
circle1.fillColor = 'red';
|
||||
|
|
@ -21,4 +21,4 @@
|
|||
<canvas id="canvas" width="500" height="500"></canvas>
|
||||
<svg id="svg" width="500" height="500"></svg>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Line Testing</title>
|
||||
<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">
|
||||
var x1 = 5,
|
||||
x2 = 45,
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
var line1 = new Path.Line([x1, y1], [x2, y2]);
|
||||
line1.strokeColor = "blue";
|
||||
line1.strokeWidth = "10";
|
||||
|
||||
|
||||
var x3 = 20,
|
||||
x4 = 99,
|
||||
y3 = 20,
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
var line2 = new Path.Line([x3, y3], [x4, y4]);
|
||||
line2.strokeColor = "red";
|
||||
line2.strokeWidth = "2";
|
||||
|
||||
|
||||
var x5 = 50,
|
||||
x6 = 200,
|
||||
y5 = 55,
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
var line3 = new Path.Line([x5, y5], [x6, y6]);
|
||||
line3.strokeColor = "yellow";
|
||||
line3.strokeWidth = "5";
|
||||
|
||||
|
||||
document.getElementById('svg').appendChild(project.exportSVG());
|
||||
</script>
|
||||
</head>
|
||||
|
|
@ -37,4 +37,4 @@
|
|||
<canvas id="canvas" width="500" height="500"></canvas>
|
||||
<svg id="svg" width="500" height="500"></svg>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Random Path Testing</title>
|
||||
<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">
|
||||
var center = new Point(100, 100);
|
||||
var sides = 3;
|
||||
|
|
@ -14,20 +14,20 @@
|
|||
copy = triangle.clone();
|
||||
copy.strokeColor = 'blue';
|
||||
copy.rotate(45);
|
||||
|
||||
|
||||
var center = new Point(100, 300);
|
||||
var sides = 10;
|
||||
var radius = 50;
|
||||
var decahedron = new Path.RegularPolygon(center, sides, radius);
|
||||
decahedron.fillColor = 'black';
|
||||
|
||||
|
||||
var center = new Point(100, 400);
|
||||
var points = 6;
|
||||
var radius1 = 20;
|
||||
var radius2 = 50;
|
||||
var path = new Path.Star(center, points, radius1, radius2);
|
||||
path.fillColor = 'black';
|
||||
|
||||
|
||||
document.getElementById('svg').appendChild(project.exportSVG());
|
||||
</script>
|
||||
</head>
|
||||
|
|
@ -35,4 +35,4 @@
|
|||
<canvas id="canvas" width="500" height="500"></canvas>
|
||||
<svg id="svg" width="500" height="500"></svg>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Rectangle Testing</title>
|
||||
<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">
|
||||
var point1 = new Point(10, 10);
|
||||
var size1 = new Size(50, 50);
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
path1.opacity = ".1";
|
||||
path1.dashArray = [5, 2];
|
||||
path1.dashOffset = "0";
|
||||
|
||||
|
||||
var point2 = new Point(75, 75);
|
||||
var point22 = new Point(100, 100);
|
||||
var path2 = new Path.Rectangle(point2, point22);
|
||||
|
|
@ -27,13 +27,13 @@
|
|||
path2.id = "square2";
|
||||
path2.strokeCap = "butt";
|
||||
path2.opacity = "1";
|
||||
|
||||
|
||||
var point3 = new Point(150, 150);
|
||||
var size3 = new Size(50, 50);
|
||||
var rectangle3 = new Rectangle(point3, size3);
|
||||
var path3 = new Path.Rectangle(rectangle3);
|
||||
path3.strokeColor = 'blue';
|
||||
|
||||
|
||||
var point4 = new Point(200, 200);
|
||||
var size4 = new Size(100, 100);
|
||||
var rectangle4 = new Rectangle(point4, size4);
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
var path4 = new Path.Rectangle(rectangle4, cornerSize4);
|
||||
path4.strokeColor= 'yellow';
|
||||
path4.fillColor='purple';
|
||||
|
||||
|
||||
document.getElementById('svg').appendChild(project.exportSVG());
|
||||
</script>
|
||||
</head>
|
||||
|
|
@ -49,4 +49,4 @@
|
|||
<canvas id="canvas" width="500" height="500"></canvas>
|
||||
<svg id="svg" width="500" height="500"></svg>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Rotated Primitives</title>
|
||||
<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">
|
||||
// This "arbitrary" shape triggered rectangles in the original code,
|
||||
// since point2 is as far from point0 as point3 is from point1.
|
||||
|
|
@ -76,4 +76,4 @@
|
|||
<canvas id="canvas" width="500" height="500"></canvas>
|
||||
<svg id="svg" width="500" height="500"></svg>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Shapes</title>
|
||||
<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">
|
||||
var rect = new Shape.Rectangle({
|
||||
point: [200, 100],
|
||||
|
|
@ -54,4 +54,4 @@
|
|||
<canvas id="canvas" width="500" height="500"></canvas>
|
||||
<svg id="svg" width="500" height="500"></svg>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Symbols</title>
|
||||
<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">
|
||||
var ellipse = new Path.Ellipse({
|
||||
from: [0, 0],
|
||||
|
|
@ -23,4 +23,4 @@
|
|||
<canvas id="canvas" width="500" height="500"></canvas>
|
||||
<svg id="svg" width="500" height="500"></svg>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,12 +4,12 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Text Testing</title>
|
||||
<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">
|
||||
var text = new PointText(new Point(50, 100));
|
||||
text.fillColor = 'black';
|
||||
text.content = 'This is a test';
|
||||
|
||||
|
||||
var text = new PointText(new Point(100, 150));
|
||||
text.fillColor = 'red';
|
||||
text.strokeWidth = '4';
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
text.rotate(45);
|
||||
text.shear(.85, .15);
|
||||
text.scale(.85, 2);
|
||||
|
||||
|
||||
var path2 = new Path.Circle(new Point(100, 100), 50);
|
||||
path2.strokeColor = 'black';
|
||||
path2.shear(.5, .5);
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
var p = path2.segments[i].point;
|
||||
var c = new Path.Circle(p, 2);
|
||||
c.fillColor = colors[i];
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('svg').appendChild(project.exportSVG());
|
||||
</script>
|
||||
|
|
@ -41,4 +41,4 @@
|
|||
<canvas id="canvas" width="500" height="500"></canvas>
|
||||
<svg id="svg" width="500" height="500"></svg>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Transform Testing</title>
|
||||
<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">
|
||||
var circlePath = new Path.Circle(new Point(280, 100), 25);
|
||||
circlePath.strokeColor = 'black';
|
||||
|
|
@ -25,4 +25,4 @@
|
|||
<canvas id="canvas" width="500" height="500"></canvas>
|
||||
<svg id="svg" width="500" height="500"></svg>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Rectangle Testing</title>
|
||||
<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">
|
||||
var path = new Path.Rectangle(new Point(50, 50), new Size(100, 50));
|
||||
path.style = {
|
||||
|
|
@ -23,4 +23,4 @@
|
|||
<canvas id="canvas" width="500" height="500"></canvas>
|
||||
<svg id="svg" width="500" height="500"></svg>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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">
|
||||
project.importSVG(document.getElementById('svg'));
|
||||
</script>
|
||||
|
|
@ -16,10 +16,10 @@
|
|||
<path d="M275,175 v-150 a150,150 0 0,0 -150,150 z"
|
||||
fill="yellow" stroke="blue" stroke-width="5" />
|
||||
|
||||
<path d="M600,350 l 50,-25
|
||||
a25,25 -30 0,1 50,-25 l 50,-25
|
||||
a25,50 -30 0,1 50,-25 l 50,-25
|
||||
a25,75 -30 0,1 50,-25 l 50,-25
|
||||
<path d="M600,350 l 50,-25
|
||||
a25,25 -30 0,1 50,-25 l 50,-25
|
||||
a25,50 -30 0,1 50,-25 l 50,-25
|
||||
a25,75 -30 0,1 50,-25 l 50,-25
|
||||
a25,100 -30 0,1 50,-25 l 50,-25"
|
||||
fill="none" stroke="red" stroke-width="5" />
|
||||
<g font-family="Verdana" transform="translate(0,400)">
|
||||
|
|
@ -73,4 +73,4 @@
|
|||
</svg>
|
||||
<canvas id="canvas" width="1000" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Butterfly</title>
|
||||
<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">
|
||||
var start = Date.now();
|
||||
project.importSVG(document.getElementById('svg'));
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
// console.log(project.exportJSON());
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<body>
|
||||
<svg version="1.1"
|
||||
id="svg" xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="398.363px"
|
||||
|
|
@ -220,4 +220,4 @@
|
|||
</svg>
|
||||
<canvas id="canvas" width="400" height="250"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Circle and Ellipse Testing</title>
|
||||
<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">
|
||||
project.importSVG(document.getElementById('svg'));
|
||||
</script>
|
||||
|
|
@ -23,4 +23,4 @@
|
|||
</svg>
|
||||
<canvas id="canvas" width="500" height="1000"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -3,12 +3,12 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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">
|
||||
project.importSVG(document.getElementById('Layer_1'));
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<body>
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
|
|
@ -100,4 +100,4 @@
|
|||
</svg>
|
||||
<canvas id="canvas" width="400px" height="1500px"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Import From File</title>
|
||||
<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">
|
||||
var file = document.getElementById('file');
|
||||
file.addEventListener('change', function (event) {
|
||||
|
|
@ -26,4 +26,4 @@
|
|||
</form>
|
||||
<canvas id="canvas" width="1000" height="1000"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
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,12 +3,12 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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">
|
||||
project.importSVG(document.getElementById('svg'));
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<body>
|
||||
<svg id="svg" x="0" y="0" width="300" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
|
||||
<linearGradient x1="45" y1="345" x2="255" y2="555" gradientUnits="userSpaceOnUse" id="gradient-2">
|
||||
<stop offset="0" stop-color="rgb(255, 255, 0)" stop-opacity="0"></stop>
|
||||
|
|
@ -27,4 +27,4 @@
|
|||
</svg>
|
||||
<canvas id="canvas" width="300" height="600"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Inkscape</title>
|
||||
<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">
|
||||
var start = Date.now();
|
||||
project.importSVG(document.getElementById('svg2'));
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
// console.log(project.exportJSON());
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<body>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
|
|
@ -85,4 +85,4 @@
|
|||
|
||||
<canvas id="canvas" width="400" height="400"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Line Testing</title>
|
||||
<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">
|
||||
project.importSVG(document.getElementById('svg'));
|
||||
</script>
|
||||
|
|
@ -21,4 +21,4 @@
|
|||
</svg>
|
||||
<canvas id="canvas" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -3,12 +3,12 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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">
|
||||
project.importSVG(document.getElementById('Layer_1'));
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<body>
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="500" height="1000" enable-background="new 0 0 595.28 841.89" xml:space="preserve">
|
||||
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="69" y1="239.5" x2="530" y2="239.5">
|
||||
|
|
@ -104,4 +104,4 @@
|
|||
</svg>
|
||||
<canvas id="canvas" width="500" height="1000"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,12 +4,12 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Multiple Paths Test</title>
|
||||
<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">
|
||||
project.importSVG(document.getElementById('svg'));
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<body>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500" id="svg">
|
||||
<g>
|
||||
<circle cx="100" cy="400" r="100" style="fill:darkred;" id="circle" />
|
||||
|
|
@ -23,10 +23,10 @@
|
|||
<ellipse cx="120" cy="250" rx="100" ry="50" style="fill:yellow;stroke-width:-1px" id="ellipse" />
|
||||
</g>
|
||||
<path d="m 100 350 q 100 -300 100 0 t 100 0 t 50 0" stroke="black" stroke-width="4px" fill="none" id="path" />
|
||||
|
||||
|
||||
<path d="m 100 350 q 100 -300 100 0" stroke="black" stroke-width="4px" fill="none" id="path"/>
|
||||
<path d="m 100 350 c 66.666666 -200 100 -200 100 0" stroke="black" stroke-width="4px" fill="none" />
|
||||
|
||||
|
||||
<path d="m 100 350 q 100 -300 100 0 t 100 0 T 350 350" stroke="black" stroke-width="4px" fill="none" />
|
||||
<path d="m 100 350 q 100 -300 100 0 T 300 350 t 50 0" stroke="black" stroke-width="4px" fill="none" />
|
||||
<path d="m 100 350 q 100 -300 100 0 T 300 350 T 350 350" stroke="black" stroke-width="4px" fill="none" />
|
||||
|
|
@ -39,4 +39,4 @@
|
|||
</svg>
|
||||
<canvas id="canvas" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Multiple Paths Test 2</title>
|
||||
<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">
|
||||
project.importSVG(document.getElementById('svg'));
|
||||
</script>
|
||||
|
|
@ -30,4 +30,4 @@
|
|||
</svg>
|
||||
<canvas id="canvas" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Nested Groups Test</title>
|
||||
<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">
|
||||
project.importSVG(document.getElementById('svg'));
|
||||
</script>
|
||||
|
|
@ -71,8 +71,8 @@
|
|||
</g>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
||||
</svg>
|
||||
<canvas id="canvas" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Rect Testing</title>
|
||||
<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">
|
||||
project.importSVG(document.getElementById('svg'));
|
||||
</script>
|
||||
|
|
@ -40,4 +40,4 @@
|
|||
</svg>
|
||||
<canvas id="canvas" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Rect Testing</title>
|
||||
<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">
|
||||
var group = project.importSVG(document.getElementById('svg'));
|
||||
console.log(JSON.stringify(group.children[0].data));
|
||||
|
|
@ -22,4 +22,4 @@
|
|||
</svg>
|
||||
<canvas id="canvas" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Multiple Paths Test 2</title>
|
||||
<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">
|
||||
project.importSVG(document.getElementById('svg'));
|
||||
</script>
|
||||
|
|
@ -22,4 +22,4 @@
|
|||
</svg>
|
||||
<canvas id="canvas" width="595" height="841"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Stroke Bounds</title>
|
||||
<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">
|
||||
project.importSVG(document.getElementById('svg'));
|
||||
</script>
|
||||
|
|
@ -21,10 +21,10 @@
|
|||
<ellipse cx="120" cy="250" rx="100" ry="50" style="fill:yellow;stroke-width:-1" id="ellipse" />
|
||||
</g>
|
||||
<path d="m 100 350 q 100 -300 100 0 t 100 0 t 50 0" stroke="black" stroke-width="4" fill="none" id="path" />
|
||||
|
||||
|
||||
<path d="m 100 350 q 100 -300 100 0" stroke="black" stroke-width="4" fill="none" id="path"/>
|
||||
<path d="m 100 350 c 66.666666 -200 100 -200 100 0" stroke="black" stroke-width="4" fill="none" />
|
||||
|
||||
|
||||
<path d="m 100 350 q 100 -300 100 0 t 100 0 T 350 350" stroke="black" stroke-width="4" fill="none" />
|
||||
<path d="m 100 350 q 100 -300 100 0 T 300 350 t 50 0" stroke="black" stroke-width="4" fill="none" />
|
||||
<path d="m 100 350 q 100 -300 100 0 T 300 350 T 350 350" stroke="black" stroke-width="4" fill="none" />
|
||||
|
|
@ -37,4 +37,4 @@
|
|||
</svg>
|
||||
<canvas id="canvas" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Text Testing</title>
|
||||
<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">
|
||||
project.importSVG(document.getElementById('svg'));
|
||||
</script>
|
||||
|
|
@ -16,4 +16,4 @@
|
|||
</svg>
|
||||
<canvas id="canvas" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Tiger</title>
|
||||
<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">
|
||||
var start = Date.now();
|
||||
project.importSVG(document.getElementById('svg'));
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
// console.log(project.exportJSON());
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<body>
|
||||
<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 900" version="1.1" width="600px" height="600px">
|
||||
<g id="g4" fill="none" transform="matrix(1.7656463,0,0,1.7656463,324.90716,255.00942)">
|
||||
<g id="g6" stroke-width="0.17200001" stroke="#000" fill="#FFF">
|
||||
|
|
@ -739,4 +739,4 @@
|
|||
</svg>
|
||||
<canvas id="canvas" width="600" height="600"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Transform Testing</title>
|
||||
<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">
|
||||
project.importSVG(document.getElementById('svg'));
|
||||
</script>
|
||||
|
|
@ -19,4 +19,4 @@
|
|||
</svg>
|
||||
<canvas id="canvas" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,16 +4,16 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Viewbox 1</title>
|
||||
<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">
|
||||
project.importSVG(document.getElementById('svg'));
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<svg width="300" height="200"
|
||||
<body>
|
||||
<svg width="300" height="200"
|
||||
viewBox="100 100 1500 1000" preserveAspectRatio="none"
|
||||
xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg">
|
||||
<desc>Example ViewBox - uses the viewBox
|
||||
<desc>Example ViewBox - uses the viewBox
|
||||
attribute to automatically create an initial user coordinate
|
||||
system which causes the graphic to scale to fit into the
|
||||
viewport no matter what size the viewport is.</desc>
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
Because of the viewBox attribute above,
|
||||
the rectangle will end up filling the entire area
|
||||
reserved for the SVG content. -->
|
||||
<rect x="0" y="0" width="1500" height="1000"
|
||||
<rect x="0" y="0" width="1500" height="1000"
|
||||
fill="yellow" stroke="blue" stroke-width="12" />
|
||||
|
||||
<!-- A large, red triangle -->
|
||||
|
|
@ -35,4 +35,4 @@
|
|||
</svg>
|
||||
<canvas id="canvas" width="300" height="200"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
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">
|
||||
<title>Arcs</title>
|
||||
<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">
|
||||
var values = {
|
||||
points: 20,
|
||||
|
|
@ -36,4 +36,4 @@
|
|||
<body>
|
||||
<canvas id="canvas" resize></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<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">
|
||||
paper.install(window);
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Compound Path</title>
|
||||
<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">
|
||||
project.currentStyle.fillColor = 'black';
|
||||
var path1 = new Path.Rectangle([200, 200], [100, 100]);
|
||||
|
|
@ -16,4 +16,4 @@
|
|||
<body>
|
||||
<canvas id="canvas" resize></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Curve Time Parameterization</title>
|
||||
<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">
|
||||
var path = new Path();
|
||||
path.moveTo(200, 200);
|
||||
|
|
@ -58,4 +58,4 @@
|
|||
<body>
|
||||
<canvas id="canvas" resize></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>HslColor</title>
|
||||
<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">
|
||||
var steps = {
|
||||
hue: 100,
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
var lightness = 1 - (i + 1) / (steps.lightness + 1);
|
||||
createWheel(position, radius, steps, lightness);
|
||||
};
|
||||
|
||||
|
||||
function createWheel(center, radius, steps, lightness) {
|
||||
var hUnit = 360 / steps.hue;
|
||||
for (var h = 0; h < steps.hue; h++) {
|
||||
|
|
@ -50,4 +50,4 @@
|
|||
<body>
|
||||
<canvas id="canvas" resize style="background:black"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Path Structure</title>
|
||||
<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">
|
||||
var y = view.size.height / 2;
|
||||
var width = view.size.width;
|
||||
|
|
@ -79,4 +79,4 @@
|
|||
<body>
|
||||
<canvas id='canvas' resize></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Resize</title>
|
||||
<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">
|
||||
var redPath = new Path.Circle({
|
||||
center: view.center,
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
justification: 'center',
|
||||
point: view.center
|
||||
});
|
||||
|
||||
|
||||
function onResize(event) {
|
||||
// Resize the red circle to fill the bounds of the view:
|
||||
redPath.fitBounds(view.bounds, true);
|
||||
|
|
@ -39,4 +39,4 @@
|
|||
<body>
|
||||
<canvas id="canvas" resize></canvas>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue