| 1 | <!DOCTYPE html>
|
|---|
| 2 | <html>
|
|---|
| 3 | <head>
|
|---|
| 4 | <meta charset="UTF-8">
|
|---|
| 5 | <title>Rect Testing</title>
|
|---|
| 6 | <link rel="stylesheet" href="../css/style.css">
|
|---|
| 7 | <script type="text/javascript" src="../../dist/paper.js"></script>
|
|---|
| 8 | <script type="text/paperscript" canvas="canvas">
|
|---|
| 9 | project.importSVG(document.getElementById('svg'));
|
|---|
| 10 | </script>
|
|---|
| 11 | <style type="text/css">
|
|---|
| 12 | .Border { fill:none; stroke:blue; stroke-width:1; }
|
|---|
| 13 | .Connect { fill:none; stroke:#888888; stroke-width:2; }
|
|---|
| 14 | .SamplePath { fill:none; stroke:red; stroke-width:5; }
|
|---|
| 15 | .EndPoint { fill:none; stroke:#888888; stroke-width:2; }
|
|---|
| 16 | .CtlPoint { fill:#888888; stroke:none; }
|
|---|
| 17 | .AutoCtlPoint { fill:none; stroke:blue; stroke-width:4; }
|
|---|
| 18 | .Label { font-size:22px; font-family: Verdana; }
|
|---|
| 19 | </style>
|
|---|
| 20 | </head>
|
|---|
| 21 | <body>
|
|---|
| 22 | <svg id="svg" width="500" height="500"
|
|---|
| 23 | xmlns="http://www.w3.org/2000/svg" version="1.1">
|
|---|
| 24 | <polyline class="Connect" points="100,200 100,100" />
|
|---|
| 25 | <polyline class="Connect" points="250,100 250,200" />
|
|---|
| 26 | <polyline class="Connect" points="250,200 250,300" />
|
|---|
| 27 | <polyline class="Connect" points="400,300 400,200" />
|
|---|
| 28 | <path class="SamplePath" d="M100,200 C100,100 250,100 250,200
|
|---|
| 29 | S400,300 400,200" />
|
|---|
| 30 | <circle class="EndPoint" cx="100" cy="200" r="10" />
|
|---|
| 31 | <circle class="EndPoint" cx="250" cy="200" r="10" />
|
|---|
| 32 | <circle class="EndPoint" cx="400" cy="200" r="10" />
|
|---|
| 33 | <circle class="CtlPoint" cx="100" cy="100" r="10" />
|
|---|
| 34 | <circle class="CtlPoint" cx="250" cy="100" r="10" />
|
|---|
| 35 | <circle class="CtlPoint" cx="400" cy="300" r="10" />
|
|---|
| 36 | <circle class="AutoCtlPoint" cx="250" cy="300" r="9" />
|
|---|
| 37 | <text class="Label" x="25" y="70">M100,200 C100,100 250,100 250,200</text>
|
|---|
| 38 | <text class="Label" x="325" y="350"
|
|---|
| 39 | style="text-anchor:middle">S400,300 400,200</text>
|
|---|
| 40 | </svg>
|
|---|
| 41 | <canvas id="canvas" width="500" height="500"></canvas>
|
|---|
| 42 | </body>
|
|---|
| 43 | </html> |
|---|
