root/apt-nl-map
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

magic4

Browse Source
This commit is contained in:
蔡玲
2024-12-03 16:40:54 +08:00
parent 6e6dd6a4fc
commit 9d776c65e9
408 changed files with 498647 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
static/Magic4/paperjs-v0.12.15/examples/JSON/Circle Testing.html Normal file
View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Circle Testing</title>
<link rel="stylesheet" href="../css/style.css">
<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();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
</body>
</html>

25
static/Magic4/paperjs-v0.12.15/examples/JSON/Compound Path.html Normal file
View File

@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Compound Path</title>
<link rel="stylesheet" href="../css/style.css">
<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]);
var path2 = new Path.Rectangle([50, 50], [200, 200]);
var path3 = new Path.Rectangle([0, 0], [400, 400]);
new CompoundPath(path1, path2, path3);
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
</body>
</html>

31
static/Magic4/paperjs-v0.12.15/examples/JSON/Empty Path Testing.html Normal file
View File

@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Empty Path Testing</title>
<link rel="stylesheet" href="../css/style.css">
<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>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
</body>
</html>

34
static/Magic4/paperjs-v0.12.15/examples/JSON/Gradients.html Normal file
View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gradients</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
var path = new Path.Circle({
center: view.center,
radius: view.bounds.height * 0.4
});
path.fillColor = {
stops: ['yellow', 'red', 'black'],
radial: true,
origin: path.position,
destination: path.bounds.rightCenter
}
var symbol = new SymbolDefinition(path);
symbol.place(view.center);
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
</body>
</html>

28
static/Magic4/paperjs-v0.12.15/examples/JSON/Group Transform.html Normal file
View File

@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Group Transform</title>
<link rel="stylesheet" href="../css/style.css">
<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';
var circle2 = new Path.Circle(new Point(200, 100), 50);
circle2.fillColor = 'blue';
var group = new Group(circle1, circle2);
group.translate([100, 100]);
group.scale(0.5);
group.rotate(10);
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
</body>
</html>

44
static/Magic4/paperjs-v0.12.15/examples/JSON/Line Testing.html Normal file
View File

@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Line Testing</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
var x1 = 5,
x2 = 45,
y1 = 5,
y2 = 45;
var line1 = new Path.Line([x1, y1], [x2, y2]);
line1.strokeColor = "blue";
line1.strokeWidth = "10";
var x3 = 20,
x4 = 99,
y3 = 20,
y4 = 77;
var line2 = new Path.Line([x3, y3], [x4, y4]);
line2.strokeColor = "red";
line2.strokeWidth = "2";
var x5 = 50,
x6 = 200,
y5 = 55,
y6 = 300;
var line3 = new Path.Line([x5, y5], [x6, y6]);
line3.strokeColor = "yellow";
line3.strokeWidth = "5";
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
</body>
</html>

42
static/Magic4/paperjs-v0.12.15/examples/JSON/Random Path Testing.html Normal file
View File

@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Random Path Testing</title>
<link rel="stylesheet" href="../css/style.css">
<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;
var radius = 50;
var triangle = new Path.RegularPolygon(center, sides, radius);
triangle.fillColor = 'black';
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>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
</body>
</html>

29
static/Magic4/paperjs-v0.12.15/examples/JSON/Raster.html Normal file
View File

File diff suppressed because one or more lines are too long

56
static/Magic4/paperjs-v0.12.15/examples/JSON/Rect and Attribute Testing.html Normal file
View File

@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rectangle Testing</title>
<link rel="stylesheet" href="../css/style.css">
<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);
var rectangle1 = new Rectangle(point1, size1);
var path1 = new Path.Rectangle(rectangle1);
path1.strokeColor = 'black';
path1.fillColor = 'red';
path1.id = "square1";
path1.strokeCap = "square";
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);
path2.strokeColor = 'red';
path2.strokeWidth = '4';
path2.fillColor = 'blue';
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);
var cornerSize4 = new Size(30, 30);
var path4 = new Path.Rectangle(rectangle4, cornerSize4);
path4.strokeColor= 'yellow';
path4.fillColor='purple';
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
</body>
</html>

55
static/Magic4/paperjs-v0.12.15/examples/JSON/Rotated Primitives.html Normal file
View File

