如何减少结构js中文本对象的选区填充

时间:2016-11-30 10:35:28

标签: jquery html canvas fabricjs spacing

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

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

enter image description here

任何帮助都将不胜感激。

2 个答案:

答案 0 :(得分:1)

我制作了一个小的jsfiddle,在2个简单的文本对象中,填充(以及所选的框)设置为2种不同的大小:http://jsfiddle.net/z4fty1de/ 这是你想知道的吗?如果没有,你能在jsfiddle上创建一个小例子吗?

ToString

答案 1 :(得分:1)

如果您选择的框与文本设置不正确,则表示您的文本在FONT之前加载。请参阅fabrics 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();
  }
});