<!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 |
