<!doctype html>
<html>
<head>
<style>
canvas,svg {width:800px;height:800px;}
</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 path=new Path("M 62 125 C 102 11 118 250 146 127");
path.strokeColor="red";
path.fullySelected=true;
var offsets=path.getOffsetsWithTangent(new Point(1,0));
for (var i=0;i<offsets.length;i++){
var point =path.getPointAt(offsets[i]);
var circle=new Path.Circle({center:point,radius:5,strokeColor:"red"});
}
console.log(offsets);
var svg1=document.getElementById("svg1");
svg1.appendChild(project.exportSVG());
</script>
</head>
<body>
<canvas id="myCanvas"></canvas>
<svg id="svg1"></svg>
</body>
</html>
반응형
'svg' 카테고리의 다른 글
| svg paper.js sine curve : event onMouseDown (0) | 2024.03.09 |
|---|---|
| svg paper.js getPart : divide and conquer (0) | 2024.03.08 |
| svg paper.js path1.divide(path2): (0) | 2024.03.03 |
| svg boolean operation : divide! (0) | 2024.02.29 |
| svg paper.js clipped: group (3) | 2024.02.28 |
