Comment utiliser cette bibliothèque appelée bezierjs?

J'ai un tirage de toile qui a des courbes et je veux connaître la taille de celui-ci comme l'un des exemples de cette bibliothèque.Comment utiliser cette bibliothèque appelée bezierjs?

https://github.com/Pomax/bezierjs

Exemple: Size of a curve

Comment puis-je combiner votre exemple avec ma toile dessiner?

Ceci est mon code javascript:

<script type="text/javascript"> 
var canvas=document.getElementById("canvas"); 
var ctx=canvas.getContext("2d"); 

c_size = 650; 

ctx.canvas.width = c_size; 
ctx.canvas.height = c_size; 

ctx.beginPath(); 
ctx.strokeStyle = 'blue'; 
ctx.moveTo(535,105); 
ctx.quadraticCurveTo(585,44,620,115); 
ctx.quadraticCurveTo(628,155,643,155); 
ctx.quadraticCurveTo(628,195,643,360); 
ctx.lineTo(550,368); 
ctx.lineTo(538,302); 
ctx.lineTo(552,285); 
ctx.quadraticCurveTo(528,195,535,105); 
ctx.stroke(); 
</script> 
<canvas id='canvas' width='650' height='650' style="border: 1px solid #000"> 
Canvas not supported 
</canvas>

Source

2017-08-24 Developer933

Ajouté bezier tag .. permet de voir si non pomax apparaît. : -] – K3N

Je ne vois rien dans votre code qui essaie d'utiliser Bezier.js pour obtenir des informations de courbe. En ce moment, vous n'utilisez que du canvas - ce qui est bien, canvas + SVG vient avec de nombreuses opérations de dessin et de mesure. Mais fait aussi une question sur "Avez-vous besoin de Bezier.js? Qu'est-ce que vous essayez de faire **?" –

Je suis assez sûr Je vous donne l'API sur le the actual page for this library. Comme toute bibliothèque de navigateur, incluez-la sur votre page (cela ne devrait pas nécessiter d'instructions explicites), puis appelez simplement la bibliothèque comme indiqué: créez une instance, puis appelez les fonctions api décrites dans la documentation en ligne.

Notez également qu'en HTML5, vous n'indiquez pas le type de script à moins que ce soit et non JavaScript. Alors:

<!doctype html> 
<html> 
    ... 
    <script src="bezier.js"></script> 
    ... 
    <canvas id="mycanvas"></canvas> 
    ... 
    <script src="yourscript.js">?</script> 
    ... 
</html>

Et puis dans votre propre fichier:

const cvs = document.getElementById("mycanvas"); 
const size = 650; 
cvs.width = size; 
cvs.height = size; 
let ctx = cvs.getContext("2d"); 

// now do things. Like this: 
const curve = new Bezier(/* some coordinates here */); 
const p = curve.points, 
     p1 = p[0], 
     p2 = p[1], 
     p3 = p[2], 
     p4 = p[3]; 

// draw the curve 
ctx.beginPath(); 
ctx.moveTo(p1.x,p1.y); 
ctx.curveTo(p2.x,p2.y, p3.x,p3.y, p4.x,p4.y); 
ctx.stroke(); 

// what do we know about the curve? 
let len = curve.length(); 
let bbox = JSON.stringify(curve.bbox()); 
let msg = `The curve has length ${len} and bounds ${bbox}`; 
document.getElementById('infopanel').textContent = msg;

Notez que Bezier.js est pas lui-même une bibliothèque de dessin, il est une bibliothèque de mathématiques pour travailler avec des courbes de Bézier. Canvas a un tracé de courbe quadratique et cubique intégré (comme le jeu d'instructions de cheminement SVG). Bezierjs est une bibliothèque de support pour "obtenir des informations sur vos courbes" comme leur longueur d'arc, LUT de points sur la courbe, calcul d'intersection, etc

Source

2017-08-26 17:29:16

Comment utiliser cette bibliothèque appelée bezierjs?

Répondre

Questions connexes