"use strict"; var __extends = (this && this.__extends) || (function () { var extendStatics = function (d, b) { extendStatics = Object.setPrototypeOf || ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; return extendStatics(d, b); }; return function (d, b) { extendStatics(d, b); function __() { this.constructor = d; } d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); }; })(); Object.defineProperty(exports, "__esModule", { value: true }); exports.SCanvasPaintEngine = void 0; var SPaintEngine_1 = require("./SPaintEngine"); var __1 = require(".."); var SPath2D_1 = require("../SPath2D"); var SCanvasPaintEngine = (function (_super) { __extends(SCanvasPaintEngine, _super); function SCanvasPaintEngine(canvas) { var _this = _super.call(this) || this; _this._canvas = canvas; _this._canvas.imageSmoothingEnabled = true; return _this; } Object.defineProperty(SCanvasPaintEngine.prototype, "type", { get: function () { return __1.SPaintEngineType.Canvas; }, enumerable: false, configurable: true }); SCanvasPaintEngine.prototype.setClip = function (path) { this.setMatrix(); this._canvas.fill(path); this._canvas.clip(); }; SCanvasPaintEngine.prototype.clearRect = function (rect) { this.setMatrix(); this._canvas.clearRect(rect.x, rect.y, rect.width, rect.height); }; SCanvasPaintEngine.prototype.drawRect = function (rect) { this.setMatrix(); this.setPen(); this.setBrush(); this.setComposite(); this.setShadow(); this._canvas.fillRect(rect.x, rect.y, rect.width, rect.height); this._canvas.strokeRect(rect.x, rect.y, rect.width, rect.height); }; SCanvasPaintEngine.prototype.drawCircle = function (cx, cy, r) { this.setMatrix(); this.setPen(); this.setBrush(); this.setComposite(); this.setShadow(); this._canvas.beginPath(); this._canvas.arc(cx, cy, r, 0, 2 * Math.PI, true); this._canvas.fill(); this._canvas.stroke(); }; SCanvasPaintEngine.prototype.drawEllipse = function (cx, cy, rx, ry) { this.setMatrix(); this.setPen(); this.setBrush(); this.setComposite(); this.setShadow(); this._canvas.beginPath(); this._canvas.ellipse(cx, cy, rx, ry, 0.5, 0, 2 * Math.PI, true); }; SCanvasPaintEngine.prototype.drawArc = function (x, y, width, height, startAngle, endAngle) { this.setMatrix(); this.setPen(); this.setBrush(); this.setComposite(); this.setShadow(); var p = SPath2D_1.SPath2D.arc(x, y, width, height, startAngle, endAngle); var path = new Path2D(SPath2D_1.SPath2D.arc(x, y, width, height, startAngle, endAngle)); this._canvas.stroke(path); }; SCanvasPaintEngine.prototype.drawChord = function (x, y, width, height, startAngle, endAngle) { this.setMatrix(); this.setPen(); this.setBrush(); this.setComposite(); this.setShadow(); var path = new Path2D(SPath2D_1.SPath2D.chord(x, y, width, height, startAngle, endAngle)); this._canvas.fill(path); this._canvas.stroke(path); }; SCanvasPaintEngine.prototype.drawPie = function (x, y, width, height, startAngle, endAngle) { this.setMatrix(); this.setPen(); this.setBrush(); this.setComposite(); this.setShadow(); var path = new Path2D(SPath2D_1.SPath2D.pie(x, y, width, height, startAngle, endAngle)); this._canvas.fill(path); this._canvas.stroke(path); }; SCanvasPaintEngine.prototype.drawLine = function (line) { this.setMatrix(); this.setPen(); this.setBrush(); this.setComposite(); this.setShadow(); this._canvas.beginPath(); this._canvas.moveTo(line.x1, line.y1); this._canvas.lineTo(line.x2, line.y2); this._canvas.stroke(); }; SCanvasPaintEngine.prototype.drawPolyline = function (points) { if (points.length < 2) { return; } this.setMatrix(); this.setPen(); this.setBrush(); this.setComposite(); this.setShadow(); this._canvas.beginPath(); this._canvas.moveTo(points[0].x, points[0].y); for (var _i = 0, points_1 = points; _i < points_1.length; _i++) { var p = points_1[_i]; this._canvas.lineTo(p.x, p.y); } this._canvas.stroke(); }; SCanvasPaintEngine.prototype.drawPolygon = function (points) { if (points.length < 3) { return; } this.setMatrix(); this.setPen(); this.setBrush(); this.setComposite(); this.setShadow(); this._canvas.beginPath(); this._canvas.moveTo(points[0].x, points[0].y); for (var _i = 0, points_2 = points; _i < points_2.length; _i++) { var p = points_2[_i]; this._canvas.lineTo(p.x, p.y); } this._canvas.closePath(); this._canvas.fill(); this._canvas.stroke(); }; SCanvasPaintEngine.prototype.drawPath = function (path) { this.setMatrix(); this.setPen(); this.setBrush(); this.setComposite(); this.setShadow(); this._canvas.fill(path._path); this._canvas.stroke(path._path); }; SCanvasPaintEngine.prototype.drawText = function (text, x, y, maxWidth) { this.setMatrix(); this.setPen(); this.setBrush(); this.setFont(); this.setComposite(); this.setShadow(); if (maxWidth == undefined) { this._canvas.fillText(text, x, y); } else { this._canvas.fillText(text, x, y, maxWidth); } }; SCanvasPaintEngine.prototype.drawImage = function (img, x, y, width, height) { this.setMatrix(); try { if (width == undefined) { this._canvas.drawImage(img, x, y); } else { this._canvas.drawImage(img, x, y, width, height); } } catch (e) { console.log(e); } }; SCanvasPaintEngine.prototype.textWidth = function (text) { return this._canvas.measureText(text).width; }; SCanvasPaintEngine.prototype.changeFont = function (font) { this._canvas.font = font.size + "px " + font.name; this.setTextAlign(font.textAlign); this.setBaseLine(font.textBaseLine); this.setTextDirection(font.textDirection); }; SCanvasPaintEngine.prototype.setPen = function () { this._canvas.strokeStyle = "rgba(" + this.state.pen.color.red + ", " + this.state.pen.color.green + ", " + this.state.pen.color.blue + ", " + this.state.pen.color.alpha / 255.0 + ")"; this._canvas.lineWidth = this.state.pen.lineWidth; this._canvas.miterLimit = this.state.pen.miterLimit; if (this.state.pen.lineDash != null) { this._canvas.setLineDash(this.state.pen.lineDash); this._canvas.lineDashOffset = this.state.pen.dashOffset; } else { this._canvas.setLineDash([]); this._canvas.lineDashOffset = 0; } this.setLineCapStyle(this.state.pen.lineCapStyle); }; SCanvasPaintEngine.prototype.setLineCapStyle = function (style) { if (style == undefined) return; if (style == __1.SLineCapStyle.Round) { this._canvas.lineCap = "round"; } else if (style == __1.SLineCapStyle.Square) { this._canvas.lineCap = "square"; } else { this._canvas.lineCap = "butt"; } }; SCanvasPaintEngine.prototype.setBrush = function () { if (this.state.brush.type == __1.SBrushType.Color) { this._canvas.fillStyle = "rgba(" + this.state.brush.color.red + ", " + this.state.brush.color.green + ", " + this.state.brush.color.blue + ", " + this.state.brush.color.alpha / 255.0 + ")"; } else if (this.state.brush.type == __1.SBrushType.Gradient) { var gradient = this.state.brush.gradient, drawGradient_1; if (gradient instanceof __1.SLinearGradient) { drawGradient_1 = this._canvas.createLinearGradient(gradient.x1, gradient.y1, gradient.x2, gradient.y2); } else if (gradient instanceof __1.SRadialGradient) { drawGradient_1 = this._canvas.createRadialGradient(gradient.x1, gradient.y1, gradient.r1, gradient.x2, gradient.y2, gradient.r2); } if (gradient && drawGradient_1) { gradient.stopList.forEach(function (t) { drawGradient_1.addColorStop(t.pos, "rgba(" + t.color.red + "," + t.color.green + "," + t.color.blue + "," + t.color.alpha / 255.0 + ")"); }); this._canvas.fillStyle = drawGradient_1; } } }; SCanvasPaintEngine.prototype.setComposite = function () { this._canvas.globalCompositeOperation = SCanvasPaintEngine.gcoList[this.state._composite]; }; SCanvasPaintEngine.prototype.setShadow = function () { if (this.state.shadow.shadowBlur > 0 && this.state.shadow.shadowColor) { this._canvas.shadowBlur = this.state.shadow.shadowBlur; this._canvas.shadowColor = "rgba(" + this.state.shadow.shadowColor.red + "," + this.state.shadow.shadowColor.green + ", " + this.state.shadow.shadowColor.blue + ", " + this.state.shadow.shadowColor.alpha / 255.0 + ")"; this._canvas.shadowOffsetX = this.state.shadow.shadowOffsetX; this._canvas.shadowOffsetY = this.state.shadow.shadowOffsetY; } else { this._canvas.shadowBlur = 0; this._canvas.shadowColor = ""; this._canvas.shadowOffsetX = 0; this._canvas.shadowOffsetY = 0; } }; SCanvasPaintEngine.prototype.setFont = function () { this._canvas.font = this.state.font.size + "px " + this.state.font.name; this.setTextAlign(this.state.font.textAlign); this.setBaseLine(this.state.font.textBaseLine); this.setTextDirection(this.state.font.textDirection); }; SCanvasPaintEngine.prototype.setTextAlign = function (value) { if (value == undefined) { return; } if (value === __1.STextAlign.Start) { this._canvas.textAlign = "start"; } else if (value === __1.STextAlign.End) { this._canvas.textAlign = "end"; } else if (value === __1.STextAlign.Left) { this._canvas.textAlign = "left"; } else if (value === __1.STextAlign.Center) { this._canvas.textAlign = "center"; } else { this._canvas.textAlign = "right"; } }; SCanvasPaintEngine.prototype.setBaseLine = function (value) { if (value == undefined) { return; } if (value == __1.STextBaseLine.Alphabetic) { this._canvas.textBaseline = "alphabetic"; } else if (value == __1.STextBaseLine.Top) { this._canvas.textBaseline = "top"; } else if (value == __1.STextBaseLine.Hanging) { this._canvas.textBaseline = "hanging"; } else if (value == __1.STextBaseLine.Middle) { this._canvas.textBaseline = "middle"; } else if (value == __1.STextBaseLine.Ideographic) { this._canvas.textBaseline = "ideographic"; } else { this._canvas.textBaseline = "bottom"; } }; SCanvasPaintEngine.prototype.setTextDirection = function (value) { if (value == undefined) { return; } if (value == __1.STextDirection.Inherit) { this._canvas.direction = "inherit"; } else if (value == __1.STextDirection.LTR) { this._canvas.direction = "ltr"; } else { this._canvas.direction = "rtl"; } }; SCanvasPaintEngine.prototype.setMatrix = function () { this._canvas.setTransform(this.state.matrix.a, this.state.matrix.b, this.state.matrix.c, this.state.matrix.d, this.state.matrix.e, this.state.matrix.f); }; SCanvasPaintEngine.gcoList = [ "copy", "destination-atop", "destination-in", "destination-out", "destination-over", "lighter", "source-atop", "source-in", "source-out", "source-over", "xor" ]; return SCanvasPaintEngine; }(SPaintEngine_1.SPaintEngine)); exports.SCanvasPaintEngine = SCanvasPaintEngine;