"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _enum = require("./enum");
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
/* eslint-disable */
var Canvas = exports["default"] = /*#__PURE__*/function () {
  function Canvas(options) {
    _classCallCheck(this, Canvas);
    this.width = (options === null || options === void 0 ? void 0 : options.width) || 0;
    this.height = (options === null || options === void 0 ? void 0 : options.height) || 0;
    this.canvas = this.createCanvas();
    this.ctx = this.canvas.getContext('2d');
  }
  _createClass(Canvas, [{
    key: "createCanvas",
    value: function createCanvas() {
      var canvas = document.createElement('canvas');
      canvas.width = this.width || 0;
      canvas.height = this.height || 0;
      return canvas;
    }
  }, {
    key: "setWidth",
    value: function setWidth(width) {
      this.canvas.width = width;
    }
  }, {
    key: "setHeight",
    value: function setHeight(height) {
      this.canvas.height = height;
    }
  }, {
    key: "resize",
    value: function resize(width, height) {
      var canvasData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height); // 保存画布
      this.canvas.width = width || this.canvas.width;
      this.canvas.height = height || this.canvas.height;
      this.ctx.putImageData(canvasData, 0, 0); //  改变完宽高后，重绘画布
    }
  }, {
    key: "getCanvas",
    value: function getCanvas() {
      return this.canvas;
    }
  }, {
    key: "getImgUrl",
    value: function getImgUrl() {
      return this.canvas.toDataURL();
    }

    /**
     * 箭头圆角矩形
     * @param ctx
     * @param x
     * @param y
     * @param w
     * @param h
     * @param r
     * @param shadowColor
     * @param shadowBlur
     * @param lineWidth
     */
  }, {
    key: "roundRectInnerArrowShadow",
    value: function roundRectInnerArrowShadow(ctx, x, y, w, h, r, shadowColor, shadowBlur, lineWidth) {
      r = r || 5; // 圆角半径
      shadowColor = shadowColor || 'rgb(36,99,163)'; // 阴影颜色
      lineWidth = lineWidth || 30; // 边框越大，阴影越清晰
      shadowBlur = shadowBlur || 30; // 模糊级别，越大越模糊，阴影范围也越大。

      ctx.save();
      ctx.beginPath();

      // 裁剪区(只保留内部阴影部分)
      this.roundRectArrow(ctx, x, y, w, h, r);
      ctx.clip();
      ctx.strokeStyle = '#00f';
      ctx.strokeOpacity = 0;
      // 边框+阴影
      ctx.beginPath();
      ctx.lineWidth = lineWidth;
      ctx.shadowColor = shadowColor;
      ctx.shadowBlur = shadowBlur;
      // 因线是由坐标位置向两则画的，所以要移动起点坐标位置，和加大矩形。
      this.roundRectArrow(ctx, x - lineWidth - 10, y - lineWidth / 2, w + lineWidth + 25, h + lineWidth, r);
      ctx.stroke();

      // 取消阴影
      ctx.shadowBlur = 0;
      ctx.restore();
    }

    // 状态图标圆
  }, {
    key: "drawStatusCircle",
    value: function drawStatusCircle(iconSize, status) {
      var radius = 16;
      var outerRadius = 20;
      this.ctx.save();
      this.ctx.beginPath();
      this.ctx.arc(iconSize.width, iconSize.height, outerRadius / 2, 0, 2 * Math.PI);
      this.ctx.closePath();
      // 填充图形
      this.ctx.fillStyle = '#fff';
      this.ctx.fill();
      this.ctx.restore();
      this.ctx.beginPath();
      this.ctx.arc(iconSize.width, iconSize.height, radius / 2, 0, 2 * Math.PI);
      this.ctx.closePath();
      // 填充图形
      this.ctx.fillStyle = _enum.StatusColorEnum[status];
      this.ctx.fill();
      this.ctx.restore();
      this.ctx.save();
    }

    // 报警图标
  }, {
    key: "drawAlarmIcon",
    value: function drawAlarmIcon(status, iconSize) {
      this.drawStatusCircle(iconSize, status);
      var width = 2;
      var height = 10;
      var x = iconSize.width - width / 2;
      var y = iconSize.height - height / 2;
      this.ctx.translate(x, y);
      this.ctx.beginPath();
      this.ctx.moveTo(2.15427, 9.42284);
      this.ctx.quadraticCurveTo(2.15427, 9.47575, 2.14908, 9.52842);
      this.ctx.quadraticCurveTo(2.1439, 9.58108, 2.13357, 9.63297);
      this.ctx.quadraticCurveTo(2.12325, 9.68487, 2.10789, 9.73551);
      this.ctx.quadraticCurveTo(2.09253, 9.78615, 2.07228, 9.83504);
      this.ctx.quadraticCurveTo(2.05203, 9.88393, 2.02708, 9.93059);
      this.ctx.quadraticCurveTo(2.00214, 9.97726, 1.97274, 10.0213);
      this.ctx.quadraticCurveTo(1.94334, 10.0653, 1.90977, 10.1062);
      this.ctx.quadraticCurveTo(1.8762, 10.1471, 1.83878, 10.1845);
      this.ctx.quadraticCurveTo(1.80137, 10.2219, 1.76046, 10.2555);
      this.ctx.quadraticCurveTo(1.71956, 10.289, 1.67556, 10.3184);
      this.ctx.quadraticCurveTo(1.63156, 10.3478, 1.58489, 10.3728);
      this.ctx.quadraticCurveTo(1.53822, 10.3977, 1.48934, 10.418);
      this.ctx.quadraticCurveTo(1.44045, 10.4382, 1.38981, 10.4536);
      this.ctx.quadraticCurveTo(1.33917, 10.469, 1.28727, 10.4793);
      this.ctx.quadraticCurveTo(1.23537, 10.4896, 1.18271, 10.4948);
      this.ctx.quadraticCurveTo(1.13005, 10.5, 1.07713, 10.5);
      this.ctx.quadraticCurveTo(1.02422, 10.5, 0.971557, 10.4948);
      this.ctx.quadraticCurveTo(0.918895, 10.4896, 0.866996, 10.4793);
      this.ctx.quadraticCurveTo(0.815096, 10.469, 0.764459, 10.4536);
      this.ctx.quadraticCurveTo(0.713821, 10.4382, 0.664933, 10.418);
      this.ctx.quadraticCurveTo(0.616045, 10.3977, 0.569377, 10.3728);
      this.ctx.quadraticCurveTo(0.522709, 10.3478, 0.47871, 10.3184);
      this.ctx.quadraticCurveTo(0.434712, 10.289, 0.393808, 10.2555);
      this.ctx.quadraticCurveTo(0.352903, 10.2219, 0.315485, 10.1845);
      this.ctx.quadraticCurveTo(0.278068, 10.1471, 0.244498, 10.1062);
      this.ctx.quadraticCurveTo(0.210929, 10.0653, 0.18153, 10.0213);
      this.ctx.quadraticCurveTo(0.152131, 9.97726, 0.127187, 9.93059);
      this.ctx.quadraticCurveTo(0.102242, 9.88393, 0.081992, 9.83504);
      this.ctx.quadraticCurveTo(0.0617418, 9.78615, 0.046381, 9.73551);
      this.ctx.quadraticCurveTo(0.0310203, 9.68487, 0.0206968, 9.63297);
      this.ctx.quadraticCurveTo(0.0103734, 9.58108, 0.0051867, 9.52842);
      this.ctx.quadraticCurveTo(0, 9.47575, 0, 9.42284);
      this.ctx.quadraticCurveTo(0, 9.36992, 0.0051867, 9.31726);
      this.ctx.quadraticCurveTo(0.0103734, 9.2646, 0.0206968, 9.2127);
      this.ctx.quadraticCurveTo(0.0310203, 9.1608, 0.046381, 9.11016);
      this.ctx.quadraticCurveTo(0.0617418, 9.05952, 0.081992, 9.01063);
      this.ctx.quadraticCurveTo(0.102242, 8.96175, 0.127187, 8.91508);
      this.ctx.quadraticCurveTo(0.152131, 8.86841, 0.18153, 8.82441);
      this.ctx.quadraticCurveTo(0.210929, 8.78041, 0.244498, 8.73951);
      this.ctx.quadraticCurveTo(0.278068, 8.69861, 0.315485, 8.66119);
      this.ctx.quadraticCurveTo(0.352903, 8.62377, 0.393808, 8.5902);
      this.ctx.quadraticCurveTo(0.434712, 8.55663, 0.478711, 8.52723);
      this.ctx.quadraticCurveTo(0.522709, 8.49784, 0.569377, 8.47289);
      this.ctx.quadraticCurveTo(0.616045, 8.44795, 0.664933, 8.4277);
      this.ctx.quadraticCurveTo(0.713821, 8.40745, 0.764459, 8.39209);
      this.ctx.quadraticCurveTo(0.815096, 8.37672, 0.866996, 8.3664);
      this.ctx.quadraticCurveTo(0.918895, 8.35608, 0.971557, 8.35089);
      this.ctx.quadraticCurveTo(1.02422, 8.3457, 1.07713, 8.3457);
      this.ctx.quadraticCurveTo(1.13005, 8.3457, 1.18271, 8.35089);
      this.ctx.quadraticCurveTo(1.23537, 8.35608, 1.28727, 8.3664);
      this.ctx.quadraticCurveTo(1.33917, 8.37672, 1.38981, 8.39208);
      this.ctx.quadraticCurveTo(1.44045, 8.40745, 1.48934, 8.4277);
      this.ctx.quadraticCurveTo(1.53822, 8.44795, 1.58489, 8.47289);
      this.ctx.quadraticCurveTo(1.63156, 8.49784, 1.67556, 8.52723);
      this.ctx.quadraticCurveTo(1.71956, 8.55663, 1.76046, 8.5902);
      this.ctx.quadraticCurveTo(1.80137, 8.62377, 1.83878, 8.66119);
      this.ctx.quadraticCurveTo(1.8762, 8.69861, 1.90977, 8.73951);
      this.ctx.quadraticCurveTo(1.94334, 8.78041, 1.97274, 8.82441);
      this.ctx.quadraticCurveTo(2.00214, 8.86841, 2.02708, 8.91508);
      this.ctx.quadraticCurveTo(2.05203, 8.96175, 2.07228, 9.01063);
      this.ctx.quadraticCurveTo(2.09253, 9.05952, 2.10789, 9.11016);
      this.ctx.quadraticCurveTo(2.12325, 9.1608, 2.13357, 9.2127);
      this.ctx.quadraticCurveTo(2.1439, 9.2646, 2.14908, 9.31726);
      this.ctx.quadraticCurveTo(2.15427, 9.36992, 2.15427, 9.42284);
      this.ctx.closePath();
      this.ctx.moveTo(1.07713, 7.30285);
      this.ctx.bezierCurveTo(0.779846, 7.30285, 0.538567, 6.80008, 0.538567, 6.17934);
      this.ctx.lineTo(0, 1.12352);
      this.ctx.bezierCurveTo(0, 0.502773, 0.482018, 0, 1.07713, 0);
      this.ctx.bezierCurveTo(1.67225, 0, 2.15427, 0.502773, 2.15427, 1.12352);
      this.ctx.lineTo(1.6157, 6.17934);
      this.ctx.bezierCurveTo(1.6157, 6.80008, 1.37442, 7.30285, 1.07713, 7.30285);
      this.ctx.closePath();
      this.ctx.fillStyle = '#fff';
      this.ctx.fill();
      this.ctx.restore();
    }
  }, {
    key: "drawCheckedIcon",
    value: function drawCheckedIcon(status, iconSize) {
      this.drawStatusCircle(iconSize, status);
      var width = 11;
      var height = 8;
      var x = iconSize.width - width / 2;
      var y = iconSize.height - height / 2;
      this.ctx.translate(x, y);
      this.ctx.beginPath();
      this.ctx.moveTo(3.43248, 7.7093);
      this.ctx.bezierCurveTo(3.81997, 8.0969, 4.44839, 8.0969, 4.83592, 7.7093);
      this.ctx.bezierCurveTo(4.83592, 7.7093, 10.8512, 1.69406, 10.8512, 1.69406);
      this.ctx.bezierCurveTo(11.2388, 1.30654, 11.2388, 0.678175, 10.8512, 0.290646);
      this.ctx.bezierCurveTo(10.4637, -0.0968821, 9.83535, -0.0968821, 9.44779, 0.290646);
      this.ctx.bezierCurveTo(9.44779, 0.290646, 4.09133, 5.56142, 4.09133, 5.56142);
      this.ctx.bezierCurveTo(4.09133, 5.56142, 1.69407, 3.16415, 1.69407, 3.16415);
      this.ctx.bezierCurveTo(1.30653, 2.77662, 0.678203, 2.77662, 0.290674, 3.16415);
      this.ctx.bezierCurveTo(-0.0968914, 3.55168, -0.0968914, 4.18, 0.290674, 4.56757);
      this.ctx.bezierCurveTo(0.290674, 4.56757, 3.43248, 7.7093, 3.43248, 7.7093);
      this.ctx.bezierCurveTo(3.43248, 7.7093, 3.43248, 7.7093, 3.43248, 7.7093);
      this.ctx.closePath();
      this.ctx.fillStyle = '#fff';
      this.ctx.fill();
      this.ctx.restore();
    }
  }, {
    key: "drawStatusIcon",
    value: function drawStatusIcon(status, iconSize) {
      if (status === _enum.StatusEnum.Alarm) {
        this.drawAlarmIcon(status, iconSize);
      } else if (status === _enum.StatusEnum.Checked) {
        this.drawCheckedIcon(status, iconSize);
      }
    }

    /**
     * 圆角矩形带阴影
     * @param ctx
     * @param x
     * @param y
     * @param w
     * @param h
     * @param r
     * @param shadowColor
     * @param shadowBlur
     * @param lineWidth
     */
  }, {
    key: "roundRectInnerShadow",
    value: function roundRectInnerShadow(ctx, x, y, w, h, r, shadowColor, shadowBlur, lineWidth) {
      r = r || 5; // 圆角半径
      shadowColor = shadowColor || 'rgb(36,99,163)'; // 阴影颜色
      lineWidth = lineWidth || 6; // 边框越大，阴影越清晰
      shadowBlur = shadowBlur || 8; // 模糊级别，越大越模糊，阴影范围也越大。

      ctx.save();
      ctx.beginPath();

      // 裁剪区(只保留内部阴影部分)
      this.roundRect(ctx, x, y, w, h, r);
      ctx.clip();
      ctx.strokeStyle = '#00f';
      ctx.strokeOpacity = 0;

      // 边框+阴影
      ctx.beginPath();
      ctx.lineWidth = lineWidth;
      ctx.shadowColor = shadowColor;
      ctx.shadowBlur = shadowBlur;

      // 因线是由坐标位置向两则画的，所以要移动起点坐标位置，和加大矩形。
      this.roundRect(ctx, x - lineWidth / 2, y - lineWidth / 2, w + lineWidth, h + lineWidth, r);
      ctx.stroke();

      // 取消阴影
      ctx.shadowBlur = 0;
      ctx.restore();
    }

    /**
     * 椭圆带背景
     * @param ctx 上下文
     * @param x 左上角X坐标
     * @param y 左上角Y坐标
     * @param w 宽
     * @param h 高
     * @param baColor 背景颜色
     */
  }, {
    key: "ellipseShadow",
    value: function ellipseShadow(ctx, x, y, w, h, baColor) {
      baColor = baColor || 'rgb(36,99,163)';
      ctx.beginPath();
      this.ellipse(ctx, x, y, w, h);
      ctx.save();
      ctx.globalAlpha = 0.25;
      ctx.fillStyle = baColor;
      ctx.fill();
      ctx.restore();
      ctx.strokeStyle = baColor;
      ctx.stroke();
    }

    /**
     * 椭圆
     * @param ctx 上下文
     * @param x 左上角X坐标
     * @param y 左上角Y坐标
     * @param width 宽
     * @param height 高
     */
  }, {
    key: "ellipse",
    value: function ellipse(ctx, x, y, width, height) {
      var k = width / 0.75 / 2,
        h = height / 2;
      ctx.beginPath();
      ctx.moveTo(x, y - h);
      ctx.bezierCurveTo(x + k, y - h, x + k, y + h, x, y + h);
      ctx.bezierCurveTo(x - k, y + h, x - k, y - h, x, y - h);
      ctx.closePath();
    }

    /**
     * 圆角矩形
     * @param ctx 上下文
     * @param x 左上角X坐标
     * @param y 左上角Y坐标
     * @param w 宽
     * @param h 高
     * @param r 圆角的半径
     */
  }, {
    key: "roundRect",
    value: function roundRect(ctx, x, y, w, h, r) {
      ctx.beginPath();
      ctx.moveTo(x, y);

      // 右上角弧线
      ctx.arcTo(x + w, y, x + w, y + r, r);

      // 右下角弧线
      ctx.arcTo(x + w, y + h, x + w - r, y + h, r);

      // 左下角弧线
      ctx.arcTo(x, y + h, x, y + h - r, r);

      // 左上角弧线
      ctx.arcTo(x, y, x + r, y, r);
    }

    // 箭头柱子
  }, {
    key: "roundPillarArrow",
    value: function roundPillarArrow(ctx, x, y, w, h) {
      ctx.beginPath();
      ctx.moveTo(x + w / 2, y);

      // 右中
      ctx.lineTo(x + w, y + h / 2 + 5);

      // 右下角
      ctx.lineTo(x + w, y + h);

      // 左下角
      ctx.lineTo(x, y + h);

      // 左中
      ctx.lineTo(x, y + h / 2 + 5);
      ctx.lineTo(x + w / 2, y);
    }

    // 圆角箭头矩形
  }, {
    key: "roundRectArrow",
    value: function roundRectArrow(ctx, x, y, w, h, r) {
      ctx.beginPath();
      ctx.moveTo(x, y);

      // 右上角弧线
      ctx.arcTo(x + w, y, x + w, y + r, r);

      // 右下角弧线
      ctx.arcTo(x + w, y + h, x + w - r, y + h, r);

      // 底部横线
      ctx.lineTo(x, y + h);

      // 斜线
      ctx.lineTo(x + 54 / 2, h / 2);

      // 斜线
      ctx.lineTo(x, y);
    }

    // 圆
  }, {
    key: "circle",
    value: function circle(ctx, x, y, radius, startAngle, endAngle) {
      ctx.beginPath();
      ctx.moveTo(x, y);
      ctx.arc(x, y, radius, startAngle, endAngle);
    }

    // 箭头圆
  }, {
    key: "arrowCircle",
    value: function arrowCircle(ctx, x, y, radius, startAngle, endAngle) {
      ctx.beginPath();
      ctx.moveTo(x, y);
      ctx.arc(x, y, radius, startAngle, endAngle);
    }

    // 获取宽度
  }, {
    key: "getCanvasWidth",
    value: function getCanvasWidth(text) {
      var canvas = document.createElement('canvas');
      var ctx = canvas.getContext('2d');
      ctx.textBaseline = 'middle';
      var width = 0;
      if (Array.isArray(text)) {
        text.forEach(function (v) {
          ctx.font = (v.fontsize || 14) + 'px Arial';
          var _width = ctx.measureText(v.text).width;
          width = _width > width ? _width : width;
        });
      } else {
        ctx.font = (text.fontsize || 14) + 'px Arial';
        width = ctx.measureText(text.text).width;
      }
      return width || text.width || 24;
    }

    // 文本
  }, {
    key: "text",
    value: function text(ctx, v, x, y, color) {
      ctx.font = (v.fontSize || 14) + 'px Arial';
      ctx.fillStyle = color || '#FFF';
      ctx.fillText(v.text, x, y);
    }

    // 文本渲染
  }, {
    key: "renderText",
    value: function renderText(ctx, height, text, x, color) {
      var _this = this;
      if (Array.isArray(text)) {
        if (text.length === 1) {
          var _text = text[0];
          this.text(ctx, _text, x, height / 2 + (_text.fontSize || 14) / 2 - 2, color);
        } else {
          var startHeight = 6;
          text.map(function (v, vI) {
            startHeight += (v.fontSize || 14) + (vI ? 10 : 0);
            _this.text(ctx, v, x, startHeight, color);
          });
        }
      } else {
        this.text(ctx, text, x, height / 2 + (text.fontSize || 14) / 2 - 2, color);
      }
    }

    /**
     * 色值转换
     * @param color
     * @param n
     * @return String
     */
  }, {
    key: "transformRgb",
    value: function transformRgb(color) {
      var n = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
      // 16进制颜色值的正则
      var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
      // 把颜色值变成小写
      color = color.toLowerCase();
      if (reg.test(color)) {
        // 如果只有三位的值，需变成六位，如：#fff => #ffffff
        if (String(color).length === 4) {
          var colorNew = '#';
          for (var i = 1; i < 4; i += 1) {
            colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
          }
          color = colorNew;
        }
        // 处理六位的颜色值，转为RGB
        var colorChange = [];
        for (var _i = 1; _i < 7; _i += 2) {
          colorChange.push(parseInt('0x' + color.slice(_i, _i + 2)));
        }
        return "rgba(".concat(colorChange.join(','), ",").concat(n, ")");
      } else {
        return color;
      }
    }
  }]);
  return Canvas;
}();
//# sourceMappingURL=Canvas.js.map
