解决在预览流程图时,锚点中文字过长导致字体未跟随节点大小缩放的问题
This commit is contained in:
parent
63db31f602
commit
254a70413c
@ -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
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user