[英]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.