<!DOCTYPE html>
<!-- saved from url=(0036)file:///C:/Users/ibox/Desktop/z.html -->
<html lang="tr"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-16LE">
<title>Draggable Circles & Spline</title>
<style>
/* Sayfa ve container stilleri */
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
margin: 0;
}
#container {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
text-align: center;
}
/* Canvas stil */
canvas {
border: 1px solid #ccc;
background-color: #fff;
display: block;
margin: 0 auto;
}
/* Modern buton stilleri */
button {
margin: 5px;
padding: 10px 20px;
font-size: 16px;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: opacity 0.3s;
}
button:hover {
opacity: 0.9;
}
#redBtn { background-color: #e74c3c; }
#blueBtn { background-color: #3498db; }
#greenBtn { background-color: #2ecc71; }
/* Trackbar stili */
input[type=range] {
width: 100%;
margin: 10px 0;
}
</style>
<style type="text/css" id="operaUserStyle"></style></head>
<body>
<div id="container">
<canvas id="canvas" width="700" height="450"></canvas>
<div>
<button id="redBtn">Kırmızı</button>
<button id="blueBtn">Mavi</button>
<button id="greenBtn">Yeşil</button>
</div>
<div>
<label for="thickness">Spline Kalınlığı:</label>
<input type="range" id="thickness" min="1" max="100" value="40">
</div>
</div>
<script>
// Canvas ve context alınır.
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// Dairelerin başlangıç konumları (örnek)
let circles = [
{ x: 185, y: 72, r: 5 },
{ x: 348, y: 72, r: 5 },
{ x: 508, y: 233, r: 5 },
{ x: 512, y: 400, r: 5 }
];
// Spline özellikleri
let splineColor = '#e74c3c'; // varsayılan renk siyah
let splineThickness = 4;
// Sürükleme için değişkenler
let draggingIndex = null;
let offsetX, offsetY;
// Çizim fonksiyonu
function draw() {
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Önce düz çizgiler çiziliyor (son daire ile ilk arasında çizgi yok)
ctx.strokeStyle = "#888";
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(circles[0].x, circles[0].y);
for (let i = 1; i < circles.length; i++) {
ctx.lineTo(circles[i].x, circles[i].y);
}
ctx.stroke();
// Daireleri çiziyoruz
circles.forEach(circle => {
ctx.fillStyle = "#8ff";
ctx.strokeStyle = "#888";
ctx.lineWidth = 1;
ctx.beginPath();
ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2);
ctx.fill();
ctx.stroke();
});
// Spline çizgisini çiz (Catmull-Rom spline)
drawSpline(circles);
}
function pnrml(pp1,pp2,dik)
{
var ou={x:pp1.x-pp2.x,y:pp1.y-pp2.y};
let zz=Math.sqrt(ou.x*ou.x+ou.y*ou.y);
if(zz!=0.0) { ou.x/=zz; ou.y/=zz; } else { ou.x=0.0; ou.y=0.0; }
if(dik!=0) { zz=ou.x; ou.x=-ou.y; ou.y=zz; }
return ou;
}
function padd(pp1,pp2) { var ou={x:pp1.x+pp2.x,y:pp1.y+pp2.y}; return ou; }
function pdot(pp1,pp2) { var ou=0.0; ou=pp1.x*pp2.x+pp1.y*pp2.y; return ou; }
function pmul(pp1,pp2) { var ou={x:pp1.x*pp2,y:pp1.y*pp2}; return ou; }
function puzt(pp1,pp2,uzk) { var ou=pnrml(pp1,pp2,0); ou=pmul(ou,uzk); ou=padd(pp2,ou); return ou; }
function drawSpline(points) {
if(points.length < 2) return;
ctx.beginPath();
var vsn;
const sizz=splineThickness*5.0;
var dairer= splineThickness*10.0;
var dairknr1=dairer*1.5;
let fr;
vsn=pnrml(points[1],points[0],1);
let kju={x:vsn.y,y:-vsn.x};
fr= Math.acos(vsn.x); if(vsn.y<0.0) fr=-fr;
// ctx.arc(points[0].x, points[0].y, dairer, Math.PI*2.0 +fr-dairaci, Math.PI*1.0 +fr+dairaci);
dairer*=0.5;
let dgrr=Math.PI*1.5; let yer=points[0]; J=pmul(kju,dairer*2); yer=padd(yer,J);
for(let i = 0; i < 4; i++){ let J;
if(i==0) { J=pmul(vsn,dairer); yer=padd(yer,J); }
if(i==1) { J=pmul(kju,-dairer*4); yer=padd(yer,J); }
if(i==2) { J=pmul(vsn,-dairer*2.0); yer=padd(yer,J); }
if(i==3) { J=pmul(kju,dairer*4); yer=padd(yer,J); }
ctx.arc(yer.x, yer.y, dairer, dgrr +fr , dgrr-Math.PI*1.5 +fr); dgrr+=Math.PI*0.5;
}
dairer/=0.5;
for(let i = 0; i < points.length - 1; i++){
let U;
let vn=pnrml(points[i],points[i+1],1);
if(i==0) { U=pmul(vn,sizz); U=padd(U, puzt(points[1],points[0],dairknr1)); ctx.moveTo(U.x,U.y); }
if(i!=0) { U=padd(vn,vsn); U=pmul(U,0.5); const H=pdot(U,vn); U=pmul(U,sizz/H); U=padd(U,points[i]); ctx.lineTo(U.x,U.y); }
vsn=vn;
}
let U=pmul(vsn,sizz); U=padd(U, puzt(points[points.length - 2],points[points.length - 1],dairknr)); ctx.lineTo(U.x,U.y);
var dairknr=Math.sqrt(dairer*dairer-sizz*sizz);
var dairaci= Math.acos(sizz/dairer);
fr= Math.acos(vsn.x); if(vsn.y<0.0) fr=-fr;
ctx.arc(points[points.length-1].x, points[points.length-1].y, dairer, Math.PI*2.0 +fr-dairaci, Math.PI*1.0 +fr+dairaci);
for(let i = points.length - 1; i >=1 ; i--){
let U;
let vn=pnrml(points[i],points[i-1],1);
if(i==points.length - 1) { U=pmul(vn,sizz); U=padd(U, puzt(points[i-1],points[i],dairknr)); ctx.lineTo(U.x,U.y); }
if(i!=0) { U=padd(vn,vsn); U=pmul(U,0.5); const H=pdot(U,vn); U=pmul(U,sizz/H); U=padd(U,points[i]); ctx.lineTo(U.x,U.y); }
vsn=vn;
}
U=pmul(vsn,sizz); U=padd(U, puzt(points[1],points[0],dairknr1)); ctx.lineTo(U.x,U.y);
ctx.strokeStyle = splineColor;
ctx.lineWidth = 3.0;
ctx.stroke();
}
// Fare olayları
canvas.addEventListener('mousedown', (e) => {
const rect = canvas.getBoundingClientRect();
const mouseX = e.clientX - rect.left;
const mouseY = e.clientY - rect.top;
// Her daire için kontrol: fare daire içine mi?
circles.forEach((circle, index) => {
const dx = mouseX - circle.x;
const dy = mouseY - circle.y;
if(Math.sqrt(dx*dx + dy*dy) < circle.r + 25){ // biraz tolerans eklenebilir
draggingIndex = index;
offsetX = dx;
offsetY = dy;
}
});
});
canvas.addEventListener('mousemove', (e) => {
if(draggingIndex !== null){
const rect = canvas.getBoundingClientRect();
const mouseX = e.clientX - rect.left;
const mouseY = e.clientY - rect.top;
// Sürüklenen dairenin konumunu güncelle
circles[draggingIndex].x = mouseX - offsetX;
circles[draggingIndex].y = mouseY - offsetY;
draw();
}
});
canvas.addEventListener('mouseup', () => {
draggingIndex = null;
});
canvas.addEventListener('mouseleave', () => {
draggingIndex = null;
});
// Butonlar için event listener
document.getElementById('redBtn').addEventListener('click', () => {
splineColor = "#e74c3c";
draw();
});
document.getElementById('blueBtn').addEventListener('click', () => {
splineColor = "#3498db";
draw();
});
document.getElementById('greenBtn').addEventListener('click', () => {
splineColor = "#2ecc71";
draw();
});
// Trackbar (range input) için event listener
document.getElementById('thickness').addEventListener('input', (e) => {
splineThickness = e.target.value*0.1;
draw();
});
// İlk çizim
draw();
</script>
</body></html>