Skip to content

Instantly share code, notes, and snippets.

@paulkaplan
Last active February 2, 2024 08:30
Show Gist options
  • Save paulkaplan/6050109 to your computer and use it in GitHub Desktop.
Save paulkaplan/6050109 to your computer and use it in GitHub Desktop.
Cubic bezier curves with fabric.js renderer
var CubicBezier = function(canvas, opts){
if(!opts) opts = {};
this.start = opts.start || new Vec2(100,100);
this.end = opts.end || new Vec2(400, 400);
this.c1 = opts.c1 || new Vec2(100, 300);
this.c2 = opts.c2 || new Vec2(300, 100);
this.curve = new fabric.Path( this.toSVGPath() );
this.controlCurve = new fabric.Path( this.toControlPath() );
this.curve.selectable = this.controlCurve.selectable = false;
this.curve.fill = this.controlCurve.fill = 'none'
this.curve.stroke= 'black';
this.controlCurve.stroke = 'blue';
this.controlCurve.strokeDashArray = [5, 5];
canvas.add( this.curve );
canvas.renderAll();
// this.renderControlPoints( canvas );
canvas.calcOffset();
}
CubicBezier.prototype = {
toSVGPath : function(){
var str = "M"+this.start.toString();
str += "C"+this.c1.toString();
str += this.c2.toString();
str += this.end.toString();
return str
},
toControlPath : function(){
var str = "M"+this.start.toString();
str += "L"+this.c1.toString();
str += "L"+this.c2.toString();
str += "L"+this.end.toString();
return str
},
renderControlPoints : function(canvas){
var scope = this;
var r = 10;
var points = [
new fabric.Circle({ top: this.start.y, left: this.start.x,radius:r, as : 'start' }),
new fabric.Circle({ top: this.end.y, left: this.end.x, radius:r, as : 'end' }),
new fabric.Circle({ top: this.c1.y, left: this.c1.x, radius:r, as : 'c1' }),
new fabric.Circle({ top: this.c2.y, left: this.c2.x, radius:r, as : 'c2' })
];
points.forEach( function(p){
p.fill = '#f55';
p.stroke = "#2B436E"
p.hasControls = p.hasBorder = false;
p.belongsTo = scope;
canvas.add(p);
})
},
renderCurve : function(canvas){
var dummyPath = new fabric.Path( this.toSVGPath() );
this.curve.path = dummyPath.path;
var dummyPath2 = new fabric.Path( this.toControlPath() );
this.controlCurve.path = dummyPath2.path;
// canvas.renderAll();
},
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment