//本文档是图形输出的接口实现 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; }, };