如何向用户提供在形状内添加或更改文本的能力,例如圆圈。
假设我有以下代码片段,如何在用户单击圆圈并写入内容时添加文本:
var canvas = new fabric.Canvas('c1');
var circle = new fabric.Circle({radius: 30, fill: '#f55', top: 100, left: 100});
canvas.selectionColor = 'rgba(0,255,0,0.3)';
canvas.selectionBorderColor = 'red';
canvas.selectionLineWidth = 5;
canvas.add(circle);
我找到了question关于这一点,但问题是我希望用户在 Canvas 中的每个形状中添加文本。
最佳答案
您可以使用 the question you found's code只需做一点修改即可。
您首先必须弄清楚用户在 Canvas 上单击的位置,并查看那里有哪些字段文本。为此,请查看 this answer和 this jsfiddle .
function collides(rects, x, y) {
var isCollision = false;
for (var i = 0, len = rects.length; i < len; i++) {
var left = rects[i].x, right = rects[i].x+rects[i].w;
var top = rects[i].y, bottom = rects[i].y+rects[i].h;
if (right >= x
&& left <= x
&& bottom >= y
&& top <= y) {
isCollision = rects[i];
}
}
return isCollision;
}
一旦您知道点击了哪个文本字段,您就可以编辑该字段。
关于javascript - 用户向形状添加文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19567687/