<!doctype html> <html> <head> <style> html, body { height: 100%; } canvas[resize] { width:100%; height:100%; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.17/paper-full.js"></script> <script type="text/paperscript" canvas="myCanvas"> var path1= new Path.Circle({center:view.center,radius:150,strokeColor:"red",fillColor:"blue"}); path1.opacity=.2; var path2= new Path.Circle({center:view.center+[100,0],radius:150,strokeColor:"green",fillColor:"skyblue"}); path2.opacity=.2; var g= new Group(); var circle=null; function onMouseDrag(event){ console.log(event.item); event.item.position +=event.delta; var intersections=event.item.getIntersections(event.item.previousSibling||event.item.nextSibling); console.log(intersections); g.removeChildren(); var aux1=null; var aux12=null; for (var i=0;i<intersections.length;i++){ circle= new Path.Circle({center:intersections[i].point, radius:5,strokeColor:"red"}); var line= new Path.Line({from:path1.position,to:path2.position}); line.strokeColor="black"; aux1= new Path(); aux1.strokeColor="green"; aux1.add(intersections[i].point); aux1.add(path1.position); aux2= new Path(); aux2.strokeColor="green"; aux2.add(intersections[i].point); aux2.add(path2.position); g.addChild(circle); g.addChild(line); g.addChild(aux1); g.addChild(aux2); } } function onResize(event){ path1.position=view.center; } </script> </head> <body> <canvas id="myCanvas" resize></canvas> <svg id="svg1"></svg> </body> </html>
반응형
'svg' 카테고리의 다른 글
svg paper.js epicycloid: nephroid (0) | 2024.03.19 |
---|---|
svg paper.js hypocycloid: astroid ... (0) | 2024.03.19 |
svg paper.js sine function: generalized (1) | 2024.03.15 |
svg paper.js sine function: period (0) | 2024.03.14 |
svg paper.js trigonometry : (0) | 2024.03.13 |