<!doctype html>
<html>
<head>
<style>
canvas {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 circle1= new Path.Circle({center:[70,100],radius:70,strokeColor:"black"});
var circle2= new Path.Circle({center:[100,100],radius:1,strokeColor:"black"});
var circle3= new Path.Circle({center:[70,100],radius:1,strokeColor:"red"});
var circle4= new Path.Circle({center:[130,100],radius:1,strokeColor:"red"});
var line1= new Path.Line({from:[70,100],to:circle2.position,strokeColor:"green"});
var line2= new Path.Line({from:[130,100],to:circle2.position,strokeColor:"red"});
function onMouseMove(event){
var hitPoint=circle1.hitTest(event.point);
if(hitPoint){
circle2.position=event.point;
line1.segments[1].point=event.point;
line2.segments[1].point=event.point;
if(hitPoint.location.offset>circle1.length*.5){
var point1=line2.getPointAt(line2.length*.5);
var point2=line2.getNormalAt(line2.length*.5)*-100;
}else{
var point1=line2.getPointAt(line2.length*.5);
var point2=line2.getNormalAt(line2.length*.5)*100;
};
console.log("line2",line2);
var lineNormal= new Path.Line({from:point1,to:point1+point2,strokeColor:"blue"});
var intersections=line1.getIntersections(lineNormal);
console.log(intersections[0]);
var circle5= new Path.Circle({center:intersections[0].point,radius:1,strokeColor:"red"});
}
}
</script>
</head>
<body>
<canvas id="myCanvas"></canvas>
<svg id="svg1"></svg>
</body>
</html>
반응형
'svg' 카테고리의 다른 글
| svg raster; (0) | 2024.02.27 |
|---|---|
| svg paper.js getPointAt(): onFrame event (0) | 2024.02.27 |
| svg paper.js sine curve: onDoubleClick event; (0) | 2024.02.23 |
| svg path parser: (0) | 2024.02.21 |
| svg transform matrix: transform attribute value (0) | 2024.02.20 |
