123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344 |
- "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;
|