<!DOCTYPE html> <html> <head> <style> canvas,svg {width:800px;height:500px;} </style> <!-- Load the Paper.js library --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.17/paper-full.js"></script> <!-- Define inlined PaperScript associate it with myCanvas --> <script type="text/paperscript" canvas="myCanvas"> // Create a Paper.js Path to draw a line into it: var path = new Path(); // Give the stroke a color path.strokeColor = 'black'; var start = new Point(100, 100); // Move to start and draw a line from there path.moveTo(start); // Note the plus operator on Point objects. // PaperScript does that for us, and much more! path.lineTo(start + [ 100, -50 ]); var path2=new Path([100,100],[50,100]); path2.strokeColor="black"; var circle1=new Path.Circle({center:[0,0],radius:50}); circle1.strokeColor="red"; var offset=0; var g=new Group(); g.position=project.view.center; function onFrame(e){ if(offset<314){ offset +=1; var point1=circle1.getPointAt(offset); var rad=point1.getAngleInRadians(); var circle2=new Path.Circle({center:new Point(100,100)+point1,radius:5}); circle2.fillColor="red"; circle2.rotate(180,100,100); circle2.scale(1,-1,100,100); var circle3=new Path.Circle({center: new Point(300,100)+[100+rad*50,point1.y],radius:5}); circle3.fillColor="red"; //g.addChild(circle2); //g.addChild(circle3); console.log(offset," ",rad); } } view.onDoubleClick=function(e){ console.log("yes"); var svg1=document.querySelector('#svg1'); var svg=project.activeLayer.exportSVG(); console.log(svg); svg1.appendChild(svg); } var svg=project.activeLayer.exportSVG(); console.log(svg); svg1.appendChild(svg); </script> </head> <body> <canvas id="myCanvas" resize></canvas> <svg id="svg1"></svg> </body> </html>
반응형
'svg' 카테고리의 다른 글
svg paper.js getPointAt(): onFrame event (0) | 2024.02.27 |
---|---|
svg paper.js ellipse:move event and trace (0) | 2024.02.25 |
svg path parser: (0) | 2024.02.21 |
svg transform matrix: transform attribute value (0) | 2024.02.20 |
svg viewBox: using viewBox matters. (0) | 2024.02.18 |