pattern_helper.js 14 KB

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