¿Algún (FabricJS) SVG -> GCode dioses por ahí?
Estoy haciendo un SVG usando FabricJS en el navegador (basado en Chromium en la actualidad), agregándole otros SVG y texto, etc. - usando opentype js para convertir el texto en ruta e insertando la ruta en el lienzo de fabricJS. Estoy buscando ahorrar para tallar CNC a través de la conversión de GCode en un tamaño de lienzo exacto de 98 mm por 98 mm.
No importa a qué ajuste mi viewbox y el ancho y el alto, el convertidor GCode que estoy usando (JSCut) se escala enormemente y necesito ayuda para ordenar ese ancho/alto para poder convertir SVG> GCode de manera confiable a 98 mmX98 mm. ¿Alguien puede ofrecer alguna idea?
El tamaño de mi lienzo es de 277,9 cuadrados.
La lógica detrás de 277,9 es: 98 mm a pulgadas > 3,86 pulgadas 72ppi x 3,86 pulgadas = 277,9 px
El código JS Save es:
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();
Función de grupo:
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(); } }
Cualquier ayuda sería muy apreciada.