scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-03-14 00:39:57 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Removed unnecessary files

Browse source
This commit is contained in:
Andrew 2012-09-30 21:18:39 -04:00
parent 2508136602
commit 777e1c6275
6 changed files with 0 additions and 289 deletions

32
examples/Scripts/ImportSVG.html
View file

@ -1,32 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 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/paperscript" canvas="canvas">
project.currentStyle = {
strokeColor: 'black',
strokeWidth: 2,
strokeCap: 'round'
};
var isvg = new ImportSVG;
isvg.importSVG(document.getElementById('svg'));
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:500px; height:500px; background:black;" id="svg">
<g>
<line x1="4" y1="20" x2="200" y2="200" style="stroke:red;stroke-width:1" id="line" />
<rect x="200" y="20" rx="20" ry="10" width="150" height="150" style="fill:green" id="round" />
</g>
<g>
<rect x="250" y="180" width="150" height="150" style="fill:blue" id="rect" />
<ellipse cx="120" cy="250" rx="100" ry="50" style="fill:yellow;" id="oval" />
</g>
<text x="20" y="15" fill="green">I love SVG</text>
</svg>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

89
examples/Tools/SVGBezierTool.html
View file

@ -1,89 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Bezier Tool</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/javascript" src="../../src/svg/ExportSVG.js"></script>
<script type="text/paperscript" canvas="canvas">
var path;
var types = ['point', 'handleIn', 'handleOut'];
function findHandle(point) {
for (var i = 0, l = path.segments.length; i < l; i++) {
for (var j = 0; j < 3; j++) {
var type = types[j];
var segment = path.segments[i];
var segmentPoint = type == 'point'
? segment.point
: segment.point + segment[type];
var distance = (point - segmentPoint).length;
if (distance < 3) {
return {
type: type,
segment: segment
};
}
}
}
return null;
}
var currentSegment, mode, type;
function onMouseDown(event) {
if (currentSegment)
currentSegment.selected = false;
mode = type = currentSegment = null;
if (!path) {
path = new Path();
path.fillColor = new HsbColor(360 * Math.random(), 1, 1, 0.5);
}
var result = findHandle(event.point);
if (result) {
currentSegment = result.segment;
type = result.type;
if (path.segments.length > 1 && result.type == 'point'
&& result.segment.index == 0) {
mode = 'close';
path.closed = true;
var svg = new ExportSVG();
var svgout = svg.exportPath(path);
console.log(svgout);
path.selected = false;
path = null;
}
}
if (mode != 'close') {
mode = currentSegment ? 'move' : 'add';
if (!currentSegment)
currentSegment = path.add(event.point);
currentSegment.selected = true;
}
}
function onMouseDrag(event) {
if (mode == 'move' && type == 'point') {
currentSegment.point = event.point;
} else if (mode != 'close') {
var delta = event.delta.clone();
if (type == 'handleOut' || mode == 'add')
delta = -delta;
currentSegment.handleIn += delta;
currentSegment.handleOut -= delta;
}
}
</script>
</head>
<body>
<p>
An emulation of a vector pen tool.
Click and drag to add a points.<br/>
Drag segment handles and points to manipulate them.
Close the path to start a new one.
</p>
<canvas id="canvas" resize></canvas>
</body>
</html>

54
examples/Tools/SVGCircles.html
View file

@ -1,54 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>SVGCircles</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/javascript" src="../../src/svg/ExportSVG.js"></script>
<script type="text/paperscript" canvas="canvas">
// All newly created items will receive
// these style properties:
project.currentStyle = {
fillColor: 'white',
strokeColor: 'black'
};
var path;
function onMouseDown(event)
{
var radius = 100;
path = new Path.Circle(event.point, radius);
path.selected = true;
var svg = new ExportSVG();
var svgout = svg.exportPath(path);
console.log(svgout);
//making A new circle at a certain point
leftPoint = new Point(44,107);
var leftToTopHandle = new Point(0,55.22847);
var leftToTopHandle2 = new Point(0, -55.228);
rightPoint = new Point(244,107);
bottomPoint = new Point(144,207);
topPoint = new Point(144,7);
path2 = new Path(leftPoint);
path2.arcTo(topPoint, true);
path.removeOnDrag();
};
</script>
</head>
<body>
<canvas id="canvas" resize></canvas>
</body>
</html>

48
examples/Tools/SVGGrid.html
View file

@ -1,48 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Grid</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/javascript" src="../../src/svg/ExportSVG.js"></script>
<script type="text/paperscript" canvas="canvas">
/////////////////////////////////////////////////////////////////////
// Values
tool.fixedDistance = 10;
var values = { size: tool.fixedDistance };
/////////////////////////////////////////////////////////////////////
// Mouse handling
var point, path;
function getPos(pt) {
return (pt / values.size).round() * values.size;
}
function onMouseDown(event) {
point = getPos(event.point);
path = new Path();
path.strokeColor = 'black';
path.add(point);
}
function onMouseDrag(event) {
var p = getPos(event.point);
if (point != p) {
path.add(p);
point = p;
}
var svg = new ExportSVG();
var svgout = svg.exportPath(path);
console.log(svgout);
}
</script>
</head>
<body>
<canvas id="canvas" resize></canvas>
</body>
</html>

32
examples/Tools/SVGRect.html
View file

@ -1,32 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>SVGRect</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/javascript" src="../../src/svg/ExportSVG.js"></script>
<script type="text/paperscript" canvas="canvas">
project.currentStyle =
{
fillColor: 'white',
strokeColor: 'black'
};
var path;
function onMouseDown(event)
{
var size = new Size(100,100);
path = new Path.Rectangle(event.point,size);
var svg = new ExportSVG();
var svgout = svg.exportPath(path);
console.log(svgout);
};
</script>
</head>
<body>
<canvas id="canvas" resize></canvas>
</body>
</html>

34
examples/Tools/SVGStars.html
View file

@ -1,34 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Stars</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/javascript" src="../../src/svg/ExportSVG.js"></script>
<script type="text/paperscript" canvas="canvas">
function onMouseDown(event) {
var hue = Math.random() * 360;
project.currentStyle.fillColor = new HsbColor(hue, 1, 1);
}
function onMouseDrag(event) {
var delta = event.point - event.downPoint;
var radius = delta.length;
var points = 5 + Math.round(radius / 50);
var position = event.downPoint;
var path = new Path.Star(position, points, radius / 2, radius);
var svg = new ExportSVG();
var svgout = svg.exportPath(path);
console.log(svgout);
path.rotate(delta.angle);
// Remove the path automatically before the next mouse drag
// event:
path.removeOnDrag();
}
</script>
</head>
<body>
<canvas id="canvas" resize></canvas>
</body>
</html>