mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-06-03 16:53:53 -04: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
README.mdbower.json
build
component.jsondist
examples
Animated
AnimatedStar.htmlCandyCrash.htmlExtruded.htmlLines.htmlSmoothing.htmlSpace.htmlSpaceUsingShapes.html
Games
Interface
JSON
Circle Testing.htmlCompound Path.htmlEmpty Path Testing.htmlGradients.htmlGroup Transform.htmlLine Testing.htmlRandom Path Testing.htmlRaster.htmlRect and Attribute Testing.htmlRotated Primitives.htmlSelection.htmlShapes.htmlSymbols.htmlText Testing.htmlTiger.htmlTransform Test 1.htmlTransform Test 2.html
Paperjs.org
BouncingBalls.htmlChain.htmlDivisionRaster.htmlFutureSplash.htmlHitTesting.htmlInteractiveTiger.htmlMetaBalls.htmlNyanRainbow.htmlPathIntersections.htmlQbertify.htmlRadialRainbows.htmlRoundedRectangles.htmlSatieLikedToDraw.htmlSimplify.htmlSpiralRaster.htmlTadpoles.htmlVoronoi.html
Rasters
SVG Export
Circle Testing.htmlClipping.htmlCompound Path.htmlEmpty Path Testing.htmlGradients.htmlGroup Transform.htmlLine Testing.htmlRandom Path Testing.htmlRaster.htmlRect and Attribute Testing.htmlRotated Primitives.htmlShapes.htmlSymbols.htmlText Testing.htmlTiger.htmlTransform Test 1.htmlTransform Test 2.html
SVG Import
Arcs.htmlButterfly.htmlCircle and Ellipse Testing.htmlClipping.htmlFrom File.htmlGradient.htmlGradients.htmlInkscape.htmlLine Testing.htmlMoreGradients.htmlMultiple Paths Test 1.htmlMultiple Paths Test 2.htmlNested Groups Test.htmlPolybezier.htmlRect Testing.htmlSymbols.htmlTesting.htmlText Testing.htmlTiger.htmlTransform Testing.htmlViewbox.htmlgradient.svg
Scripts
12
README.md
12
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
|
||||
|
||||
|
@ -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",
|
||||
|
|
|
@ -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 "-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
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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++) {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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">
|
||||
|
||||
//
|
||||
|
|
|
@ -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,7 +4,7 @@
|
|||
<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);
|
||||
|
|
|
@ -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]);
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
<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';
|
||||
|
|
|
@ -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 = {
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Raster</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 raster = new Raster('lenna'); // new Raster('http://www.lps.usp.br/~hae/apostila/imagens/lenna.jpg');
|
||||
raster.onLoad = function() {
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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],
|
||||
|
|
|
@ -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],
|
||||
|
|
|
@ -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],
|
||||
|
|
|
@ -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="canvas1">
|
||||
var text = new PointText(new Point(50, 100));
|
||||
text.fillColor = 'black';
|
||||
|
|
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';
|
||||
|
|
|
@ -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 = {
|
||||
|
|
|
@ -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()) {
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Division Raster</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">
|
||||
// Based on 'JPEG Raster' by Jonathan Puckey:
|
||||
// http://www.flickr.com/photos/puckey/3179779686/in/photostream/
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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'));
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Q*bertify</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">
|
||||
// Please note: dragging and dropping images only works for
|
||||
// certain browsers when serving this script online:
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Spiral Raster</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">
|
||||
// Please note: dragging and dropping images only works for
|
||||
// certain browsers when serving this script online:
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Phyllotaxis Raster</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">
|
||||
// Example inspired by: 'Phyllotactic Spirals' by Ken Frederick
|
||||
// http://scriptographer.org/scripts/general-scripts/phyllotactic-spirals/
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Raster</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">
|
||||
// http://en.wikipedia.org/wiki/Lenna
|
||||
// Load from Server:
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Rotation Raster</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 raster = new Raster('lenna');
|
||||
var size = new Size(50, 50);
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
<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);
|
||||
|
|
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]);
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
<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';
|
||||
|
|
|
@ -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'];
|
||||
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Raster</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 raster = new Raster('lenna');
|
||||
raster.position = view.center;
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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],
|
||||
|
|
|
@ -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],
|
||||
|
|
|
@ -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">
|
||||
var text = new PointText(new Point(50, 100));
|
||||
text.fillColor = 'black';
|
||||
|
|
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';
|
||||
|
|
|
@ -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 = {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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'));
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<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>
|
||||
|
|
|
@ -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) {
|
||||
|
|
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>
|
||||
<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>
|
||||
|
|
|
@ -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'));
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<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>
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
<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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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));
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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'));
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
<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>
|
||||
|
|
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 (image error) 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,
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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">
|
||||
var stops = [];
|
||||
for (var i = 0; i < 6; i++)
|
||||
|
|
|
@ -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]);
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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,
|
||||
|
|
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue