在Fabric JS画布中的组中添加文本和网格线

Question

我按照下面的代码片段在一行中添加了一行。

现在，我想在组的行之间添加fabric.Text 。

我尝试将文本和行作为一个组添加，但是失败了。

它给我像o.setCoords is not a function这样的坐标错误o.setCoords is not a function

任何帮助都会有所帮助。

 var canvas = new fabric.Canvas('c'); let gridSize = 15; $("#addAsGroup").click(() => { canvas.clear(); let separateLines = []; for (let i = 0; i < canvas.getWidth() / gridSize; i++) { let horizontalLine = new fabric.Line( [i * gridSize, 0, i * gridSize, canvas.getWidth()], { stroke: '#000' }); let verticalLine = new fabric.Line( [0, i * gridSize, canvas.getWidth(), i * gridSize], { stroke: '#000' }); separateLines.push(horizontalLine); separateLines.push(verticalLine); } // add lines to group let group = new fabric.Group(separateLines); canvas.add(group); }); $("#addAsSeparateObjects").click(() => { canvas.clear(); let separateLines = []; for (let i = 0; i < canvas.getWidth() / gridSize; i++) { let horizontalLine = new fabric.Line( [i * gridSize, 0, i * gridSize, canvas.getWidth()], { stroke: '#000' }); let verticalLine = new fabric.Line( [0, i * gridSize, canvas.getWidth(), i * gridSize], { stroke: '#000' }); separateLines.push(horizontalLine); separateLines.push(verticalLine); } separateLines.forEach((line) => { canvas.add(line); }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script> <canvas id="c" width="300" height="300"></canvas> <button id="addAsGroup">AddAsGroup</button> <button id="addAsSeparateObjects">AddAsSeparateObjects</button> 

Answer 1

let group = new fabric.Group([...separateLines,text]); 根据您的功能创建带有文本的组或直接添加到画布。

DEMO

 var canvas = new fabric.Canvas('c'); let gridSize = 15; var text = new fabric.Text('Grid',{left:canvas.width/2,top:canvas.height/2}) $("#addAsGroup").click(() => { canvas.clear(); let separateLines = []; for (let i = 0; i < canvas.getWidth() / gridSize; i++) { let horizontalLine = new fabric.Line( [i * gridSize, 0, i * gridSize, canvas.getWidth()], { stroke: '#000' }); let verticalLine = new fabric.Line( [0, i * gridSize, canvas.getWidth(), i * gridSize], { stroke: '#000' }); separateLines.push(horizontalLine); separateLines.push(verticalLine); } // add lines to group let group = new fabric.Group([...separateLines,text]); canvas.add(group); }); $("#addAsSeparateObjects").click(() => { canvas.clear(); let separateLines = []; for (let i = 0; i < canvas.getWidth() / gridSize; i++) { let horizontalLine = new fabric.Line( [i * gridSize, 0, i * gridSize, canvas.getWidth()], { stroke: '#000' }); let verticalLine = new fabric.Line( [0, i * gridSize, canvas.getWidth(), i * gridSize], { stroke: '#000' }); separateLines.push(horizontalLine); separateLines.push(verticalLine); } separateLines.forEach((line) => { canvas.add(line); }) canvas.add(text) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script> <canvas id="c" width="300" height="300"></canvas> <button id="addAsGroup">AddAsGroup</button> <button id="addAsSeparateObjects">AddAsSeparateObjects</button>