@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rotated Primitives</title>
<link rel="stylesheet" href="../css/style.css">
<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.
var path = new Path({
closed: true,
strokeColor: 'black'
});
path.moveTo(0, 0);
path.lineTo(50, 50);
path.lineTo(100, 100);
path.lineTo(-50, 150);
path.position += 100;
var rect = new Path.Rectangle({
point: [200, 100],
size: [200, 300],
fillColor: 'red'
});
rect.rotate(40);
var circle = new Path.Circle({
center: [200, 300],
radius: 100,
fillColor: 'green'
});
circle.scale(0.5, 1);
circle.rotate(40);
var rect = new Path.Rectangle({
point: [250, 20],
size: [200, 300],
radius: [40, 20],
fillColor: 'yellow'
});
rect.rotate(-20);
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
</body>
</html>

43
static/Magic4/paperjs-v0.12.15/examples/JSON/Selection.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Symbols</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
var path = new Path.Ellipse({
from: [10, 10],
to: [200, 100],
fillColor: 'red'
});
path.firstSegment.handleOut.selected = true;
var circle = new Path.Circle({
center: [50, 150],
radius: 25,
fillColor: 'blue'
});
circle.selected = true;
var rectangle = new Path.Rectangle({
from: [25, 200],
to: [100, 225],
fillColor: 'green'
});
rectangle.lastSegment.point.selected = true;
var group = new Group(circle, rectangle);
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
</body>
</html>

54
static/Magic4/paperjs-v0.12.15/examples/JSON/Shapes.html Normal file
View File

@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Symbols</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
var circle = new Shape.Circle({
center: [100, 100],
radius: 50,
fillColor: 'red'
});
var ellipse = new Shape.Ellipse({
center: [100, 200],
radius: [50, 25],
fillColor: 'blue',
strokeColor: 'black',
strokeWidth: 4,
rotation: 20
});
var rect = new Shape.Rectangle({
center: [100, 300],
size: [100, 50],
fillColor: 'green',
strokeColor: 'black',
strokeWidth: 4,
rotation: -20
});
var roundRect = new Shape.Rectangle({
center: [100, 400],
size: [50, 100],
radius: [15, 20],
fillColor: 'orange',
strokeColor: 'black',
strokeWidth: 4,
rotation: 20
});
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
</body>
</html>

30
static/Magic4/paperjs-v0.12.15/examples/JSON/Symbols.html Normal file
View File

@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Symbols</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1">
var ellipse = new Path.Ellipse({
from: [0, 0],
to: [200, 100],
fillColor: 'red'
});
var symbol = new SymbolDefinition(ellipse);
var p1 = symbol.place([100, 100]);
p1.rotate(45);
var p2 = symbol.place([300, 200]);
p2.rotate(-30);
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
</body>
</html>

38
static/Magic4/paperjs-v0.12.15/examples/JSON/Text Testing.html Normal file
View File

@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Text Testing</title>
<link rel="stylesheet" href="../css/style.css">
<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';
text.content = 'This is also a test';
/*
text.scale(5);
text.translate(15, 15);
text.rotate(20);
text.shear(20, 5);
*/
text.rotate(45);
text.shear(.85, .15);
text.scale(.85, 2);
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
</body>
</html>

19
static/Magic4/paperjs-v0.12.15/examples/JSON/Tiger.html Normal file
View File

File diff suppressed because one or more lines are too long

32
static/Magic4/paperjs-v0.12.15/examples/JSON/Transform Test 1.html Normal file
View File

@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Transform Testing</title>
<link rel="stylesheet" href="../css/style.css">
<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';
circlePath.fillColor = 'white';
var clones = 30;
var angle = 360 / clones;
for (var i = 0; i < clones; i++) {
var clonedPath = circlePath.clone();
clonedPath.rotate(angle * i, circlePath.bounds.topLeft);
};
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
</body>
</html>

30
static/Magic4/paperjs-v0.12.15/examples/JSON/Transform Test 2.html Normal file
View File

@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rectangle Testing</title>
<link rel="stylesheet" href="../css/style.css">
<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 = {
fillColor: 'white',
strokeColor: 'black'
};
var copy = path.clone();
copy.strokeColor = 'red';
copy.rotate(-45);
copy.scale(0.5);
window._json = project.exportJSON();
console.log(window._json);
</script>
<script type="text/paperscript" canvas="canvas2">
project.importJSON(window._json);
</script>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
</body>
</html>