如何减少fabric js中文本对象中的选择区域填充答案

【问题标题】：How to reduce selection area padding in text object in fabric js如何减少fabric js中文本对象中的选择区域填充
【发布时间】：2017-04-14 15:25:13
【问题描述】：

在这里，我们在fabric.js中使用创建设计工具。我们需要减少fabric js中文本对象中选择区域的填充。画布对象文本被突出显示/选择，虽然它与原始大小一样大，但选定的框会延伸到工作区域。这不是用户友好的处理这个问题。如何减少画布对象中的选择区域填充大小。我们尝试在"Canvas.set()" 函数中添加填充，但这不是工作区域的响应/更改。

objss.set({
 borderColor: 'green',
 cornerColor: 'purple',
 CornerSize: 33,
 transparentCorners: false,
 strokeWidth: 10,
padding:4
});

任何帮助将不胜感激。

【问题讨论】：

标签： jquery html canvas fabricjs spacing

【解决方案1】：

我做了一个小 jsfiddle，在 2 个简单的文本对象中，填充（以及因此选定的框）设置为 2 种不同的大小：http://jsfiddle.net/z4fty1de/ 这是你想知道的吗？如果没有，你能在 jsfiddle 上创建一个小例子吗？

canvas.add(new fabric.Text('hello world1', { left: 100, top: 100, padding: 43 }));
canvas.add(new fabric.Text('hello world2', { left: 100, top: 250, padding: 0 }));

【讨论】：

你的想法几乎和我的问题有关。我的问题是“文本”对象无法更改织物 js 中的填充参数。请查看它，让我对此提出一些想法。

【解决方案2】：

如果您选择的框没有正确设置文本，则意味着您的文本在 FONT 之前加载。请参阅 fabric js 示例以使用字体。 http://fabricjs.com/loadfonts

如果您仍然遇到任何问题，请像这样清除您的字体缓存。

fabric.util.clearFabricFontCache(obj.fontFamily); // obj.fontFamily - 是你的字体名称

从 json 加载时的完整示例

this.canvas.getObjects().forEach((obj)=> {
  if(typeof obj.type !== 'undefined' && obj.type=="i-text"){
    this.canvas.setActiveObject(obj);
    fabric.util.clearFabricFontCache(obj.fontFamily);
    this.canvas.getActiveObject().set("fontFamily", obj.fontFamily);
    this.canvas.renderAll();
  }
});

【讨论】：