source: main/trunk/model-sites-dev/von-sparql/js/paper/examples/SVG Export/Clipping.html@ 28914

Last change on this file since 28914 was 28914, checked in by ak19, 10 years ago

Supporting javascript libraries and bespoke code written by Steffan to support the von-sparql user interface
File size: 7.2 KB
Line 
1<!DOCTYPE html>
2<html>
3<head>
4 <meta charset="UTF-8">
5 <title>Clipping</title>
6 <script type="text/javascript" src="../../dist/paper.js"></script>
7 <script type="text/paperscript" canvas="canvas">
8 project.importJSON('[["Layer",{"children":[["Group",{"name":"Layer_1","children":[["Group",{"children":[["Group",{"children":[["Path",{"segments":[[[353,198],[0,-56.885],[0,56.885]],[[250,301],[56.886,0],[-56.885,0]],[[147,198],[0,56.885],[0,-56.885]],[[250,95],[-56.885,0],[56.886,0]]],"closed":true,"strokeColor":[0.80784,0.80784,0.80784],"leading":14.4}],["Path",{"segments":[[137,198],[137,85],[250,85],[250,198]],"closed":true,"strokeColor":[0.80784,0.80784,0.80784],"leading":14.4}]]}],["Group",{"children":[["Group",{"children":[["Group",{"children":[["Path",{"name":"SVGID_2_","clipMask":true,"segments":[[137,198],[137,85],[250,85],[250,198]],"closed":true,"leading":14.4}],["Path",{"segments":[[[147,198],[0,56.88533],[0,-56.88533]],[[250,95],[-56.88533,0],[56.88533,0]],[[353,198],[0,-56.88533],[0,56.88533]],[[250,301],[56.88533,0],[-56.88533,0]]],"closed":true,"fillColor":[0,1,0.11765],"strokeColor":[1,0,0],"strokeWidth":10,"leading":14.4}]]}]]}]]}]]}],["Group",{"children":[["Group",{"children":[["CompoundPath",{"pathData":"M353,491.911c0,56.885 -46.114,103 -103,103c-56.885,0 -103,-46.115 -103,-103c0,-56.885 46.115,-103 103,-103c56.886,0 103,46.115 103,103z M250,409.512c-45.508,0 -82.4,36.892 -82.4,82.399c0,45.507 36.893,82.4 82.4,82.4c45.509,0 82.399,-36.894 82.399,-82.4c0.001,-45.508 -36.89,-82.399 -82.399,-82.399z","strokeColor":[0.80784,0.80784,0.80784],"leading":14.4}],["Path",{"segments":[[137,491.911],[137,378.911],[250,378.911],[250,491.911]],"closed":true,"strokeColor":[0.80784,0.80784,0.80784],"leading":14.4}]]}],["Group",{"children":[["Group",{"children":[["Group",{"children":[["Path",{"name":"SVGID_4_","clipMask":true,"segments":[[137,491.911],[137,378.911],[250,378.911],[250,491.911]],"closed":true,"leading":14.4}],["CompoundPath",{"pathData":"M353,491.911c0,56.885 -46.114,103 -103,103c-56.885,0 -103,-46.115 -103,-103c0,-56.885 46.115,-103 103,-103c56.886,0 103,46.115 103,103z M250,409.512c-45.508,0 -82.4,36.892 -82.4,82.399c0,45.507 36.893,82.4 82.4,82.4c45.509,0 82.399,-36.894 82.399,-82.4c0.001,-45.508 -36.89,-82.399 -82.399,-82.399z","fillColor":[0,1,0.11765],"strokeColor":[1,0,0],"strokeWidth":10,"leading":14.4}]]}]]}]]}]]}],["Group",{"children":[["Group",{"children":[["CompoundPath",{"pathData":"M353,785.823c0,56.885 -46.114,103 -103,103c-56.885,0 -103,-46.115 -103,-103c0,-56.886 46.115,-103 103,-103c56.886,0 103,46.115 103,103z M250,703.423c-45.508,0 -82.4,36.892 -82.4,82.4c0,45.508 36.893,82.399 82.4,82.399c45.509,0 82.399,-36.893 82.399,-82.399c0.001,-45.509 -36.89,-82.4 -82.399,-82.4z","strokeColor":[0.80784,0.80784,0.80784],"leading":14.4}],["Path",{"segments":[[137,785.823],[137,672.822],[250,672.822],[250,785.823]],"closed":true,"strokeColor":[0.80784,0.80784,0.80784],"leading":14.4}],["Path",{"segments":[[137,785.823],[137,672.822],[250,672.822],[250,785.823]],"closed":true,"strokeColor":[0.80784,0.80784,0.80784],"leading":14.4}]]}],["Group",{"children":[["Group",{"children":[["Group",{"children":[["CompoundPath",{"name":"SVGID_6_","clipMask":true,"pathData":"M353,785.823c0,56.885 -46.114,103 -103,103c-56.885,0 -103,-46.115 -103,-103c0,-56.886 46.115,-103 103,-103c56.886,0 103,46.115 103,103z M250,703.423c-45.508,0 -82.4,36.892 -82.4,82.4c0,45.508 36.893,82.399 82.4,82.399c45.509,0 82.399,-36.893 82.399,-82.399c0.001,-45.509 -36.89,-82.4 -82.399,-82.4z","leading":14.4}],["Path",{"segments":[[137,785.823],[137,672.822],[250,672.822],[250,785.823]],"closed":true,"fillColor":[0,1,0.11765],"strokeColor":[1,0,0],"strokeWidth":10,"leading":14.4}]]}]]}]]}]]}],["PointText",{"matrix":[1,0,0,1,83.5002,68.5],"content":"Clipping a path with a path:","fillColor":[0,0,0],"font":"Helvetica","leading":14.4}],["PointText",{"matrix":[1,0,0,1,83.5002,355.5],"content":"Clipping a compound path with a path:","fillColor":[0,0,0],"font":"Helvetica","leading":14.4}],["PointText",{"matrix":[1,0,0,1,83.5002,650.5],"content":"Clipping a path with a compound path:","fillColor":[0,0,0],"font":"Helvetica","leading":14.4}],["PointText",{"matrix":[1,0,0,1,83.5002,941.5],"content":"Clipping a group with a path:","fillColor":[0,0,0],"font":"Helvetica","leading":14.4}],["Group",{"children":[["Group",{"children":[["Path",{"name":"SVGID_8_","clipMask":true,"segments":[[153,1082.999],[153,969.998],[266,969.998],[266,1082.999]],"closed":true,"leading":14.4}],["Path",{"segments":[[[135,965.998],[0,11.87412],[0,-11.87412]],[[156.5,944.498],[-11.87412,0],[11.87412,0]],[[178,965.998],[0,-11.87412],[0,11.87412]],[[156.5,987.498],[11.87412,0],[-11.87412,0]]],"closed":true,"fillColor":[0,1,0.11765],"strokeColor":[1,0,0],"strokeWidth":10,"leading":14.4}],["Path",{"segments":[[[188,965.998],[0,11.87412],[0,-11.87412]],[[209.5,944.498],[-11.87412,0],[11.87412,0]],[[231,965.998],[0,-11.87412],[0,11.87412]],[[209.5,987.498],[11.87412,0],[-11.87412,0]]],"closed":true,"fillColor":[0,1,0.11765],"strokeColor":[1,0,0],"strokeWidth":10,"leading":14.4}],["Path",{"segments":[[[241,965.998],[0,11.87412],[0,-11.87412]],[[262.5,944.498],[-11.87412,0],[11.87412,0]],[[284,965.998],[0,-11.87412],[0,11.87412]],[[262.5,987.498],[11.87412,0],[-11.87412,0]]],"closed":true,"fillColor":[0,1,0.11765],"strokeColor":[1,0,0],"strokeWidth":10,"leading":14.4}],["Path",{"segments":[[[135,1018.999],[0,11.87412],[0,-11.87412]],[[156.5,997.499],[-11.87412,0],[11.87412,0]],[[178,1018.999],[0,-11.87412],[0,11.87412]],[[156.5,1040.499],[11.87412,0],[-11.87412,0]]],"closed":true,"fillColor":[0,1,0.11765],"strokeColor":[1,0,0],"strokeWidth":10,"leading":14.4}],["Path",{"segments":[[[188,1018.999],[0,11.87412],[0,-11.87412]],[[209.5,997.499],[-11.87412,0],[11.87412,0]],[[231,1018.999],[0,-11.87412],[0,11.87412]],[[209.5,1040.499],[11.87412,0],[-11.87412,0]]],"closed":true,"fillColor":[0,1,0.11765],"strokeColor":[1,0,0],"strokeWidth":10,"leading":14.4}],["Path",{"segments":[[[241,1018.999],[0,11.87412],[0,-11.87412]],[[262.5,997.499],[-11.87412,0],[11.87412,0]],[[284,1018.999],[0,-11.87412],[0,11.87412]],[[262.5,1040.499],[11.87412,0],[-11.87412,0]]],"closed":true,"fillColor":[0,1,0.11765],"strokeColor":[1,0,0],"strokeWidth":10,"leading":14.4}],["Path",{"segments":[[[135,1072.001],[0,11.87412],[0,-11.87412]],[[156.5,1050.501],[-11.87412,0],[11.87412,0]],[[178,1072.001],[0,-11.87412],[0,11.87412]],[[156.5,1093.501],[11.87412,0],[-11.87412,0]]],"closed":true,"fillColor":[0,1,0.11765],"strokeColor":[1,0,0],"strokeWidth":10,"leading":14.4}],["Path",{"segments":[[[188,1072.001],[0,11.87412],[0,-11.87412]],[[209.5,1050.501],[-11.87412,0],[11.87412,0]],[[231,1072.001],[0,-11.87412],[0,11.87412]],[[209.5,1093.501],[11.87412,0],[-11.87412,0]]],"closed":true,"fillColor":[0,1,0.11765],"strokeColor":[1,0,0],"strokeWidth":10,"leading":14.4}],["Path",{"segments":[[[241,1072.001],[0,11.87412],[0,-11.87412]],[[262.5,1050.501],[-11.87412,0],[11.87412,0]],[[284,1072.001],[0,-11.87412],[0,11.87412]],[[262.5,1093.501],[11.87412,0],[-11.87412,0]]],"closed":true,"fillColor":[0,1,0.11765],"strokeColor":[1,0,0],"strokeWidth":10,"leading":14.4}]]}]]}]]}]]}]]');
9 document.getElementById('svg').appendChild(project.exportSVG());
10 </script>
11</head>
12<body>
13 <canvas id="canvas" width="400" height="1500"></canvas>
14 <svg id="svg" width="400" height="1500"></svg>
15</body>
16</html>
Note: See TracBrowser for help on using the repository browser.