Any (FabricJS) SVG -> GCode gods out there?
I'm making an SVG using FabricJS in the browser (Chromium based at present), adding other SVG's to it and text, etc - using opentype js to convert the text to path and inserting the path into fabricJS canvas. I'm looking to save for CNC carve via GCode conversion at an exact canvas size of 98mm by 98mm.
No matter what I set my viewbox and width and height to, the GCode converter that I'm using (JSCut) scales huge and I need some help getting that width/height sorted so I can reliably convert SVG>GCode at 98mmX98mm. Can anyone offer any thoughts?
My canvas size is 277.9 square.
Logic behind 277.9 is: 98mm to inches > 3.86inches 72ppi x 3.86inches = 277.9px
The JS Save code is:
var _all = canvas.getObjects();
for(a=0;a<_all.length;a++) {
var activeObject = _all[a];
if(activeObject.type=="textbox"){
opentype.load('fonts/'+activeObject.fontFamily+'.ttf', function(err, font) {
if (err) {
alert('Font could not be loaded: ' + err);
} else {
// Now let's display it on a canvas with id "canvas"
const ctx = document.getElementById('ami_canvas').getContext('2d');
const path = font.getPath(activeObject.text, (activeObject.width/2)/2, (activeObject.height + activeObject.top), activeObject.fontSize);
canvas.remove(activeObject);
const outlinetextpath = new fabric.Path(path.toPathData(3));
canvas.insertAt(outlinetextpath,0);
}
});
}
}
groupAll() // <-- Function below
canvas.renderAll();
GetCanvasAtResoution(277.9); // <-- Function below
let svg = canvas.toSVG();
Group function:
function groupAll (){
var items = canvas.getObjects();
group = new fabric.Group(items);
for (var i = 0; i < items.length; i++) {
canvas.remove(items[i]);
}
canvas.add(group);
canvas.renderAll();
}
GetCanvasAtResolution()
function GetCanvasAtResoution(newWidth) {
if (canvas.width != newWidth) {
var scaleMultiplier = newWidth / canvas.width;
var objects = canvas.getObjects();
for (var i in objects) {
objects[i].scaleX = objects[i].scaleX * scaleMultiplier;
objects[i].scaleY = objects[i].scaleY * scaleMultiplier;
objects[i].left = objects[i].left * scaleMultiplier;
objects[i].top = objects[i].top * scaleMultiplier;
objects[i].setCoords();
}
canvas.discardActiveObject();
canvas.setWidth(canvas.getWidth() * scaleMultiplier);
canvas.setHeight(canvas.getHeight() * scaleMultiplier);
canvas.calcOffset();
canvas.renderAll();
}
}
Any help would be greatly appreciated.