<!DOCTYPE html>
<html>
<head>
<style>
svg,canvas {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">
var width=800;
var height=800;
var num=10;
//vertical line
for (var i=0;i<num;i++){
var line=new Path([i*width/num,0],[i*width/num,height]);
line.strokeColor="gray";
}
//horizontal line
for (var i=0;i<num;i++){
var line=new Path([0,i*height/num],[height,i*height/num]);
line.strokeColor="gray";
}
var circle=new Path.Circle({center:view.center,radius:10,fillColor:"red"});
var layer2=new Layer();
var size=new Size([width/num,height/num]);
var rectangle = new Rectangle(view.center-[0,height/num], size);
var path = new Path.Rectangle(rectangle);
path.fillColor = '#e9e9ff';
path.selected = true;
for (var i=0;i<num;i++){
var line=new Path([i*width/num,0],[i*width/num,height]);
line.strokeColor="green";
}
//horizontal line
for (var i=0;i<num;i++){
var line=new Path([0,i*height/num],[height,i*height/num]);
line.strokeColor="green";
}
function onMouseUp(event){
var time=event.count;
project.activeLayer.skew([-.03*time,0],view.center);}
var vectorStart, vector
var vectorItem
function processVector(event) {
vector = event.point - vectorStart;
drawVector();
}
function drawVector() {
if (vectorItem)
vectorItem.remove();
var arrowVector = vector.normalize(10);
var end = vectorStart + vector;
var vector2=new Point();
vector2.x=3*vector.x+1*vector.y;
vector2.y=1*vector.x+2*vector.y;
var end2 = vectorStart + vector2;
vectorItem = new Group([
new Path([vectorStart, end]),
new Path([
end + arrowVector.rotate(135),
end,
end + arrowVector.rotate(-135)
])
]);
vectorItem.strokeWidth = 1.75;
vectorItem.strokeColor = '#e4141b';
vectorItem2 = new Group([
new Path([vectorStart, end2]),
new Path([
end2 + arrowVector.rotate(135),
end2,
end2 + arrowVector.rotate(-135)
])
]);
vectorItem2.strokeWidth = 0.75;
vectorItem2.strokeColor = 'blue';
// Display:
}
function onMouseDown(event) {
vectorStart=view.center;
processVector(event);
// document.redraw();
}
</script>
</head>
<body>
<canvas id="myCanvas" resize></canvas>
<svg id="svg1"></svg>
</body>
</html>
반응형
'svg' 카테고리의 다른 글
| svg paper.js quadrant : (0) | 2024.04.21 |
|---|---|
| svg paper.js astroid : area from Green's Theorem (1) | 2024.03.30 |
| svg paper.js cycloid: (0) | 2024.03.22 |
| svg paper.js epicycloid & hypocycloid : astroid and quatrefoiloid (0) | 2024.03.22 |
| svg paper.js epicycloid : circles (0) | 2024.03.21 |
