<!doctype html>
<html>
<head>
<style>
* {margin:0;}
svg {border:1px solid blue;margin:0}
canvas {border:1px solid red;}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.17/paper-full.js"></script>
<script type="text/paperscript" canvas="myCanvas">
var star=new Path.Star({center:[100,100],points:5,radius1:5,radius2:13})
star.strokeColor="black";
star.position=view.center;
star.rotate(35);
star.selected=false;
var amount=10;
for (var i=0;i<amount;i++){
var offset=star.length/10*i;
var point=star.getPointAt(offset);
var normal=star.getNormalAt(offset)*60;
var line=new Path({
segments:[point,point+normal]
});
line.strokeColor="red";
}
console.log(star.selected);
//mouse event
function onMouseDown(event){
star.rotation +=10;
project.activeLayer.exportSVG();
var svg1=document.getElementById('svg1');
if(svg1.hasChildNodes()){
svg1.innerHTML="";
}
star.fillColor=Color.random();
svg1.appendChild(project.activeLayer.exportSVG());
console.log(star.getLocationAt(.5).getPoint());
}
function onMouseDrag(event){
star.position=event.point;
var svg1=document.getElementById('svg1');
if(svg1.hasChildNodes()){
svg1.innerHTML="";
}
star.fillColor=Color.random();
svg1.appendChild(project.activeLayer.exportSVG());
}
</script>
</head>
<body>
<canvas id="myCanvas"></canvas>
<svg id="svg1"></svg>
</body>
</html>
반응형
'svg' 카테고리의 다른 글
| svg transform matrix: transform attribute value (0) | 2024.02.20 |
|---|---|
| svg viewBox: using viewBox matters. (0) | 2024.02.18 |
| svg paper.js fill ,stroke : inherit value trouble, workaround (0) | 2024.02.06 |
| svg paper.js : tools (0) | 2024.02.04 |
| svg paper.js :MouseEvent, KeyEvent (0) | 2024.02.04 |
