SCanvasPaintEngine.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344
  1. "use strict";
  2. var __extends = (this && this.__extends) || (function () {
  3. var extendStatics = function (d, b) {
  4. extendStatics = Object.setPrototypeOf ||
  5. ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
  6. function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
  7. return extendStatics(d, b);
  8. };
  9. return function (d, b) {
  10. extendStatics(d, b);
  11. function __() { this.constructor = d; }
  12. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  13. };
  14. })();
  15. Object.defineProperty(exports, "__esModule", { value: true });
  16. exports.SCanvasPaintEngine = void 0;
  17. var SPaintEngine_1 = require("./SPaintEngine");
  18. var __1 = require("..");
  19. var SPath2D_1 = require("../SPath2D");
  20. var SCanvasPaintEngine = (function (_super) {
  21. __extends(SCanvasPaintEngine, _super);
  22. function SCanvasPaintEngine(canvas) {
  23. var _this = _super.call(this) || this;
  24. _this._canvas = canvas;
  25. _this._canvas.imageSmoothingEnabled = true;
  26. return _this;
  27. }
  28. Object.defineProperty(SCanvasPaintEngine.prototype, "type", {
  29. get: function () {
  30. return __1.SPaintEngineType.Canvas;
  31. },
  32. enumerable: false,
  33. configurable: true
  34. });
  35. SCanvasPaintEngine.prototype.setClip = function (path) {
  36. this.setMatrix();
  37. this._canvas.fill(path);
  38. this._canvas.clip();
  39. };
  40. SCanvasPaintEngine.prototype.clearRect = function (rect) {
  41. this.setMatrix();
  42. this._canvas.clearRect(rect.x, rect.y, rect.width, rect.height);
  43. };
  44. SCanvasPaintEngine.prototype.drawRect = function (rect) {
  45. this.setMatrix();
  46. this.setPen();
  47. this.setBrush();
  48. this.setComposite();
  49. this.setShadow();
  50. this._canvas.fillRect(rect.x, rect.y, rect.width, rect.height);
  51. this._canvas.strokeRect(rect.x, rect.y, rect.width, rect.height);
  52. };
  53. SCanvasPaintEngine.prototype.drawCircle = function (cx, cy, r) {
  54. this.setMatrix();
  55. this.setPen();
  56. this.setBrush();
  57. this.setComposite();
  58. this.setShadow();
  59. this._canvas.beginPath();
  60. this._canvas.arc(cx, cy, r, 0, 2 * Math.PI, true);
  61. this._canvas.fill();
  62. this._canvas.stroke();
  63. };
  64. SCanvasPaintEngine.prototype.drawEllipse = function (cx, cy, rx, ry) {
  65. this.setMatrix();
  66. this.setPen();
  67. this.setBrush();
  68. this.setComposite();
  69. this.setShadow();
  70. this._canvas.beginPath();
  71. this._canvas.ellipse(cx, cy, rx, ry, 0.5, 0, 2 * Math.PI, true);
  72. };
  73. SCanvasPaintEngine.prototype.drawArc = function (x, y, width, height, startAngle, endAngle) {
  74. this.setMatrix();
  75. this.setPen();
  76. this.setBrush();
  77. this.setComposite();
  78. this.setShadow();
  79. var p = SPath2D_1.SPath2D.arc(x, y, width, height, startAngle, endAngle);
  80. var path = new Path2D(SPath2D_1.SPath2D.arc(x, y, width, height, startAngle, endAngle));
  81. this._canvas.stroke(path);
  82. };
  83. SCanvasPaintEngine.prototype.drawChord = function (x, y, width, height, startAngle, endAngle) {
  84. this.setMatrix();
  85. this.setPen();
  86. this.setBrush();
  87. this.setComposite();
  88. this.setShadow();
  89. var path = new Path2D(SPath2D_1.SPath2D.chord(x, y, width, height, startAngle, endAngle));
  90. this._canvas.fill(path);
  91. this._canvas.stroke(path);
  92. };
  93. SCanvasPaintEngine.prototype.drawPie = function (x, y, width, height, startAngle, endAngle) {
  94. this.setMatrix();
  95. this.setPen();
  96. this.setBrush();
  97. this.setComposite();
  98. this.setShadow();
  99. var path = new Path2D(SPath2D_1.SPath2D.pie(x, y, width, height, startAngle, endAngle));
  100. this._canvas.fill(path);
  101. this._canvas.stroke(path);
  102. };
  103. SCanvasPaintEngine.prototype.drawLine = function (line) {
  104. this.setMatrix();
  105. this.setPen();
  106. this.setBrush();
  107. this.setComposite();
  108. this.setShadow();
  109. this._canvas.beginPath();
  110. this._canvas.moveTo(line.x1, line.y1);
  111. this._canvas.lineTo(line.x2, line.y2);
  112. this._canvas.stroke();
  113. };
  114. SCanvasPaintEngine.prototype.drawPolyline = function (points) {
  115. if (points.length < 2) {
  116. return;
  117. }
  118. this.setMatrix();
  119. this.setPen();
  120. this.setBrush();
  121. this.setComposite();
  122. this.setShadow();
  123. this._canvas.beginPath();
  124. this._canvas.moveTo(points[0].x, points[0].y);
  125. for (var _i = 0, points_1 = points; _i < points_1.length; _i++) {
  126. var p = points_1[_i];
  127. this._canvas.lineTo(p.x, p.y);
  128. }
  129. this._canvas.stroke();
  130. };
  131. SCanvasPaintEngine.prototype.drawPolygon = function (points) {
  132. if (points.length < 3) {
  133. return;
  134. }
  135. this.setMatrix();
  136. this.setPen();
  137. this.setBrush();
  138. this.setComposite();
  139. this.setShadow();
  140. this._canvas.beginPath();
  141. this._canvas.moveTo(points[0].x, points[0].y);
  142. for (var _i = 0, points_2 = points; _i < points_2.length; _i++) {
  143. var p = points_2[_i];
  144. this._canvas.lineTo(p.x, p.y);
  145. }
  146. this._canvas.closePath();
  147. this._canvas.fill();
  148. this._canvas.stroke();
  149. };
  150. SCanvasPaintEngine.prototype.drawPath = function (path) {
  151. this.setMatrix();
  152. this.setPen();
  153. this.setBrush();
  154. this.setComposite();
  155. this.setShadow();
  156. this._canvas.fill(path._path);
  157. this._canvas.stroke(path._path);
  158. };
  159. SCanvasPaintEngine.prototype.drawText = function (text, x, y, maxWidth) {
  160. this.setMatrix();
  161. this.setPen();
  162. this.setBrush();
  163. this.setFont();
  164. this.setComposite();
  165. this.setShadow();
  166. if (maxWidth == undefined) {
  167. this._canvas.fillText(text, x, y);
  168. }
  169. else {
  170. this._canvas.fillText(text, x, y, maxWidth);
  171. }
  172. };
  173. SCanvasPaintEngine.prototype.drawImage = function (img, x, y, width, height) {
  174. this.setMatrix();
  175. try {
  176. if (width == undefined) {
  177. this._canvas.drawImage(img, x, y);
  178. }
  179. else {
  180. this._canvas.drawImage(img, x, y, width, height);
  181. }
  182. }
  183. catch (e) {
  184. console.log(e);
  185. }
  186. };
  187. SCanvasPaintEngine.prototype.textWidth = function (text) {
  188. return this._canvas.measureText(text).width;
  189. };
  190. SCanvasPaintEngine.prototype.changeFont = function (font) {
  191. this._canvas.font = font.size + "px " + font.name;
  192. this.setTextAlign(font.textAlign);
  193. this.setBaseLine(font.textBaseLine);
  194. this.setTextDirection(font.textDirection);
  195. };
  196. SCanvasPaintEngine.prototype.setPen = function () {
  197. this._canvas.strokeStyle = "rgba(" + this.state.pen.color.red + ", " + this.state.pen.color.green + ", " + this.state.pen.color.blue + ", " + this.state.pen.color.alpha /
  198. 255.0 + ")";
  199. this._canvas.lineWidth = this.state.pen.lineWidth;
  200. this._canvas.miterLimit = this.state.pen.miterLimit;
  201. if (this.state.pen.lineDash != null) {
  202. this._canvas.setLineDash(this.state.pen.lineDash);
  203. this._canvas.lineDashOffset = this.state.pen.dashOffset;
  204. }
  205. else {
  206. this._canvas.setLineDash([]);
  207. this._canvas.lineDashOffset = 0;
  208. }
  209. this.setLineCapStyle(this.state.pen.lineCapStyle);
  210. };
  211. SCanvasPaintEngine.prototype.setLineCapStyle = function (style) {
  212. if (style == undefined)
  213. return;
  214. if (style == __1.SLineCapStyle.Round) {
  215. this._canvas.lineCap = "round";
  216. }
  217. else if (style == __1.SLineCapStyle.Square) {
  218. this._canvas.lineCap = "square";
  219. }
  220. else {
  221. this._canvas.lineCap = "butt";
  222. }
  223. };
  224. SCanvasPaintEngine.prototype.setBrush = function () {
  225. if (this.state.brush.type == __1.SBrushType.Color) {
  226. this._canvas.fillStyle = "rgba(" + this.state.brush.color.red + ", " + this.state.brush.color.green + ", " + this.state.brush.color.blue + ", " + this.state.brush.color.alpha /
  227. 255.0 + ")";
  228. }
  229. else if (this.state.brush.type == __1.SBrushType.Gradient) {
  230. var gradient = this.state.brush.gradient, drawGradient_1;
  231. if (gradient instanceof __1.SLinearGradient) {
  232. drawGradient_1 = this._canvas.createLinearGradient(gradient.x1, gradient.y1, gradient.x2, gradient.y2);
  233. }
  234. else if (gradient instanceof __1.SRadialGradient) {
  235. drawGradient_1 = this._canvas.createRadialGradient(gradient.x1, gradient.y1, gradient.r1, gradient.x2, gradient.y2, gradient.r2);
  236. }
  237. if (gradient && drawGradient_1) {
  238. gradient.stopList.forEach(function (t) {
  239. drawGradient_1.addColorStop(t.pos, "rgba(" + t.color.red + "," + t.color.green + "," + t.color.blue + "," + t.color.alpha / 255.0 + ")");
  240. });
  241. this._canvas.fillStyle = drawGradient_1;
  242. }
  243. }
  244. };
  245. SCanvasPaintEngine.prototype.setComposite = function () {
  246. this._canvas.globalCompositeOperation =
  247. SCanvasPaintEngine.gcoList[this.state._composite];
  248. };
  249. SCanvasPaintEngine.prototype.setShadow = function () {
  250. if (this.state.shadow.shadowBlur > 0 && this.state.shadow.shadowColor) {
  251. this._canvas.shadowBlur = this.state.shadow.shadowBlur;
  252. 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 + ")";
  253. this._canvas.shadowOffsetX = this.state.shadow.shadowOffsetX;
  254. this._canvas.shadowOffsetY = this.state.shadow.shadowOffsetY;
  255. }
  256. else {
  257. this._canvas.shadowBlur = 0;
  258. this._canvas.shadowColor = "";
  259. this._canvas.shadowOffsetX = 0;
  260. this._canvas.shadowOffsetY = 0;
  261. }
  262. };
  263. SCanvasPaintEngine.prototype.setFont = function () {
  264. this._canvas.font = this.state.font.size + "px " + this.state.font.name;
  265. this.setTextAlign(this.state.font.textAlign);
  266. this.setBaseLine(this.state.font.textBaseLine);
  267. this.setTextDirection(this.state.font.textDirection);
  268. };
  269. SCanvasPaintEngine.prototype.setTextAlign = function (value) {
  270. if (value == undefined) {
  271. return;
  272. }
  273. if (value === __1.STextAlign.Start) {
  274. this._canvas.textAlign = "start";
  275. }
  276. else if (value === __1.STextAlign.End) {
  277. this._canvas.textAlign = "end";
  278. }
  279. else if (value === __1.STextAlign.Left) {
  280. this._canvas.textAlign = "left";
  281. }
  282. else if (value === __1.STextAlign.Center) {
  283. this._canvas.textAlign = "center";
  284. }
  285. else {
  286. this._canvas.textAlign = "right";
  287. }
  288. };
  289. SCanvasPaintEngine.prototype.setBaseLine = function (value) {
  290. if (value == undefined) {
  291. return;
  292. }
  293. if (value == __1.STextBaseLine.Alphabetic) {
  294. this._canvas.textBaseline = "alphabetic";
  295. }
  296. else if (value == __1.STextBaseLine.Top) {
  297. this._canvas.textBaseline = "top";
  298. }
  299. else if (value == __1.STextBaseLine.Hanging) {
  300. this._canvas.textBaseline = "hanging";
  301. }
  302. else if (value == __1.STextBaseLine.Middle) {
  303. this._canvas.textBaseline = "middle";
  304. }
  305. else if (value == __1.STextBaseLine.Ideographic) {
  306. this._canvas.textBaseline = "ideographic";
  307. }
  308. else {
  309. this._canvas.textBaseline = "bottom";
  310. }
  311. };
  312. SCanvasPaintEngine.prototype.setTextDirection = function (value) {
  313. if (value == undefined) {
  314. return;
  315. }
  316. if (value == __1.STextDirection.Inherit) {
  317. this._canvas.direction = "inherit";
  318. }
  319. else if (value == __1.STextDirection.LTR) {
  320. this._canvas.direction = "ltr";
  321. }
  322. else {
  323. this._canvas.direction = "rtl";
  324. }
  325. };
  326. SCanvasPaintEngine.prototype.setMatrix = function () {
  327. 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);
  328. };
  329. SCanvasPaintEngine.gcoList = [
  330. "copy",
  331. "destination-atop",
  332. "destination-in",
  333. "destination-out",
  334. "destination-over",
  335. "lighter",
  336. "source-atop",
  337. "source-in",
  338. "source-out",
  339. "source-over",
  340. "xor"
  341. ];
  342. return SCanvasPaintEngine;
  343. }(SPaintEngine_1.SPaintEngine));
  344. exports.SCanvasPaintEngine = SCanvasPaintEngine;