ss-dp/src/components/DamGraph/DamImage.js

import DamData from "./DamData";
import CoordTrans from './CoordTrans';

const GRAPH_MARGIN = [10, 40, 5, 0];


function fillPath({ trans, ctx, pts, stroke }) {
  ctx.beginPath();
  for (let i = 0; i < pts.length; i += 1) {
    const pt0 = pts[i];
    if (i === 0) {
      ctx.moveTo(trans.geo2imgX(pt0[0]), trans.geo2imgY(pt0[1]));
    } else {
      ctx.lineTo(trans.geo2imgX(pt0[0]), trans.geo2imgY(pt0[1]));
    }
  }
  ctx.closePath();
  if (stroke) {
    ctx.stroke();
  }
  ctx.fill()
}

function strokePath({ trans, ctx, pts }) {
  ctx.beginPath();
  for (let i = 0; i < pts.length; i += 1) {
    const pt0 = pts[i];
    if (i === 0) {
      ctx.moveTo(trans.geo2imgX(pt0[0]), trans.geo2imgY(pt0[1]));
    } else {
      ctx.lineTo(trans.geo2imgX(pt0[0]), trans.geo2imgY(pt0[1]));
    }
  }
  ctx.stroke()
}

/*
function render(damObj, { rz }) {
  
  const dataShps = damObj.caculteShps(rz);
  if (dataShps) {
    // 水位
    this.linePath(dataShps.rzShp, {
      'stroke-width': 0,
      gradient: '90-#daedfa-#49519e',
    }, { closed: true });
    this.textElement(GRAPH_MARGIN[0], this._trans.geo2imgY(rz), rz.toFixed(2), {
      'text-anchor': 'start',
      'font-size': 18,
      fill: '#1a49c0',
    }, { imgCoord: true, offY: -10 });

    // 死水位
    this.linePath(dataShps.ddz, {
      'stroke-width': 0.5,
      stroke: 'red',
    });
    this.textElement(dataShps.ddz[0][0], dataShps.ddz[0][1], `死水位:${damObj.ddz.toFixed(2)}`, {
      'text-anchor': 'start',
      'font-size': 12,
      fill: 'red',
    }, { offY: -8 });

    // 汛限水位
    this.linePath(dataShps.fsltdz, {
      'stroke-width': 0.5,
      stroke: 'red',
    });
    this.textElement(dataShps.fsltdz[0][0], dataShps.fsltdz[0][1], `汛限水位:${damObj.fsltdz.toFixed(2)}`, {
      'text-anchor': 'end',
      'font-size': 12,
      fill: 'red',
    }, { offY: -8 });

    // 正常蓄水位
    this.linePath(dataShps.zcxsw, {
      'stroke-width': 0.5,
    });
    this.textElement(dataShps.zcxsw[0][0], dataShps.zcxsw[0][1], `正常蓄水位:${damObj.zcxsw.toFixed(2)}`, {
      'text-anchor': 'start',
      'font-size': 12,
    }, { offY: 8 });

    // 坝顶高程
    this.textElement(dataShps.damel[0], dataShps.damel[1], `坝顶高程:${damObj.damel.toFixed(2)}`, {
      'text-anchor': 'end',
      'font-size': 12,
    }, { offY: -8 });
  }

  // 标尺
  this.rulerPath();
}
*/

