<!doctype html>
<html>
<head>
<style>
canvas,svg {width:900px;
height:900px;}
</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">
// Create a raster item using the image tag with id='hydra'
var raster = new Raster('hydra');
// Move the raster to the center of the view
raster.position = view.position;
raster.applyMatrix=false;
//var path= new Path.Circle({center:view.center,radius:250,strokeColor:"black"});
var path= new Path.Ellipse({point:view.center-[200,200],size: new Size(400,200),strokeColor:"black"});
//var path= new Path.Circle({center:view.center,radius:250,strokeColor:"black"});
var path= new Path.Ellipse({point:view.center-[200,200],size: new Size(400,200),strokeColor:"black"});
function onFrame(event){
var slowness=400;
var time=event.count % slowness /slowness;
updateRect(time);}
function updateRect(time){
var point=path.getPointAt(time*path.length);
var tangent=path.getTangentAt(time*path.length);
//console.log("tangent",tangent);
// Move the raster to the center of the view
raster.position = point;
raster.rotation=(180-tangent.angle);
raster.scaling=Math.abs(tangent.angle)/90;
raster.strokeWidth=Math.abs(tangent.angle)/2;
updateSvg();
}
function updateSvg(){
var svg1=document.querySelector("#svg1");
svg1.innerHTML="";
var svg=project.activeLayer.exportSVG();
svg1.appendChild(svg);
}
</script>
</head>
<body>
<canvas id="myCanvas"></canvas>
<svg id="svg1"></svg>
<img id="hydra" src="https://tistory4.daumcdn.net/tistory/6522157/skin/images/Hydrangeas.jpg" crossOrigin="anynomous">
</body>
</html>
반응형
'svg' 카테고리의 다른 글
| svg boolean operation : divide! (0) | 2024.02.29 |
|---|---|
| svg paper.js clipped: group (3) | 2024.02.28 |
| svg paper.js getPointAt(): onFrame event (0) | 2024.02.27 |
| svg paper.js ellipse:move event and trace (0) | 2024.02.25 |
| svg paper.js sine curve: onDoubleClick event; (0) | 2024.02.23 |
