[英]How to get Text object font-size after modifying object
在fabric.js中修改對象后,如何獲取Text對象的字體大小?
以下是我的代碼。
var text = new fabric.Text(imgText, {
left: 10,
top: 5,
fontSize: 15,
fontFamily: 'Verdana',
fill: 'white'
});
text.scaleToWidth(canvas.width * 0.5);
text.setControlsVisibility(canvasConfig);
canvas.add(text);
canvas.renderAll();
var objects = canvas.getActiveObject();
var obj = objects;
if (!obj) {
return;
}
//console.log(obj.get('fontSize') *= obj.scaleX);
var angle = obj.get('angle');
var objWidth = obj.get('width') * obj.scaleX;
var objWidthPercent = objWidth / canvas.width * 100;
var objHeight = obj.get('height') * obj.scaleY;
var objHeightPercent = objHeight / canvas.height * 100;
var bound = obj.getBoundingRect();
var objLeft = obj.get('left') / canvas.width * 100;
var objTop = obj.get('top') / canvas.height * 100;
var newfontsize = obj.fontSize * obj.scaleX;
上面我將默認FontSize設置為15.然后我修改對象我可以獲得正確的Height, Width, Left, Top,
但我無法獲得FontSize。
在后端我設置圖像和文本,如下面的截圖。
在前端我得到如下截圖。
下面是前端圖像和文字的樣式。
element.style {
left: 64.37%;
top: 14.54%;
width: 28.25%;
height: 14.37%;
font-size: 63.58px;
color: #E346FF;
font-family: Times New Roman;
position: absolute;
max-width: 100%;
z-index: 996;
max-height: 100%;
}
element.style {
left: 56.5%;
top: 0.81%;
width: 42.86%;
height: 42.86%;
max-width: 100%;
max-height: 100%;
position: absolute;
z-index: 995;
display: block;
background-image: url(http://10.16.16.101/LabelExtension/pub/media/labelimageuploader/images/image/o/r/orange_38.png);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
當我添加下面的代碼時它工作完美但在后端對象變得模糊。
this.canvas.setHeight(300);
this.canvas.setWidth(240);
this.canvas.backgroundColor = '#E8EEF1';
this.canvas.setDimensions({width: '480px', height: '600px'}, {cssOnly: true});
以下是將Fabric.js字體轉換與CSS轉換相匹配的方法: https ://jsfiddle.net/mmalex/evpky3tn/
解決方案是匹配文本的轉換, 而不是嘗試調整字體大小 。
步驟1 - 准備場景,撰寫畫布,用矩形分組文本,讓用戶操作該組,旋轉並縮放它。
var canvas = new fabric.Canvas(document.getElementById('c'));
var rect = new fabric.Rect({
width: 50,
height: 50,
left: 90,
top: 120,
fill: 'rgba(255,0,0,0.25)'
});
var text = new fabric.Text("123", {
left: rect.left,
top: rect.top,
fontSize: 15,
fontFamily: 'Verdana',
fill: 'black'
});
text.scaleToWidth(rect.width);
canvas.add(text);
var group = new fabric.Group([rect, text], {
originX: 'center',
originY: 'center',
angle: 25,
scaleY: 1.7
});
canvas.add(group);
canvas.renderAll();
第2步 - 准備DIV樣式進行縮放
.scaled { // this style is applied to DIV element with text
...
font-size: 15px; // Fabric.js text is also 15px size
transform: scale(1, 1); // define initial transform
transition: all 0.25s linear; // let it animate
...
}
第3步 - 評估Fabric.js轉換並在DIV元素上應用CSS,例如:
element.style {
transform: rotate(25deg) scale(1.74774, 2.97116);
}
解決方案(也就是按鈕處理程序)將Fabric.js轉換為CSS轉換:
function matchCssTransform() {
let textScale = text.getTotalObjectScaling();
let pixelRatio = window.devicePixelRatio;
let styleStr = `rotate(${group.angle}deg) scale(${textScale.scaleX / pixelRatio}, ${textScale.scaleY / pixelRatio}) `;
document.getElementById("scaled").style.transform = styleStr;
}
getHeightOfLine(lineIndex)→{Number}:計算給定位置的字符高度並返回字符的fontSize。 是嗎? 告訴我。 這是一種文本類的方法。 http://fabricjs.com/docs/fabric.Text.html#getHeightOfLine
這是vanilla js解決方案。
我無法獲得FontSize。
你可以使用computedStyle來實現fontSize
let style = window.getComputedStyle(text, null).getPropertyValue('font-size');
let fontSize = parseFloat(style);
https://developer.mozilla.org/de/docs/Web/API/Window/getComputedStyle
除此之外,我建議你使用vw
和vh
.text {
font-size: 10vw;
}
https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/
問題是Text對象在修改或轉換時不會更改其fontSize屬性,除非手動設置fontSize屬性。 這就是為什么你得到模糊文本的原因,因為盡管改變了變換大小,但主要的fontSize保持不變。 因此,可能的解決方案將以某種方式動態更改fontSize屬性。 http://jsfiddle.net/therowf/xkhwagd8/41/這里我附上了一個代碼的jsfiddle示例。 此代碼與您的代碼非常相似。
謝謝,讓我知道這是否有效。 (:
var canvas = new fabric.Canvas(document.getElementById('c')); var imgText ="This is text"; var canvasConfig = true; var text = new fabric.Text(imgText, { left: 10, top: 5, fontSize: 50, fontFamily: 'Verdana', fill: 'black' }); text.scaleToWidth(canvas.width * 0.5); text.setControlsVisibility(canvasConfig); canvas.add(text); canvas.renderAll(); var objects = canvas.getActiveObject(); function moveHandler(evt){ //evt.target.fontSize = 10; var fontSizeX = evt.target.scaleX; var fontSizeY = evt.target.scaleY; if(fontSizeX === fontSizeY){ evt.target.fontSize = fontSizeX*100; console.log(evt.target.fontSize); } } canvas.on('object:scaling', moveHandler);
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.6.0/fabric.min.js"></script> <canvas id="c" width="400" height="400"></canvas>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.