jonobr1 / two.js

A renderer agnostic two-dimensional drawing api for the web.
https://two.js.org
MIT License
8.27k stars 454 forks source link

creating curve path using anchors and make path not working ! #714

Closed AmirRafiee closed 9 months ago

AmirRafiee commented 9 months ago

i can't figure out what i'm missing here but this code is drawing straight line instead of curve line


// Create two anchors with coordinates and control points
var anchor1 = new Two.Anchor(100, 100, 50, 50, 150, 150, Two.Commands.curve);
var anchor2 = new Two.Anchor(200, 200, 250, 250, 150, 150, Two.Commands.curve);

// Use the two.makePath function to create a bezier curve
var curve = two.makePath([anchor1, anchor2], false);

// Style the curve
curve.fill = 'none';
curve.stroke = '#333';
curve.linewidth = 5;

i have tried move command but still draw a staight line

im using v0.8.12

AmirRafiee commented 9 months ago

Sorry for my miss understanding i shouldn't report this as a bug. i didnt know about automatic property due to poor documentation thanks for your great lib

let bezierPath = two.makePath([firstPoint, secondPoint], false)
bezierPath.automatic = false;
bezierPath.fill = 'none';
jonobr1 commented 9 months ago

Glad you were able to figure it out. If you want to rely on the automatic property and still draw curved lines you can do this:

let path = two.makeCurve(x1, y1, x2, y2);
// Or
path = two.makePath(x1, y1, x2, y2);
path.curved = true;