Usando Fabricjs 2.3.6
He buscado y buscado soluciones. He estado tratando de resolver esto durante meses. He leído todas las publicaciones sobre el desbordamiento de pila relacionadas con las cuadrículas de fabricjs. También he leído las publicaciones en los grupos de Google fabricjs y, en general, busqué en la red. Siempre dudo en publicar aquí debido a mi falta de conocimiento en comparación con otros.
Tengo 3 preguntas, pero estaría feliz con cualquier ayuda que decidas ofrecer.
¿Cómo resuelvo los siguientes problemas?
rejilla fabricjs -> ¿Cómo mantener la capa de fondo? (He intentado usar canvas.sendToBack(), pero parece que no puedo hacerlo funcionar.
entrada del usuario--> ¿Cómo usar la entrada para el ancho y alto del tamaño de la cuadrícula?
tamaño de la cuadrícula--> ¿Cómo usar una altura y un ancho diferentes? (Entonces, la cuadrícula podría ser 40X50, 40X60, 50X50, etc.)**
El siguiente es el código para generar una grilla simple en fabricjs. Puedo generar varios tamaños de cuadrícula, pero la altura y el ancho son los mismos.
var canvas = new fabric.Canvas('c'); canvas.setHeight(700); canvas.setWidth(700); $("#grid").click(function() { var grid60 = 116.6; //divide 700 by 6 in order to get 60'x60' grid var grid50 = 140; //divide 700 by 5 in order to get a 50'x50 grid var grid40 = 175; //divide 700 by 4 in order to get a 40'x40 grid // create grid //horizontal lines for (var i = 0; i < (700 / grid40); i++) { canvas.add(new fabric.Line([i * grid40, 0, i * grid40, 700], { stroke: '#ccc', selectable: false })); //vertical lines canvas.add(new fabric.Line([0, i * grid40, 700, i * grid40], { stroke: '#ccc', selectable: false })); } //A possible solution that I found for question 1. It seems to work. var objects = canvas.getObjects('line'); for (let i in objects) { canvas.sendToBack(objects[i]); });