Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

183
Visualizações
SVG Scale to GCode for CNC carve

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.

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda