pattern_helper.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464
  1. /**
  2. * @licstart The following is the entire license notice for the
  3. * Javascript code in this page
  4. *
  5. * Copyright 2019 Mozilla Foundation
  6. *
  7. * Licensed under the Apache License, Version 2.0 (the "License");
  8. * you may not use this file except in compliance with the License.
  9. * You may obtain a copy of the License at
  10. *
  11. * http://www.apache.org/licenses/LICENSE-2.0
  12. *
  13. * Unless required by applicable law or agreed to in writing, software
  14. * distributed under the License is distributed on an "AS IS" BASIS,
  15. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16. * See the License for the specific language governing permissions and
  17. * limitations under the License.
  18. *
  19. * @licend The above is the entire license notice for the
  20. * Javascript code in this page
  21. */
  22. "use strict";
  23. Object.defineProperty(exports, "__esModule", {
  24. value: true
  25. });
  26. exports.getShadingPatternFromIR = getShadingPatternFromIR;
  27. exports.TilingPattern = void 0;
  28. var _util = require("../shared/util");
  29. var ShadingIRs = {};
  30. function applyBoundingBox(ctx, bbox) {
  31. if (!bbox || typeof Path2D === 'undefined') {
  32. return;
  33. }
  34. var width = bbox[2] - bbox[0];
  35. var height = bbox[3] - bbox[1];
  36. var region = new Path2D();
  37. region.rect(bbox[0], bbox[1], width, height);
  38. ctx.clip(region);
  39. }
  40. ShadingIRs.RadialAxial = {
  41. fromIR: function RadialAxial_fromIR(raw) {
  42. var type = raw[1];
  43. var bbox = raw[2];
  44. var colorStops = raw[3];
  45. var p0 = raw[4];
  46. var p1 = raw[5];
  47. var r0 = raw[6];
  48. var r1 = raw[7];
  49. return {
  50. type: 'Pattern',
  51. getPattern: function RadialAxial_getPattern(ctx) {
  52. applyBoundingBox(ctx, bbox);
  53. var grad;
  54. if (type === 'axial') {
  55. grad = ctx.createLinearGradient(p0[0], p0[1], p1[0], p1[1]);
  56. } else if (type === 'radial') {
  57. grad = ctx.createRadialGradient(p0[0], p0[1], r0, p1[0], p1[1], r1);
  58. }
  59. for (var i = 0, ii = colorStops.length; i < ii; ++i) {
  60. var c = colorStops[i];
  61. grad.addColorStop(c[0], c[1]);
  62. }
  63. return grad;
  64. }
  65. };
  66. }
  67. };
  68. var createMeshCanvas = function createMeshCanvasClosure() {
  69. function drawTriangle(data, context, p1, p2, p3, c1, c2, c3) {
  70. var coords = context.coords,
  71. colors = context.colors;
  72. var bytes = data.data,
  73. rowSize = data.width * 4;
  74. var tmp;
  75. if (coords[p1 + 1] > coords[p2 + 1]) {
  76. tmp = p1;
  77. p1 = p2;
  78. p2 = tmp;
  79. tmp = c1;
  80. c1 = c2;
  81. c2 = tmp;
  82. }
  83. if (coords[p2 + 1] > coords[p3 + 1]) {
  84. tmp = p2;
  85. p2 = p3;
  86. p3 = tmp;
  87. tmp = c2;
  88. c2 = c3;
  89. c3 = tmp;
  90. }
  91. if (coords[p1 + 1] > coords[p2 + 1]) {
  92. tmp = p1;
  93. p1 = p2;
  94. p2 = tmp;
  95. tmp = c1;
  96. c1 = c2;
  97. c2 = tmp;
  98. }
  99. var x1 = (coords[p1] + context.offsetX) * context.scaleX;
  100. var y1 = (coords[p1 + 1] + context.offsetY) * context.scaleY;
  101. var x2 = (coords[p2] + context.offsetX) * context.scaleX;
  102. var y2 = (coords[p2 + 1] + context.offsetY) * context.scaleY;
  103. var x3 = (coords[p3] + context.offsetX) * context.scaleX;
  104. var y3 = (coords[p3 + 1] + context.offsetY) * context.scaleY;
  105. if (y1 >= y3) {
  106. return;
  107. }
  108. var c1r = colors[c1],
  109. c1g = colors[c1 + 1],
  110. c1b = colors[c1 + 2];
  111. var c2r = colors[c2],
  112. c2g = colors[c2 + 1],
  113. c2b = colors[c2 + 2];
  114. var c3r = colors[c3],
  115. c3g = colors[c3 + 1],
  116. c3b = colors[c3 + 2];
  117. var minY = Math.round(y1),
  118. maxY = Math.round(y3);
  119. var xa, car, cag, cab;
  120. var xb, cbr, cbg, cbb;
  121. var k;
  122. for (var y = minY; y <= maxY; y++) {
  123. if (y < y2) {
  124. k = y < y1 ? 0 : y1 === y2 ? 1 : (y1 - y) / (y1 - y2);
  125. xa = x1 - (x1 - x2) * k;
  126. car = c1r - (c1r - c2r) * k;
  127. cag = c1g - (c1g - c2g) * k;
  128. cab = c1b - (c1b - c2b) * k;
  129. } else {
  130. k = y > y3 ? 1 : y2 === y3 ? 0 : (y2 - y) / (y2 - y3);
  131. xa = x2 - (x2 - x3) * k;
  132. car = c2r - (c2r - c3r) * k;
  133. cag = c2g - (c2g - c3g) * k;
  134. cab = c2b - (c2b - c3b) * k;
  135. }
  136. k = y < y1 ? 0 : y > y3 ? 1 : (y1 - y) / (y1 - y3);
  137. xb = x1 - (x1 - x3) * k;
  138. cbr = c1r - (c1r - c3r) * k;
  139. cbg = c1g - (c1g - c3g) * k;
  140. cbb = c1b - (c1b - c3b) * k;
  141. var x1_ = Math.round(Math.min(xa, xb));
  142. var x2_ = Math.round(Math.max(xa, xb));
  143. var j = rowSize * y + x1_ * 4;
  144. for (var x = x1_; x <= x2_; x++) {
  145. k = (xa - x) / (xa - xb);
  146. k = k < 0 ? 0 : k > 1 ? 1 : k;
  147. bytes[j++] = car - (car - cbr) * k | 0;
  148. bytes[j++] = cag - (cag - cbg) * k | 0;
  149. bytes[j++] = cab - (cab - cbb) * k | 0;
  150. bytes[j++] = 255;
  151. }
  152. }
  153. }
  154. function drawFigure(data, figure, context) {
  155. var ps = figure.coords;
  156. var cs = figure.colors;
  157. var i, ii;
  158. switch (figure.type) {
  159. case 'lattice':
  160. var verticesPerRow = figure.verticesPerRow;
  161. var rows = Math.floor(ps.length / verticesPerRow) - 1;
  162. var cols = verticesPerRow - 1;
  163. for (i = 0; i < rows; i++) {
  164. var q = i * verticesPerRow;
  165. for (var j = 0; j < cols; j++, q++) {
  166. drawTriangle(data, context, ps[q], ps[q + 1], ps[q + verticesPerRow], cs[q], cs[q + 1], cs[q + verticesPerRow]);
  167. drawTriangle(data, context, ps[q + verticesPerRow + 1], ps[q + 1], ps[q + verticesPerRow], cs[q + verticesPerRow + 1], cs[q + 1], cs[q + verticesPerRow]);
  168. }
  169. }
  170. break;
  171. case 'triangles':
  172. for (i = 0, ii = ps.length; i < ii; i += 3) {
  173. drawTriangle(data, context, ps[i], ps[i + 1], ps[i + 2], cs[i], cs[i + 1], cs[i + 2]);
  174. }
  175. break;
  176. default:
  177. throw new Error('illegal figure');
  178. }
  179. }
  180. function createMeshCanvas(bounds, combinesScale, coords, colors, figures, backgroundColor, cachedCanvases, webGLContext) {
  181. var EXPECTED_SCALE = 1.1;
  182. var MAX_PATTERN_SIZE = 3000;
  183. var BORDER_SIZE = 2;
  184. var offsetX = Math.floor(bounds[0]);
  185. var offsetY = Math.floor(bounds[1]);
  186. var boundsWidth = Math.ceil(bounds[2]) - offsetX;
  187. var boundsHeight = Math.ceil(bounds[3]) - offsetY;
  188. var width = Math.min(Math.ceil(Math.abs(boundsWidth * combinesScale[0] * EXPECTED_SCALE)), MAX_PATTERN_SIZE);
  189. var height = Math.min(Math.ceil(Math.abs(boundsHeight * combinesScale[1] * EXPECTED_SCALE)), MAX_PATTERN_SIZE);
  190. var scaleX = boundsWidth / width;
  191. var scaleY = boundsHeight / height;
  192. var context = {
  193. coords: coords,
  194. colors: colors,
  195. offsetX: -offsetX,
  196. offsetY: -offsetY,
  197. scaleX: 1 / scaleX,
  198. scaleY: 1 / scaleY
  199. };
  200. var paddedWidth = width + BORDER_SIZE * 2;
  201. var paddedHeight = height + BORDER_SIZE * 2;
  202. var canvas, tmpCanvas, i, ii;
  203. if (webGLContext.isEnabled) {
  204. canvas = webGLContext.drawFigures({
  205. width: width,
  206. height: height,
  207. backgroundColor: backgroundColor,
  208. figures: figures,
  209. context: context
  210. });
  211. tmpCanvas = cachedCanvases.getCanvas('mesh', paddedWidth, paddedHeight, false);
  212. tmpCanvas.context.drawImage(canvas, BORDER_SIZE, BORDER_SIZE);
  213. canvas = tmpCanvas.canvas;
  214. } else {
  215. tmpCanvas = cachedCanvases.getCanvas('mesh', paddedWidth, paddedHeight, false);
  216. var tmpCtx = tmpCanvas.context;
  217. var data = tmpCtx.createImageData(width, height);
  218. if (backgroundColor) {
  219. var bytes = data.data;
  220. for (i = 0, ii = bytes.length; i < ii; i += 4) {
  221. bytes[i] = backgroundColor[0];
  222. bytes[i + 1] = backgroundColor[1];
  223. bytes[i + 2] = backgroundColor[2];
  224. bytes[i + 3] = 255;
  225. }
  226. }
  227. for (i = 0; i < figures.length; i++) {
  228. drawFigure(data, figures[i], context);
  229. }
  230. tmpCtx.putImageData(data, BORDER_SIZE, BORDER_SIZE);
  231. canvas = tmpCanvas.canvas;
  232. }
  233. return {
  234. canvas: canvas,
  235. offsetX: offsetX - BORDER_SIZE * scaleX,
  236. offsetY: offsetY - BORDER_SIZE * scaleY,
  237. scaleX: scaleX,
  238. scaleY: scaleY
  239. };
  240. }
  241. return createMeshCanvas;
  242. }();
  243. ShadingIRs.Mesh = {
  244. fromIR: function Mesh_fromIR(raw) {
  245. var coords = raw[2];
  246. var colors = raw[3];
  247. var figures = raw[4];
  248. var bounds = raw[5];
  249. var matrix = raw[6];
  250. var bbox = raw[7];
  251. var background = raw[8];
  252. return {
  253. type: 'Pattern',
  254. getPattern: function Mesh_getPattern(ctx, owner, shadingFill) {
  255. applyBoundingBox(ctx, bbox);
  256. var scale;
  257. if (shadingFill) {
  258. scale = _util.Util.singularValueDecompose2dScale(ctx.mozCurrentTransform);
  259. } else {
  260. scale = _util.Util.singularValueDecompose2dScale(owner.baseTransform);
  261. if (matrix) {
  262. var matrixScale = _util.Util.singularValueDecompose2dScale(matrix);
  263. scale = [scale[0] * matrixScale[0], scale[1] * matrixScale[1]];
  264. }
  265. }
  266. var temporaryPatternCanvas = createMeshCanvas(bounds, scale, coords, colors, figures, shadingFill ? null : background, owner.cachedCanvases, owner.webGLContext);
  267. if (!shadingFill) {
  268. ctx.setTransform.apply(ctx, owner.baseTransform);
  269. if (matrix) {
  270. ctx.transform.apply(ctx, matrix);
  271. }
  272. }
  273. ctx.translate(temporaryPatternCanvas.offsetX, temporaryPatternCanvas.offsetY);
  274. ctx.scale(temporaryPatternCanvas.scaleX, temporaryPatternCanvas.scaleY);
  275. return ctx.createPattern(temporaryPatternCanvas.canvas, 'no-repeat');
  276. }
  277. };
  278. }
  279. };
  280. ShadingIRs.Dummy = {
  281. fromIR: function Dummy_fromIR() {
  282. return {
  283. type: 'Pattern',
  284. getPattern: function Dummy_fromIR_getPattern() {
  285. return 'hotpink';
  286. }
  287. };
  288. }
  289. };
  290. function getShadingPatternFromIR(raw) {
  291. var shadingIR = ShadingIRs[raw[0]];
  292. if (!shadingIR) {
  293. throw new Error("Unknown IR type: ".concat(raw[0]));
  294. }
  295. return shadingIR.fromIR(raw);
  296. }
  297. var TilingPattern = function TilingPatternClosure() {
  298. var PaintType = {
  299. COLORED: 1,
  300. UNCOLORED: 2
  301. };
  302. var MAX_PATTERN_SIZE = 3000;
  303. function TilingPattern(IR, color, ctx, canvasGraphicsFactory, baseTransform) {
  304. this.operatorList = IR[2];
  305. this.matrix = IR[3] || [1, 0, 0, 1, 0, 0];
  306. this.bbox = IR[4];
  307. this.xstep = IR[5];
  308. this.ystep = IR[6];
  309. this.paintType = IR[7];
  310. this.tilingType = IR[8];
  311. this.color = color;
  312. this.canvasGraphicsFactory = canvasGraphicsFactory;
  313. this.baseTransform = baseTransform;
  314. this.type = 'Pattern';
  315. this.ctx = ctx;
  316. }
  317. TilingPattern.prototype = {
  318. createPatternCanvas: function TilinPattern_createPatternCanvas(owner) {
  319. var operatorList = this.operatorList;
  320. var bbox = this.bbox;
  321. var xstep = this.xstep;
  322. var ystep = this.ystep;
  323. var paintType = this.paintType;
  324. var tilingType = this.tilingType;
  325. var color = this.color;
  326. var canvasGraphicsFactory = this.canvasGraphicsFactory;
  327. (0, _util.info)('TilingType: ' + tilingType);
  328. var x0 = bbox[0],
  329. y0 = bbox[1],
  330. x1 = bbox[2],
  331. y1 = bbox[3];
  332. var matrixScale = _util.Util.singularValueDecompose2dScale(this.matrix);
  333. var curMatrixScale = _util.Util.singularValueDecompose2dScale(this.baseTransform);
  334. var combinedScale = [matrixScale[0] * curMatrixScale[0], matrixScale[1] * curMatrixScale[1]];
  335. var dimx = this.getSizeAndScale(xstep, this.ctx.canvas.width, combinedScale[0]);
  336. var dimy = this.getSizeAndScale(ystep, this.ctx.canvas.height, combinedScale[1]);
  337. var tmpCanvas = owner.cachedCanvases.getCanvas('pattern', dimx.size, dimy.size, true);
  338. var tmpCtx = tmpCanvas.context;
  339. var graphics = canvasGraphicsFactory.createCanvasGraphics(tmpCtx);
  340. graphics.groupLevel = owner.groupLevel;
  341. this.setFillAndStrokeStyleToContext(graphics, paintType, color);
  342. graphics.transform(dimx.scale, 0, 0, dimy.scale, 0, 0);
  343. graphics.transform(1, 0, 0, 1, -x0, -y0);
  344. this.clipBbox(graphics, bbox, x0, y0, x1, y1);
  345. graphics.executeOperatorList(operatorList);
  346. this.ctx.transform(1, 0, 0, 1, x0, y0);
  347. this.ctx.scale(1 / dimx.scale, 1 / dimy.scale);
  348. return tmpCanvas.canvas;
  349. },
  350. getSizeAndScale: function TilingPattern_getSizeAndScale(step, realOutputSize, scale) {
  351. step = Math.abs(step);
  352. var maxSize = Math.max(MAX_PATTERN_SIZE, realOutputSize);
  353. var size = Math.ceil(step * scale);
  354. if (size >= maxSize) {
  355. size = maxSize;
  356. } else {
  357. scale = size / step;
  358. }
  359. return {
  360. scale: scale,
  361. size: size
  362. };
  363. },
  364. clipBbox: function clipBbox(graphics, bbox, x0, y0, x1, y1) {
  365. if (Array.isArray(bbox) && bbox.length === 4) {
  366. var bboxWidth = x1 - x0;
  367. var bboxHeight = y1 - y0;
  368. graphics.ctx.rect(x0, y0, bboxWidth, bboxHeight);
  369. graphics.clip();
  370. graphics.endPath();
  371. }
  372. },
  373. setFillAndStrokeStyleToContext: function setFillAndStrokeStyleToContext(graphics, paintType, color) {
  374. var context = graphics.ctx,
  375. current = graphics.current;
  376. switch (paintType) {
  377. case PaintType.COLORED:
  378. var ctx = this.ctx;
  379. context.fillStyle = ctx.fillStyle;
  380. context.strokeStyle = ctx.strokeStyle;
  381. current.fillColor = ctx.fillStyle;
  382. current.strokeColor = ctx.strokeStyle;
  383. break;
  384. case PaintType.UNCOLORED:
  385. var cssColor = _util.Util.makeCssRgb(color[0], color[1], color[2]);
  386. context.fillStyle = cssColor;
  387. context.strokeStyle = cssColor;
  388. current.fillColor = cssColor;
  389. current.strokeColor = cssColor;
  390. break;
  391. default:
  392. throw new _util.FormatError("Unsupported paint type: ".concat(paintType));
  393. }
  394. },
  395. getPattern: function TilingPattern_getPattern(ctx, owner) {
  396. ctx = this.ctx;
  397. ctx.setTransform.apply(ctx, this.baseTransform);
  398. ctx.transform.apply(ctx, this.matrix);
  399. var temporaryPatternCanvas = this.createPatternCanvas(owner);
  400. return ctx.createPattern(temporaryPatternCanvas, 'repeat');
  401. }
  402. };
  403. return TilingPattern;
  404. }();
  405. exports.TilingPattern = TilingPattern;