我需要了解如何在fabricjs textbox对象中添加省略号和块文本框大小。我在网上搜索了一些有用的材料,我找到了一把小提琴,它的效果和我想达到的效果非常相似。问题是在不同的结构版本中,fiddle适用于1.6,我需要它来适用于4.3.1。
fabric.Textbox.prototype._wrapLine = function(ctx, text, lineIndex) {
var lineWidth = 0,
lines = [],
line = '',
words = text.split(' '),
word = '',
letter = '',
offset = 0,
infix = ' ',
wordWidth = 0,
infixWidth = 0,
letterWidth = 0,
largestWordWidth = 0;
for (var i = 0; i < words.length; i++) {
word = words[i];
wordWidth = this._measureText(ctx, word, lineIndex, offset);
lineWidth += infixWidth;
// Break Words if wordWidth is greater than textbox width
if (this.breakWords && wordWidth > this.width) {
line += infix;
var wordLetters = word.split('');
while (wordLetters.length) {
letterWidth = this._getWidthOfChar(ctx, wordLetters[0], lineIndex, offset);
if (lineWidth + letterWidth > this.width) {
lines.push(line);
line = '';
lineWidth = 0;
}
line += wordLetters.shift();
offset++;
lineWidth += letterWidth;
}
word = '';
} else {
lineWidth += wordWidth;
}
if (lineWidth >= this.width && line !== '') {
lines.push(line);
line = '';
lineWidth = wordWidth;
}
if (line !== '' || i === 1) {
line += infix;
}
line += word;
offset += word.length;
infixWidth = this._measureText(ctx, infix, lineIndex, offset);
offset++;
// keep track of largest word
if (wordWidth > largestWordWidth && !this.breakWords) {
largestWordWidth = wordWidth;
}
}
i && lines.push(line);
if (largestWordWidth > this.dynamicMinWidth) {
this.dynamicMinWidth = largestWordWidth;
}
return lines.slice(0,this.cHeight/this.lineHeight/this.fontSize);
};
var _fabric = new fabric.Canvas('breaker');
_fabric.setBackgroundColor('#eee', _fabric.renderAll.bind(_fabric));
var curWidth = document.getElementById('breaker').width;
var curHeight = document.getElementById('breaker').height;
var longText="ABCDEFEFABCDEFEFABCDEFEFABCDEFEFABCDEFEFABCDEFEFABCDEFEFABCDEFEFABCDEFEFABCDEFEFABCDEFEF";
var breakingTextbox = new fabric.Textbox(longText,
{
width: curWidth / 2,
cHeight: curHeight/2,
left: curWidth / 2,
top: 180,
fill: '#333',
cursorWidth: 0.5,
originX: 'center',
originY: 'top',
textAlign: 'center',
breakWords: true
});
_fabric.add(breakingTextbox).setActiveObject(breakingTextbox);
breakingTextbox.enterEditing();
http://jsfiddle.net/3j352toh/19/ -我想要达到的效果(fabricjs 1.6)
https://jsfiddle.net/tjablonski/gru9dh13/2/ -未经修改的干净小提琴(fabricjs 4.3.1)
暂无答案!
目前还没有任何答案,快来回答吧!