我按照下面的代码片段将一行添加到组中。
现在我想在组的行之间添加fabric.Text
。
我尝试将文本和线条作为一个组添加,但失败了。
它给了我一个坐标错误,例如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>
最佳答案
let group = new Fabric.Group([...separateLines,text]);
根据您的功能创建一个包含文本的组或直接添加到 Canvas 。
演示
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>
关于javascript - 在fabric js Canvas 中添加文本和网格线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50869515/