nth order Bezier eğrisi kodlama

Question

Bir proje için tuval üzerine javascript içinde nth order bezier kodlamaya çalışılıyor. Kullanıcının her bir son noktayı ve kontrol noktalarını seçmek için 'b' şeklinde bir düğmeye basmasını istiyorum. Şimdiye kadar, tuşa basmada fare koordinatlarını alıp yerleşik fonksiyonları kullanarak kuadratik ve bezier eğrileri oluşturabiliyorum. İlk sipariş için nasıl kod yazabilirim?

Answer 1

İşte inci mertebeden Bezier eğrilerinin bir JavaScript uygulaması var:

// setup canvas 
 
var canvas = document.getElementById('canvas'); 
 
var ctx = canvas.getContext('2d'); 
 

 
canvas.height = window.innerHeight; 
 
canvas.width = window.innerWidth; 
 

 
ctx.fillText("INSTRUCTIONS: Press the 'b' key to add points to your curve. Press the 'c' key to clear all points and start over.", 20, 20); 
 

 
// initialize points list 
 
var plist = []; 
 

 
// track mouse movements 
 
var mouseX; 
 
var mouseY; 
 

 
document.addEventListener("mousemove", function(e) { 
 
    mouseX = e.clientX; 
 
    mouseY = e.clientY; 
 
}); 
 

 
// from: http://rosettacode.org/wiki/Evaluate_binomial_coefficients#JavaScript 
 
function binom(n, k) { 
 
    var coeff = 1; 
 
    for (var i = n - k + 1; i <= n; i++) coeff *= i; 
 
    for (var i = 1; i <= k; i++) coeff /= i; 
 
    return coeff; 
 
} 
 

 
// based on: https://stackoverflow.com/questions/16227300 
 
function bezier(t, plist) { 
 
    var order = plist.length - 1; 
 

 
    var y = 0; 
 
    var x = 0; 
 

 
    for (i = 0; i <= order; i++) { 
 
    x = x + (binom(order, i) * Math.pow((1 - t), (order - i)) * Math.pow(t, i) * (plist[i].x)); 
 
    y = y + (binom(order, i) * Math.pow((1 - t), (order - i)) * Math.pow(t, i) * (plist[i].y)); 
 
    } 
 

 
    return { 
 
    x: x, 
 
    y: y 
 
    }; 
 
} 
 

 
// draw the Bezier curve 
 
function draw(plist) { 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    var accuracy = 0.01; //this'll give the 100 bezier segments 
 
    ctx.beginPath(); 
 
    ctx.moveTo(plist[0].x, plist[0].y); 
 

 
    for (p in plist) { 
 
    ctx.fillText(p, plist[p].x + 5, plist[p].y - 5); 
 
    ctx.fillRect(plist[p].x - 5, plist[p].y - 5, 10, 10); 
 
    } 
 

 
    for (var i = 0; i < 1; i += accuracy) { 
 
    var p = bezier(i, plist); 
 
    ctx.lineTo(p.x, p.y); 
 
    } 
 

 
    ctx.stroke(); 
 
    ctx.closePath(); 
 
} 
 

 
// listen for keypress 
 
document.addEventListener("keydown", function(e) { 
 
    switch (e.keyCode) { 
 
    case 66: 
 
     // b key 
 
     plist.push({ 
 
     x: mouseX, 
 
     y: mouseY 
 
     }); 
 
     break; 
 
    case 67: 
 
     // c key 
 
     plist = []; 
 
     break; 
 
    } 
 
    draw(plist); 
 
});

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0 auto; 
 
}

<canvas id="canvas"></canvas>

Bu this implementation of cubic Bezier curves dayanmaktadır. Uygulamanızda, kullanıcı tanımlı noktalar ile points dizisini doldurmak istediğiniz gibi geliyor.