export default function genDamImage(data, width, height) {
  const c = document.createElement('canvas');
  c.width = width;
  c.height = height;
  const ctx = c.getContext('2d');


  ctx.fillStyle = "#fffc";
  ctx.fillRect(0, 0, width, height);


  const { stnm, damel, ddz, fsltdz, zcxsw } = data || {};
  if (!damel || !ddz || damel <= ddz) {
    ctx.font = '20px serif';
    ctx.fillStyle = "#000";
    ctx.fillText((stnm || '-') + '(水库基础数据异常)', GRAPH_MARGIN[0] + 4, 24);

    return c.toDataURL();
  }

  const y0 = ddz - ((damel - ddz) * 0.1);

  const shape = [[20, y0], [40, damel], [55, damel], [55, y0], [0, y0]];

  const damObj = new DamData({ stnm, damel, ddz, fsltdz, zcxsw });
  damObj.setDamShape(shape);

  const trans = new CoordTrans([GRAPH_MARGIN[0], GRAPH_MARGIN[1], width - GRAPH_MARGIN[2], height - GRAPH_MARGIN[3]], damObj.getBound());
  const dataShps = damObj.caculteShps(data.rz);

  {
    // 标题
    ctx.font = '20px serif';
    ctx.fillStyle = "#000";
    ctx.fillText(damObj.stnm, GRAPH_MARGIN[0] + 4, 24);

    // 水位
    var waterGradient = ctx.createLinearGradient(0, 0, 0, 500);
    waterGradient.addColorStop(1, "#daedfa");
    waterGradient.addColorStop(0, "#49519e");
    ctx.fillStyle = waterGradient;
    fillPath({ ctx, trans, pts: dataShps.rzShp });

    ctx.font = '18px serif';
    ctx.fillStyle = "#1a49c0";
    ctx.fillText(data.rz.toFixed(2), GRAPH_MARGIN[0] + 4, trans.geo2imgY(data.rz) - 5);


    // 横断面
    ctx.lineWidth = 3;
    ctx.strokeStyle = "#444";
    ctx.fillStyle = "#ddd";

    fillPath({ ctx, trans, pts: damObj.getDamShape(), stroke: true });


    // 死水位
    ctx.strokeStyle = 'red';
    ctx.lineWidth = 0.5;
    strokePath({ ctx, trans, pts: dataShps.ddz });

    ctx.font = '16px serif';
    ctx.fillStyle = 'red';
    ctx.fillText(
      `死水位:${damObj.ddz.toFixed(2)}`,
      trans.geo2imgX(dataShps.ddz[0][0]) + 4,
      trans.geo2imgY(dataShps.ddz[0][1]) - 5);


    // 汛限水位
    strokePath({ ctx, trans, pts: dataShps.fsltdz });
    ctx.textAlign = "right";
    ctx.fillText(
      `汛限水位:${damObj.fsltdz.toFixed(2)}`,
      trans.geo2imgX(dataShps.fsltdz[0][0]),
      trans.geo2imgY(dataShps.fsltdz[0][1]) - 5);


    // 正常蓄水位
    ctx.strokeStyle = '#000';
    ctx.lineWidth = 0.5;
    strokePath({ ctx, trans, pts: dataShps.zcxsw });

    ctx.font = '16px serif';
    ctx.fillStyle = '#000';
    ctx.textAlign = "left";
    ctx.fillText(
      `正常蓄水位:${damObj.zcxsw.toFixed(2)}`,
      trans.geo2imgX(dataShps.zcxsw[0][0]),
      trans.geo2imgY(dataShps.zcxsw[0][1]) + 16);


    ctx.textAlign = "right";
    ctx.fillText(
      `坝顶高程:${damObj.damel.toFixed(2)}`,
      trans.geo2imgX(dataShps.damel[0]),
      trans.geo2imgY(dataShps.damel[1]) - 5);

    ctx.lineCap = 'butt';
    ctx.strokeStyle = "#444";
    ctx.lineWidth = GRAPH_MARGIN[0] / 2;
    const x1 = GRAPH_MARGIN[0] / 4;
    const x2 = x1 + GRAPH_MARGIN[0] / 2;
    const step = 12;
    let isLeft = false;
    for (let i = 0; i < height; i += step) {
      ctx.beginPath();
      ctx.moveTo(isLeft ? x1 : x2, i);
      ctx.lineTo(isLeft ? x1 : x2, i + step);
      ctx.stroke();
      isLeft = !isLeft;
    }
  }

  return c.toDataURL();
}