mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2024-12-28 17:02:24 -05:00
25 lines
1.7 KiB
HTML
25 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Rect Testing</title>
|
|
<link rel="stylesheet" href="../css/style.css">
|
|
<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));
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500" id="svg">
|
|
<rect rx="20" ry="10" width="50px" height="50px" style="fill:green; stroke:black; stroke-width:5px" id="round1" data-paper-data='{"string":"----","number":1234,"array":["a ray","some rays"],"bool":true,"nil":null,"point":["Point",12,34],"size":["Size",12,34],"rectangle":["Rectangle",12,34,56,78],"deep":{"deeper":{"deepest":true}}}' />
|
|
<rect x="100" y="10" rx="20" ry="10" width="75px" height="75px" style="fill:red; stroke: brown; stroke-width:1px; fill-opacity:.5; stroke-opacity:.9" id="round2" />
|
|
<rect x="10" y="300" rx="20" ry="10" width="75px" height="150px" style="fill:blue; opacity:.5" id="round3" />
|
|
<rect x="50" y="100" rx="20" ry="10" width="150px" height="150px" style="fill: orange" id="round4" />
|
|
<rect x="300" y="10" width="50" height="50px" fill="gold" style="stroke-dasharray: 10, 4; stroke: black; stroke-width:5px" id="rect1" />
|
|
<rect x="300" y="300" width="100" height="100px" fill="pink" style="stroke-dasharray: 10, 4; stroke-width:50px;" id="rect2" />
|
|
<rect x="300" y="180" width="178" height="100px" fill="hotpink" style="stroke-dasharray: 10, 4; stroke-width:10px;" id="rect3" />
|
|
</svg>
|
|
<canvas id="canvas" width="500" height="500"></canvas>
|
|
</body>
|
|
</html>
|