<!DOCTYPE html>
<html>
<head>
<style>
canvas,svg {width:800px;height:800px;}
</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 circle=new Path.Circle({center:view.center,radius:50,strokeColor:"red"});
var rectangle=new Path.Rectangle({
point:view.center,size:new Size(200,100),strokeColor:"blue"});
var com_path=circle.divide(rectangle);
com_path.children[0].position +=-50;
com_path.children[1].position +=50;
//circle.remove();
function onFrame(event){
var offset=Math.cos(event.count/30)*30;
com_path.children[0].position =circle.position-50+offset;
com_path.children[1].position =circle.position+50-offset;
var svg1=document.getElementById('svg1');
svg1.innerHTML="";
svg1.appendChild(project.activeLayer.exportSVG());
}
var svg1=document.getElementById('svg1');
svg1.appendChild(project.activeLayer.exportSVG());
</script>
</head>
<body>
<canvas id="myCanvas" resize></canvas>
<svg id="svg1"></svg>
</body>
</html>
반응형
'svg' 카테고리의 다른 글
| svg paper.js getOffsetsWithTangent(): (0) | 2024.03.06 |
|---|---|
| svg paper.js path1.divide(path2): (0) | 2024.03.03 |
| svg paper.js clipped: group (3) | 2024.02.28 |
| svg raster; (1) | 2024.02.27 |
| svg paper.js getPointAt(): onFrame event (0) | 2024.02.27 |
