//本文档是图形输出的接口实现
const JpcFigureOutput = {
offsetX: 0,
offsetY: 0,
scaleFactor: 1,
_iniCavas: function(canvas, width, height) {
if (canvas) {
let ctx = canvas.getContext('2d');
}
},
_draw: function(ctx, figure, saveAsData = false, pageIdx = 1) {
if (figure.imageData) {
//直接图形输出
ctx.putImageData(figure.imageData, figure.area.Left + this.offsetX, figure.area.Top + this.offsetY);
} else {
let width = figure.area.Right - figure.area.Left;
let height = figure.area.Bottom - figure.area.Top;
let xSteps = figure.coordinateAxis.axisX.steps;
let ySteps = figure.coordinateAxis.axisY.steps;
let xStepW = width / xSteps;
let yStepH = height / ySteps;
ctx.save();
ctx.translate(0.5,0.5);
ctx.beginPath();
if (figure.coordinateAxis.axisX.isShowLine) {
//画竖线
for (let idx = 0; idx < xSteps; idx++) {
ctx.lineWidth = 1;
ctx.strokeStyle = 'black';
ctx.moveTo(Math.round(figure.area.Left + xStepW * (idx + 1) + this.offsetX), figure.area.Bottom + this.offsetY);
ctx.lineTo(Math.round(figure.area.Left + xStepW * (idx + 1) + this.offsetX), figure.area.Top + this.offsetY);
}
}
if (figure.coordinateAxis.axisY.isShowLine) {
//画横线
for (let idx = 0; idx < ySteps; idx++) {
ctx.lineWidth = 1;
ctx.strokeStyle = 'black';
ctx.moveTo(figure.area.Left + this.offsetX, Math.round(figure.area.Bottom - yStepH * (idx + 1) + this.offsetY));
ctx.lineTo(figure.area.Right + this.offsetX, Math.round(figure.area.Bottom - yStepH * (idx + 1) + this.offsetY));
}
}
ctx.stroke();
for (let ctIdx = 0; ctIdx < figure.contents.length; ctIdx++) {
const content = figure.contents[ctIdx];
ctx.beginPath();
let firstDraw = true;
if (pageIdx === 1 && figure.config.adhocStartPoint) {
ctx.moveTo(figure.area.Left + this.offsetX, figure.area.Bottom + this.offsetY);
firstDraw = false;
}
for (let idx = 0; idx < content.values.length; idx++) {
if (content.values[idx] !== null && content.values[idx] !== undefined) {
let xPos = figure.area.Left + xStepW * idx + xStepW / 2 + this.offsetX;
let yPos = figure.area.Bottom - (content.values[idx] / content.maxValue) * height + this.offsetY;
ctx.lineWidth = 1;
ctx.strokeStyle = content.color;
if (content.style === 'dash') ctx.setLineDash([10, 5]);
switch (figure.config.dispType) {
case 'line':
//折线图
if (firstDraw) {
ctx.moveTo(xPos, yPos);
firstDraw = false;
} else {
ctx.lineTo(xPos, yPos);
firstDraw = false;
}
break;
case 'pole':
//柱图
break;
default:
//....
break;
}
}
}
ctx.stroke();
}
ctx.restore();
if (saveAsData) {
//保存当前图形数据
figure.imageData = ctx.getImageData(figure.area.Left + this.offsetX, figure.area.Top + this.offsetY, width, height);
}
}
},
drawToCanvas: function(canvas, currentPageData, pageIdx = 1) {
//预览用
if (canvas && currentPageData) {
const ctx = canvas.getContext("2d");
if (currentPageData.figure_cells && currentPageData.figure_cells.length > 0) {
for (let figure of currentPageData.figure_cells) {
this._draw(ctx, figure, false, pageIdx);
}
}
}
},
_drawPdf: function(doc, figure, pageIdx = 1) {
const PDF_SCALE = 0.75;
if (figure.imageData) {
//直接图形输出
} else {
let width = figure.area.Right - figure.area.Left;
let height = figure.area.Bottom - figure.area.Top;
let xSteps = figure.coordinateAxis.axisX.steps;
let ySteps = figure.coordinateAxis.axisY.steps;
let xStepW = width / xSteps;
let yStepH = height / ySteps;
if (figure.coordinateAxis.axisX.isShowLine) {
//画竖线
for (let idx = 0; idx < xSteps; idx++) {
doc.setLineWidth(0.8);
doc.setDrawColor('black');
doc.line((Math.round(figure.area.Left + xStepW * (idx + 1) + this.offsetX)) * PDF_SCALE, (figure.area.Bottom + this.offsetY) * PDF_SCALE,
(Math.round(figure.area.Left + xStepW * (idx + 1) + this.offsetX)) * PDF_SCALE, (figure.area.Top + this.offsetY) * PDF_SCALE);
}
}
if (figure.coordinateAxis.axisY.isShowLine) {
//画横线
for (let idx = 0; idx < ySteps; idx++) {
doc.setLineWidth(0.8);
doc.setDrawColor('black');
doc.line((figure.area.Left + this.offsetX) * PDF_SCALE, (Math.round(figure.area.Bottom - yStepH * (idx + 1) + this.offsetY)) * PDF_SCALE,
(figure.area.Right + this.offsetX) * PDF_SCALE, (Math.round(figure.area.Bottom - yStepH * (idx + 1) + this.offsetY)) * PDF_SCALE);
}
}
for (let ctIdx = 0; ctIdx < figure.contents.length; ctIdx++) {
const content = figure.contents[ctIdx];
let preXPos = 0, preYPos = 0;
let firstDraw = true;
for (let idx = 0; idx < content.values.length; idx++) {
if (content.values[idx] !== null && content.values[idx] !== undefined) {
let xPos = figure.area.Left + xStepW * idx + xStepW / 2 + this.offsetX;
let yPos = figure.area.Bottom - (content.values[idx] / content.maxValue) * height + this.offsetY;
doc.setLineWidth(0.8);
doc.setDrawColor(content.color);
if (content.style === 'dash') doc.setLineDash([10, 5]);
switch (figure.config.dispType) {
case 'line':
//折线图
if (!firstDraw) {
// ctx.lineTo(xPos, yPos);
doc.line(preXPos * PDF_SCALE, preYPos * PDF_SCALE, xPos * PDF_SCALE, yPos * PDF_SCALE);
} else if (pageIdx === 1 && figure.config.adhocStartPoint) {
doc.line((figure.area.Left + this.offsetX) * PDF_SCALE, (figure.area.Bottom + this.offsetY) * PDF_SCALE,
xPos * PDF_SCALE, yPos * PDF_SCALE);
}
preXPos = xPos;
preYPos = yPos;
firstDraw = false;
break;
case 'pole':
//柱图
break;
default:
//....
break;
}
}
}
}
}
},
drawToPdf: function(doc, currentPageData, pageIdx = 1) {
//导出PDF用
if (doc && currentPageData) {
if (currentPageData.figure_cells && currentPageData.figure_cells.length > 0) {
for (let figure of currentPageData.figure_cells) {
this._drawPdf(doc, figure, pageIdx);
}
}
}
},
_drawSvg: function(figure, isHtoV, actArea, pageIdx = 1) {
let rst = [];
if (figure.imageData) {
//直接图形输出
} else {
let width = figure.area.Right - figure.area.Left;
let height = figure.area.Bottom - figure.area.Top;
let xSteps = figure.coordinateAxis.axisX.steps;
let ySteps = figure.coordinateAxis.axisY.steps;
let xStepW = width / xSteps;
let yStepH = height / ySteps;
let HtoVStr = "";
if (isHtoV) {
//引用了padding后,top坐标不用考虑offset了
HtoVStr = ` transform="translate(${(actArea.Bottom - actArea.Top + 2)},0) rotate(90)"`;
}
if (figure.coordinateAxis.axisX.isShowLine) {
//画竖线
for (let idx = 0; idx < xSteps; idx++) {
rst.push("")
}
}
if (figure.coordinateAxis.axisY.isShowLine) {
//画横线
for (let idx = 0; idx < ySteps; idx++) {
rst.push("")
}
}
for (let ctIdx = 0; ctIdx < figure.contents.length; ctIdx++) {
const content = figure.contents[ctIdx];
let pointStr = '';
let stroke_dasharray = '';
// ctx.strokeStyle = content.color;
if (content.style === 'dash') stroke_dasharray = `10 5`;
for (let idx = 0; idx < content.values.length; idx++) {
if (content.values[idx] !== null && content.values[idx] !== undefined) {
let xPos = figure.area.Left + xStepW * idx + xStepW / 2 + this.offsetX;
let yPos = figure.area.Bottom - (content.values[idx] / content.maxValue) * height + this.offsetY;
if (idx > 0) pointStr = pointStr + ',';
pointStr = pointStr + `${xPos},${yPos}`;
switch (figure.config.dispType) {
case 'line':
//折线图
if (idx === content.values.length - 1) {
if (pageIdx === 1 && figure.config.adhocStartPoint) {
pointStr = `${figure.area.Left + this.offsetX},${figure.area.Bottom + this.offsetY},` + pointStr;
}
// ctx.moveTo(xPos, yPos);
rst.push("")
}
break;
case 'pole':
//柱图
break;
default:
//....
break;
}
}
}
}
}
return rst;
},
toSvgData: function(currentPageData, isHtoV, actArea, pageIdx = 1) {
//打印用
let rst = [];
if (currentPageData) {
if (currentPageData.figure_cells && currentPageData.figure_cells.length > 0) {
for (let figure of currentPageData.figure_cells) {
rst = rst.concat(this._drawSvg(figure, isHtoV, actArea, pageIdx));
}
}
}
return rst;
},
toImageData: function(canvas, pageData) {
//导出Excel用
if (canvas && pageData) {
const ctx = canvas.getContext("2d");
for (let currentPageData of pageData.items) {
if (currentPageData.figure_cells && currentPageData.figure_cells.length > 0) {
for (let fIdx = 0; fIdx < currentPageData.figure_cells.length; fIdx++) {
this._draw(ctx, currentPageData.figure_cells[fIdx], true);
// if (fIdx === currentPageData.figure_cells.length - 1) {
// this._draw(ctx, currentPageData.figure_cells[fIdx], true);
// } else {
// this._draw(ctx, currentPageData.figure_cells[fIdx], false);
// }
}
}
}
}
},
getBase64: function(canvas, currentPageData) {
let rst = null;
if (canvas && currentPageData) {
const ctx = canvas.getContext("2d");
if (currentPageData.figure_cells && currentPageData.figure_cells.length > 0) {
for (let fIdx = 0; fIdx < currentPageData.figure_cells.length - 1; fIdx++) {
if (fIdx === currentPageData.figure_cells.length - 1) {
canvas.width = figure.area.Right - figure.area.Left;
canvas.height = figure.area.Bottom - figure.area.Top;
ctx.putImageData(figure.imageData, 0, 0);
rst = canvas.toDataURL();
}
}
}
}
return rst;
},
};