解决在预览流程图时,锚点中文字过长导致字体未跟随节点大小缩放的问题
This commit is contained in:
parent
63db31f602
commit
254a70413c
@ -4686,7 +4686,11 @@ var Designer = {
|
||||
if (l == "" && o == "") {
|
||||
continue
|
||||
}
|
||||
m(jjj, l, o)
|
||||
if(o == '') {
|
||||
m(jjj, l)
|
||||
} else {
|
||||
m1(jjj, l, o)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -4711,7 +4715,135 @@ var Designer = {
|
||||
m(j, l, o)*/
|
||||
}
|
||||
|
||||
function m(c, y, x) {
|
||||
|
||||
// 分割字符
|
||||
function getStrLines(text,context,maxWidth) {
|
||||
let words = text.split(' ')
|
||||
let lines = [];
|
||||
let line = ''
|
||||
for (let n = 0; n < words.length; n++) {
|
||||
let testLine = line + words[n] + ' '
|
||||
let metrics = context.measureText(testLine)
|
||||
let testWidth = metrics.width
|
||||
if (testWidth > maxWidth && n > 0) {
|
||||
lines.push(line.trim())
|
||||
line = words[n] + ' '
|
||||
} else {
|
||||
line = testLine
|
||||
}
|
||||
}
|
||||
lines.push(line.trim())
|
||||
return lines
|
||||
}
|
||||
|
||||
function getTextWidth(innerText,fontSize,fontFamily){
|
||||
let hiddenDiv = document.createElement('div')
|
||||
hiddenDiv.style.visibility = 'hidden'
|
||||
hiddenDiv.style.position = 'absolute'
|
||||
hiddenDiv.style.whiteSpace = 'nowrap'
|
||||
hiddenDiv.style.font = fontSize
|
||||
hiddenDiv.style.fontFamily = fontFamily
|
||||
hiddenDiv.innerText = innerText
|
||||
document.body.appendChild(hiddenDiv)
|
||||
let textWidth = hiddenDiv.offsetWidth
|
||||
document.body.removeChild(hiddenDiv)
|
||||
return textWidth
|
||||
}
|
||||
function m(info,text) {
|
||||
let horizontal = info.horizontal // 水平位置
|
||||
let vertical = info.vertical // 垂直位置
|
||||
let textWidth = getTextWidth(text,'12px',i.fontStyle.fontFamily)
|
||||
let textBox = $("<div id='attr_canvas_" + info.id + "' class='attr_canvas'>" + text + "</div>").appendTo($("#" + i.id))
|
||||
let cssObj = {
|
||||
'position': 'absolute',
|
||||
'left': 0,
|
||||
'top': 0,
|
||||
'width': textWidth + 'px',
|
||||
'font-size': '12px',
|
||||
'font-family': i.fontStyle.fontFamily,
|
||||
'word-break': 'normal',
|
||||
'color': '',
|
||||
}
|
||||
if(textWidth > i.props.w) {
|
||||
cssObj.width = i.props.w + 'px'
|
||||
if(i.props.w < 100) {
|
||||
cssObj.width = '100px'
|
||||
}
|
||||
}
|
||||
|
||||
if (info.type == "link") {
|
||||
cssObj.color = "#4183C4"
|
||||
} else {
|
||||
cssObj.color = "#333"
|
||||
}
|
||||
if (info.showType == "text" ||info.showType == "attr" ) {
|
||||
cssObj.color = info.color
|
||||
}
|
||||
textBox.css(cssObj)
|
||||
// 缩放旋转
|
||||
let angle = i.props.angle
|
||||
let newAngle = Math.round(angle / (Math.PI * 2) * 360)
|
||||
let transform = "rotate(" + newAngle + "deg) scale(" + Designer.config.scale + ")"
|
||||
textBox.css({
|
||||
"-webkit-transform": transform,
|
||||
"-ms-transform": transform,
|
||||
"-o-transform": transform,
|
||||
"-moz-transform": transform,
|
||||
"transform-origin": "top left"
|
||||
})
|
||||
let textBoxWidth = textBox.width()
|
||||
let textBoxHeight = textBox.height()
|
||||
let left = 0,top = 0
|
||||
switch (horizontal) {
|
||||
case 'mostleft': // 左外边
|
||||
left = -textBoxWidth - 2
|
||||
break;
|
||||
case 'left': // 左内边
|
||||
left = 2
|
||||
break;
|
||||
case 'center': // 中间
|
||||
left = i.props.w / 2 - textBoxWidth / 2
|
||||
break;
|
||||
case 'right': // 右内边
|
||||
left = i.props.w - textBoxWidth - 2
|
||||
break;
|
||||
case 'mostright': // 右外边
|
||||
left = i.props.w + 2
|
||||
break;
|
||||
}
|
||||
switch (vertical) {
|
||||
case 'mosttop':
|
||||
top = -textBoxHeight
|
||||
break;
|
||||
case 'top':
|
||||
top = 0
|
||||
break;
|
||||
case 'middle':
|
||||
top = i.props.h / 2 - textBoxHeight / 2
|
||||
break;
|
||||
case 'bottom':
|
||||
top = i.props.h - textBoxHeight
|
||||
break;
|
||||
case 'mostbottom':
|
||||
top = i.props.h
|
||||
break;
|
||||
}
|
||||
let g = {
|
||||
x: left,
|
||||
y: top,
|
||||
w: textBoxWidth,
|
||||
h: textBoxHeight
|
||||
}
|
||||
let G = Utils.getRotatedBox(g, i.props.angle, n)
|
||||
let d = (G.x + (i.props.x - k.x) + 10).toScale()
|
||||
let e = (G.y + (i.props.y - k.y) + 10).toScale()
|
||||
textBox.css({
|
||||
left: d,
|
||||
top: e,
|
||||
})
|
||||
}
|
||||
|
||||
function m1(c, y, x) {
|
||||
if (1 + 1 == 3) {
|
||||
// if (c.showType == 'icon' && x.indexOf("&#x") >= 0) {// 图标重构
|
||||
var h = c.horizontal;
|
||||
@ -4918,6 +5050,22 @@ var Designer = {
|
||||
w: D,
|
||||
h: a
|
||||
};
|
||||
|
||||
if(D > i.props.w) {
|
||||
let tempShapeWidth = i.props.w
|
||||
if (tempShapeWidth < 100) {
|
||||
tempShapeWidth = 100
|
||||
}
|
||||
if(y.split(' ').length == 1) {
|
||||
g.w = tempShapeWidth + 10
|
||||
g.h = Math.ceil(D / tempShapeWidth) * 15
|
||||
} else {
|
||||
let lineLength = getStrLines(y,b,tempShapeWidth).length
|
||||
g.w = tempShapeWidth
|
||||
g.h = lineLength * 15
|
||||
}
|
||||
}
|
||||
|
||||
var G = Utils.getRotatedBox(g, i.props.angle, n);
|
||||
H.attr({
|
||||
width: G.w.toScale(),
|
||||
@ -4955,8 +5103,8 @@ var Designer = {
|
||||
if (tempShapeWidth < 100) {
|
||||
tempShapeWidth = 100;
|
||||
}
|
||||
H[0].width = tempShapeWidth + 10;
|
||||
H[0].height = Math.ceil(D / tempShapeWidth) * 10 + 15;
|
||||
let words = y.split(' ')
|
||||
if (words.length == 1) {
|
||||
for (var v = 0; v < Math.ceil(D / tempShapeWidth); v++) {
|
||||
var tempL = (v + 1) * tempShapeWidth;
|
||||
var tempX = 0;
|
||||
@ -4973,6 +5121,21 @@ var Designer = {
|
||||
b.fillText(y.substring(v * tempShapeWidth / (D / y.length), D / (D / y.length)), tempX, tempY);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
let lines = getStrLines(y,b,tempShapeWidth);
|
||||
for (let j = 0; j < lines.length; j++) {
|
||||
var tempX = 0;
|
||||
var tempY = a / 2 + j * 12
|
||||
if (c.showType == "text") {
|
||||
b.fillStyle = "#696969";
|
||||
}
|
||||
if (c.showType == "attr") {
|
||||
b.fillStyle = "#191970";
|
||||
}
|
||||
b.fillText(lines[j], tempX, tempY)
|
||||
}
|
||||
}
|
||||
|
||||
if (h == "mostleft") {
|
||||
d = -tempShapeWidth + tempShapeWidth * 0.2;
|
||||
H.css({
|
||||
@ -5028,7 +5191,7 @@ var Designer = {
|
||||
});
|
||||
}
|
||||
if (h == "right") {
|
||||
// d = i.props.w - D;
|
||||
d = (i.props.w - D + 4).toScale();
|
||||
H.css({
|
||||
left: d,
|
||||
top: e
|
||||
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user