[英]How to reduce selection area padding in text object in fabric js
在这里,我们在fabric.js中使用创建设计工具。我们需要减少fabric js中文本对象中选择区域的填充。 画布对象文本被高亮/选中,虽然它和原始大小一样大,但选定的框会延伸到工作区域。这对处理这个问题不太友好。如何减少画布对象中的选择区域填充大小。 我们尝试在"Canvas.set()"
函数中添加填充,但它不是工作区域的响应/更改。
objss.set({
borderColor: 'green',
cornerColor: 'purple',
CornerSize: 33,
transparentCorners: false,
strokeWidth: 10,
padding:4
});
任何帮助将不胜感激。
我做了一个小 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 }));
如果您选择的框未正确设置文本,则意味着您的文本在 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();
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.