html5-canvas - 如何为 IText Fabricjs 中的每个项目设置绝对位置
问题描述
请帮助我,如何在 IText Fabricjs 中设置每个文本项的绝对位置。在此示例中,我希望文本“KÍNH MỜI”与下方文本对齐水平中心。
预期结果:
这是我的代码:
var canvasObject = document.getElementById("editorCanvas");
// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());
var canvas = new fabric.Canvas('editorCanvas', {
backgroundColor: 'white',
selectionLineWidth: 2,
width: $("#canvasContainer").width(),
height: $("#canvasContainer").height()
});
var textbox1 = new fabric.IText("KÍNH MỜI\n \n.......................................................................................", {
left: 162,
top: 50,
width: 216.125889,
fontSize: 11.3735,
fontFamily: 'Times New Roman',
fontWeight: 'normal',
fill: "#404041",
editable: false,
styles: {
0: {
0: { fontFamily: 'Times New Roman', fontSize: '11.3735', fill: '#404041' }
},
1: {
0: { fontFamily: 'Times New Roman', fontSize: '11.3735', fill: '#404041' }
},
2: {
0: { fontFamily: 'Times New Roman', fontSize: '7.4898', fill: '#404041' }
}
}
});
canvas.add(textbox1);
canvas.renderAll();
#canvasContainer {
width: 100%;
height: 100vh;
background-color: gray;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<div id="canvasContainer">
<canvas id="editorCanvas"></canvas>
</div>
解决方案
你需要textAlign: center
. 我还更改lineHeight
为 1(默认为 1.16)以使其看起来更像您的预期结果。
var canvasObject = document.getElementById("editorCanvas");
// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());
var canvas = new fabric.Canvas('editorCanvas', {
backgroundColor: 'white',
selectionLineWidth: 2,
width: $("#canvasContainer").width(),
height: $("#canvasContainer").height()
});
var textbox1 = new fabric.IText("KÍNH MỜI\n \n.......................................................................................", {
left: 162,
top: 50,
width: 216.125889,
fontSize: 11.3735,
fontFamily: 'Times New Roman',
fontWeight: 'normal',
textAlign: 'center',
lineHeight: 1,
fill: "#404041",
editable: false,
styles: {
0: {
0: { fontFamily: 'Times New Roman', fontSize: '11.3735', fill: '#404041' }
},
1: {
0: { fontFamily: 'Times New Roman', fontSize: '11.3735', fill: '#404041' }
},
2: {
0: { fontFamily: 'Times New Roman', fontSize: '7.4898', fill: '#404041' }
}
}
});
canvas.add(textbox1);
canvas.renderAll();
#canvasContainer {
width: 100%;
height: 100vh;
background-color: gray;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<div id="canvasContainer">
<canvas id="editorCanvas"></canvas>
</div>
推荐阅读
- python - 在 python 中使用 selenium 打开 Firefox
- java - 在 MainActivity 中未使用 getResources().openRawResource 时出错
- machine-learning - 一个简单的神经网络可以学习应用于四个数字总和的 sin 函数吗?
- python - 解决数组任务python
- angular - 特定于平台的样式不继承自组件样式
- amazon-web-services - 创建池后添加 Cognito 自定义属性?
- java - Java 从集合中移除导致 IllegalStateException
- spring - 异步 Firebase 身份验证后不允许过滤器链继续
- html - Bootstrap 4 导航栏项目使菜单太宽
- python - 安装matplotlib的权限被拒绝错误