javascript - 在fabric js画布中的组中添加文本和网格线
问题描述
我在下面的代码片段中添加了一行到一个组中。
现在我想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]);
根据您的功能创建带有文本的组或直接添加到画布。
演示
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>
推荐阅读
- maxscript - 模态设置为 true 和 dotNet 控件导致 MaxScript 崩溃
- gitlab-ci - 如果人工 aql 响应而不是状态 200 只是使管道失败
- javascript - 子类构造函数完成时的回调
- jenkins - 以编程方式创建 jobdsl 参数时出错
- python - 用连字符提取数字的正则表达式
- sql - 如何计算两个日期时间字段之间的确切时间?
- c++ - 如何修复程序的体系结构,以便可以在其他类中使用 Base 类的变量?
- python - 当我在 Windows 上安装 Python 并且它没有配置路径时
- excel - 将范围从 Excel 粘贴到 Ppt 作为图像
- python - 在 Python 中的 for 循环中断言