解决在预览流程图时,锚点中文字过长导致字体未跟随节点大小缩放的问题

This commit is contained in:
446052889@qq.com 2025-04-10 13:04:29 +08:00
parent 63db31f602
commit 254a70413c
2 changed files with 182 additions and 19 deletions

View File

@ -4686,7 +4686,11 @@ var Designer = {
if (l == "" && o == "") { if (l == "" && o == "") {
continue 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)*/ 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 (1 + 1 == 3) {
// if (c.showType == 'icon' && x.indexOf("&#x") >= 0) {// 图标重构 // if (c.showType == 'icon' && x.indexOf("&#x") >= 0) {// 图标重构
var h = c.horizontal; var h = c.horizontal;
@ -4918,6 +5050,22 @@ var Designer = {
w: D, w: D,
h: a 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); var G = Utils.getRotatedBox(g, i.props.angle, n);
H.attr({ H.attr({
width: G.w.toScale(), width: G.w.toScale(),
@ -4955,8 +5103,8 @@ var Designer = {
if (tempShapeWidth < 100) { if (tempShapeWidth < 100) {
tempShapeWidth = 100; tempShapeWidth = 100;
} }
H[0].width = tempShapeWidth + 10; let words = y.split(' ')
H[0].height = Math.ceil(D / tempShapeWidth) * 10 + 15; if (words.length == 1) {
for (var v = 0; v < Math.ceil(D / tempShapeWidth); v++) { for (var v = 0; v < Math.ceil(D / tempShapeWidth); v++) {
var tempL = (v + 1) * tempShapeWidth; var tempL = (v + 1) * tempShapeWidth;
var tempX = 0; var tempX = 0;
@ -4973,6 +5121,21 @@ var Designer = {
b.fillText(y.substring(v * tempShapeWidth / (D / y.length), D / (D / y.length)), tempX, tempY); 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") { if (h == "mostleft") {
d = -tempShapeWidth + tempShapeWidth * 0.2; d = -tempShapeWidth + tempShapeWidth * 0.2;
H.css({ H.css({
@ -5028,7 +5191,7 @@ var Designer = {
}); });
} }
if (h == "right") { if (h == "right") {
// d = i.props.w - D; d = (i.props.w - D + 4).toScale();
H.css({ H.css({
left: d, left: d,
top: e top: e