blob: 16f8ea6182941d30f3e5a571d369d3f78d0fe6a0 [file] [log] [blame]
Kevin Lubick217056c2018-09-20 17:39:31 -04001// Adds JS functions to augment the CanvasKit interface.
2// For example, if there is a wrapper around the C++ call or logic to allow
3// chaining, it should go here.
Kevin Lubick1a05fce2018-11-20 12:51:16 -05004
Kevin Lubickf5ea37f2019-02-28 10:06:18 -05005// CanvasKit.onRuntimeInitialized is called after the WASM library has loaded.
6// Anything that modifies an exposed class (e.g. SkPath) should be set
7// after onRuntimeInitialized, otherwise, it can happen outside of that scope.
8CanvasKit.onRuntimeInitialized = function() {
9 // All calls to 'this' need to go in externs.js so closure doesn't minify them away.
Kevin Lubick1a05fce2018-11-20 12:51:16 -050010
Kevin Lubickfa5a1382019-10-09 10:46:14 -040011 // buffer is the underlying ArrayBuffer that is the WASM memory blob.
12 // It was removed from Emscripten proper in https://github.com/emscripten-core/emscripten/pull/8277
13 // but it is convenient to have a reference to, so we add it back in.
14 CanvasKit.buffer = CanvasKit.HEAPU8.buffer;
15
Kevin Lubickf5ea37f2019-02-28 10:06:18 -050016 // Add some helpers for matrices. This is ported from SkMatrix.cpp
17 // to save complexity and overhead of going back and forth between
18 // C++ and JS layers.
19 // I would have liked to use something like DOMMatrix, except it
20 // isn't widely supported (would need polyfills) and it doesn't
21 // have a mapPoints() function (which could maybe be tacked on here).
22 // If DOMMatrix catches on, it would be worth re-considering this usage.
23 CanvasKit.SkMatrix = {};
24 function sdot(a, b, c, d, e, f) {
25 e = e || 0;
26 f = f || 0;
27 return a * b + c * d + e * f;
28 }
29
30 CanvasKit.SkMatrix.identity = function() {
31 return [
32 1, 0, 0,
33 0, 1, 0,
34 0, 0, 1,
35 ];
36 };
37
38 // Return the inverse (if it exists) of this matrix.
39 // Otherwise, return the identity.
40 CanvasKit.SkMatrix.invert = function(m) {
41 var det = m[0]*m[4]*m[8] + m[1]*m[5]*m[6] + m[2]*m[3]*m[7]
42 - m[2]*m[4]*m[6] - m[1]*m[3]*m[8] - m[0]*m[5]*m[7];
43 if (!det) {
44 SkDebug('Warning, uninvertible matrix');
45 return CanvasKit.SkMatrix.identity();
Kevin Lubick1a05fce2018-11-20 12:51:16 -050046 }
Kevin Lubickf5ea37f2019-02-28 10:06:18 -050047 return [
48 (m[4]*m[8] - m[5]*m[7])/det, (m[2]*m[7] - m[1]*m[8])/det, (m[1]*m[5] - m[2]*m[4])/det,
49 (m[5]*m[6] - m[3]*m[8])/det, (m[0]*m[8] - m[2]*m[6])/det, (m[2]*m[3] - m[0]*m[5])/det,
50 (m[3]*m[7] - m[4]*m[6])/det, (m[1]*m[6] - m[0]*m[7])/det, (m[0]*m[4] - m[1]*m[3])/det,
51 ];
52 };
Kevin Lubick1a05fce2018-11-20 12:51:16 -050053
Kevin Lubickf5ea37f2019-02-28 10:06:18 -050054 // Maps the given points according to the passed in matrix.
55 // Results are done in place.
56 // See SkMatrix.h::mapPoints for the docs on the math.
57 CanvasKit.SkMatrix.mapPoints = function(matrix, ptArr) {
58 if (ptArr.length % 2) {
59 throw 'mapPoints requires an even length arr';
Kevin Lubickb9db3902018-11-26 11:47:54 -050060 }
Kevin Lubickf5ea37f2019-02-28 10:06:18 -050061 for (var i = 0; i < ptArr.length; i+=2) {
62 var x = ptArr[i], y = ptArr[i+1];
63 // Gx+Hy+I
64 var denom = matrix[6]*x + matrix[7]*y + matrix[8];
65 // Ax+By+C
66 var xTrans = matrix[0]*x + matrix[1]*y + matrix[2];
67 // Dx+Ey+F
68 var yTrans = matrix[3]*x + matrix[4]*y + matrix[5];
69 ptArr[i] = xTrans/denom;
70 ptArr[i+1] = yTrans/denom;
71 }
72 return ptArr;
73 };
Kevin Lubickb9db3902018-11-26 11:47:54 -050074
Kevin Lubickf5ea37f2019-02-28 10:06:18 -050075 CanvasKit.SkMatrix.multiply = function(m1, m2) {
76 var result = [0,0,0, 0,0,0, 0,0,0];
77 for (var r = 0; r < 3; r++) {
78 for (var c = 0; c < 3; c++) {
79 // m1 and m2 are 1D arrays pretending to be 2D arrays
80 result[3*r + c] = sdot(m1[3*r + 0], m2[3*0 + c],
81 m1[3*r + 1], m2[3*1 + c],
82 m1[3*r + 2], m2[3*2 + c]);
Kevin Lubick1a05fce2018-11-20 12:51:16 -050083 }
Kevin Lubickf5ea37f2019-02-28 10:06:18 -050084 }
85 return result;
86 }
Kevin Lubick1a05fce2018-11-20 12:51:16 -050087
Kevin Lubickf5ea37f2019-02-28 10:06:18 -050088 // Return a matrix representing a rotation by n radians.
89 // px, py optionally say which point the rotation should be around
90 // with the default being (0, 0);
91 CanvasKit.SkMatrix.rotated = function(radians, px, py) {
92 px = px || 0;
93 py = py || 0;
94 var sinV = Math.sin(radians);
95 var cosV = Math.cos(radians);
96 return [
97 cosV, -sinV, sdot( sinV, py, 1 - cosV, px),
98 sinV, cosV, sdot(-sinV, px, 1 - cosV, py),
99 0, 0, 1,
100 ];
101 };
Kevin Lubick217056c2018-09-20 17:39:31 -0400102
Kevin Lubickf5ea37f2019-02-28 10:06:18 -0500103 CanvasKit.SkMatrix.scaled = function(sx, sy, px, py) {
104 px = px || 0;
105 py = py || 0;
106 return [
107 sx, 0, px - sx * px,
108 0, sy, py - sy * py,
109 0, 0, 1,
110 ];
111 };
Kevin Lubickda3d8ac2019-01-07 11:08:55 -0500112
Kevin Lubickf5ea37f2019-02-28 10:06:18 -0500113 CanvasKit.SkMatrix.skewed = function(kx, ky, px, py) {
114 px = px || 0;
115 py = py || 0;
116 return [
117 1, kx, -kx * px,
118 ky, 1, -ky * py,
119 0, 0, 1,
120 ];
121 };
Alexander Khovansky3e119332018-11-15 02:01:19 +0300122
Kevin Lubickf5ea37f2019-02-28 10:06:18 -0500123 CanvasKit.SkMatrix.translated = function(dx, dy) {
124 return [
125 1, 0, dx,
126 0, 1, dy,
127 0, 0, 1,
128 ];
129 };
Kevin Lubick1646e7d2018-12-07 13:03:08 -0500130
Kevin Lubickd3729342019-09-12 11:11:25 -0400131 // An SkColorMatrix is a 4x4 color matrix that transforms the 4 color channels
132 // with a 1x4 matrix that post-translates those 4 channels.
133 // For example, the following is the layout with the scale (S) and post-transform
134 // (PT) items indicated.
135 // RS, 0, 0, 0 | RPT
136 // 0, GS, 0, 0 | GPT
137 // 0, 0, BS, 0 | BPT
138 // 0, 0, 0, AS | APT
139 //
140 // Much of this was hand-transcribed from SkColorMatrix.cpp, because it's easier to
141 // deal with a Float32Array of length 20 than to try to expose the SkColorMatrix object.
142
143 var rScale = 0;
144 var gScale = 6;
145 var bScale = 12;
146 var aScale = 18;
147
148 var rPostTrans = 4;
149 var gPostTrans = 9;
150 var bPostTrans = 14;
151 var aPostTrans = 19;
152
153 CanvasKit.SkColorMatrix = {};
154 CanvasKit.SkColorMatrix.identity = function() {
155 var m = new Float32Array(20);
156 m[rScale] = 1;
157 m[gScale] = 1;
158 m[bScale] = 1;
159 m[aScale] = 1;
160 return m;
161 }
162
163 CanvasKit.SkColorMatrix.scaled = function(rs, gs, bs, as) {
164 var m = new Float32Array(20);
165 m[rScale] = rs;
166 m[gScale] = gs;
167 m[bScale] = bs;
168 m[aScale] = as;
169 return m;
170 }
171
172 var rotateIndices = [
173 [6, 7, 11, 12],
174 [0, 10, 2, 12],
175 [0, 1, 5, 6],
176 ];
177 // axis should be 0, 1, 2 for r, g, b
178 CanvasKit.SkColorMatrix.rotated = function(axis, sine, cosine) {
179 var m = CanvasKit.SkColorMatrix.identity();
180 var indices = rotateIndices[axis];
181 m[indices[0]] = cosine;
182 m[indices[1]] = sine;
183 m[indices[2]] = -sine;
184 m[indices[3]] = cosine;
185 return m;
186 }
187
188 // m is a SkColorMatrix (i.e. a Float32Array), and this sets the 4 "special"
189 // params that will translate the colors after they are multiplied by the 4x4 matrix.
190 CanvasKit.SkColorMatrix.postTranslate = function(m, dr, dg, db, da) {
191 m[rPostTrans] += dr;
192 m[gPostTrans] += dg;
193 m[bPostTrans] += db;
194 m[aPostTrans] += da;
195 return m;
196 }
197
198 // concat returns a new SkColorMatrix that is the result of multiplying outer*inner;
199 CanvasKit.SkColorMatrix.concat = function(outer, inner) {
200 var m = new Float32Array(20);
201 var index = 0;
202 for (var j = 0; j < 20; j += 5) {
203 for (var i = 0; i < 4; i++) {
204 m[index++] = outer[j + 0] * inner[i + 0] +
205 outer[j + 1] * inner[i + 5] +
206 outer[j + 2] * inner[i + 10] +
207 outer[j + 3] * inner[i + 15];
208 }
209 m[index++] = outer[j + 0] * inner[4] +
210 outer[j + 1] * inner[9] +
211 outer[j + 2] * inner[14] +
212 outer[j + 3] * inner[19] +
213 outer[j + 4];
214 }
215
216 return m;
217 }
218
Kevin Lubickf5ea37f2019-02-28 10:06:18 -0500219 CanvasKit.SkPath.prototype.addArc = function(oval, startAngle, sweepAngle) {
220 // see arc() for the HTMLCanvas version
221 // note input angles are degrees.
222 this._addArc(oval, startAngle, sweepAngle);
223 return this;
224 };
Kevin Lubick217056c2018-09-20 17:39:31 -0400225
Kevin Lubicke384df42019-08-26 15:48:09 -0400226 CanvasKit.SkPath.prototype.addOval = function(oval, isCCW, startIndex) {
227 if (startIndex === undefined) {
228 startIndex = 1;
229 }
230 this._addOval(oval, !!isCCW, startIndex);
231 return this;
232 };
233
Kevin Lubickf5ea37f2019-02-28 10:06:18 -0500234 CanvasKit.SkPath.prototype.addPath = function() {
235 // Takes 1, 2, 7, or 10 required args, where the first arg is always the path.
236 // The last arg is optional and chooses between add or extend mode.
237 // The options for the remaining args are:
238 // - an array of 6 or 9 parameters (perspective is optional)
239 // - the 9 parameters of a full matrix or
240 // the 6 non-perspective params of a matrix.
241 var args = Array.prototype.slice.call(arguments);
242 var path = args[0];
243 var extend = false;
244 if (typeof args[args.length-1] === "boolean") {
245 extend = args.pop();
246 }
247 if (args.length === 1) {
248 // Add path, unchanged. Use identity matrix
249 this._addPath(path, 1, 0, 0,
250 0, 1, 0,
251 0, 0, 1,
252 extend);
253 } else if (args.length === 2) {
254 // User provided the 9 params of a full matrix as an array.
255 var a = args[1];
256 this._addPath(path, a[0], a[1], a[2],
257 a[3], a[4], a[5],
258 a[6] || 0, a[7] || 0, a[8] || 1,
259 extend);
260 } else if (args.length === 7 || args.length === 10) {
261 // User provided the 9 params of a (full) matrix directly.
262 // (or just the 6 non perspective ones)
263 // These are in the same order as what Skia expects.
264 var a = args;
265 this._addPath(path, a[1], a[2], a[3],
266 a[4], a[5], a[6],
267 a[7] || 0, a[8] || 0, a[9] || 1,
268 extend);
269 } else {
270 SkDebug('addPath expected to take 1, 2, 7, or 10 required args. Got ' + args.length);
Kevin Lubickb5ae3b52018-11-03 07:51:19 -0400271 return null;
Kevin Lubickf5ea37f2019-02-28 10:06:18 -0500272 }
273 return this;
274 };
Kevin Lubickb5ae3b52018-11-03 07:51:19 -0400275
Kevin Lubick37ab53e2019-11-11 10:06:08 -0500276 // points is either an array of [x, y] where x and y are numbers or
277 // a typed array from Malloc where the even indices will be treated
278 // as x coordinates and the odd indices will be treated as y coordinates.
279 CanvasKit.SkPath.prototype.addPoly = function(points, close) {
280 var ptr;
281 var n;
282 // This was created with CanvasKit.Malloc, so assume the user has
283 // already been filled with data.
284 if (points['_ck']) {
285 ptr = points.byteOffset;
286 n = points.length/2;
287 } else {
288 ptr = copy2dArray(points, CanvasKit.HEAPF32);
289 n = points.length;
290 }
291 this._addPoly(ptr, n, close);
292 CanvasKit._free(ptr);
293 return this;
294 };
295
Kevin Lubickf5ea37f2019-02-28 10:06:18 -0500296 CanvasKit.SkPath.prototype.addRect = function() {
297 // Takes 1, 2, 4 or 5 args
298 // - SkRect
299 // - SkRect, isCCW
300 // - left, top, right, bottom
301 // - left, top, right, bottom, isCCW
302 if (arguments.length === 1 || arguments.length === 2) {
303 var r = arguments[0];
304 var ccw = arguments[1] || false;
305 this._addRect(r.fLeft, r.fTop, r.fRight, r.fBottom, ccw);
306 } else if (arguments.length === 4 || arguments.length === 5) {
307 var a = arguments;
308 this._addRect(a[0], a[1], a[2], a[3], a[4] || false);
309 } else {
310 SkDebug('addRect expected to take 1, 2, 4, or 5 args. Got ' + arguments.length);
Kevin Lubick217056c2018-09-20 17:39:31 -0400311 return null;
Kevin Lubickf5ea37f2019-02-28 10:06:18 -0500312 }
313 return this;
314 };
Kevin Lubick217056c2018-09-20 17:39:31 -0400315
Kevin Lubickf5ea37f2019-02-28 10:06:18 -0500316 CanvasKit.SkPath.prototype.addRoundRect = function() {
317 // Takes 3, 4, 6 or 7 args
318 // - SkRect, radii, ccw
319 // - SkRect, rx, ry, ccw
320 // - left, top, right, bottom, radii, ccw
321 // - left, top, right, bottom, rx, ry, ccw
322 var args = arguments;
323 if (args.length === 3 || args.length === 6) {
324 var radii = args[args.length-2];
325 } else if (args.length === 6 || args.length === 7){
326 // duplicate the given (rx, ry) pairs for each corner.
327 var rx = args[args.length-3];
328 var ry = args[args.length-2];
329 var radii = [rx, ry, rx, ry, rx, ry, rx, ry];
330 } else {
331 SkDebug('addRoundRect expected to take 3, 4, 6, or 7 args. Got ' + args.length);
332 return null;
333 }
334 if (radii.length !== 8) {
335 SkDebug('addRoundRect needs 8 radii provided. Got ' + radii.length);
336 return null;
337 }
338 var rptr = copy1dArray(radii, CanvasKit.HEAPF32);
339 if (args.length === 3 || args.length === 4) {
340 var r = args[0];
341 var ccw = args[args.length - 1];
342 this._addRoundRect(r.fLeft, r.fTop, r.fRight, r.fBottom, rptr, ccw);
343 } else if (args.length === 6 || args.length === 7) {
344 var a = args;
345 this._addRoundRect(a[0], a[1], a[2], a[3], rptr, ccw);
346 }
347 CanvasKit._free(rptr);
348 return this;
349 };
350
351 CanvasKit.SkPath.prototype.arc = function(x, y, radius, startAngle, endAngle, ccw) {
352 // emulates the HTMLCanvas behavior. See addArc() for the SkPath version.
353 // Note input angles are radians.
354 var bounds = CanvasKit.LTRBRect(x-radius, y-radius, x+radius, y+radius);
355 var sweep = radiansToDegrees(endAngle - startAngle) - (360 * !!ccw);
356 var temp = new CanvasKit.SkPath();
357 temp.addArc(bounds, radiansToDegrees(startAngle), sweep);
358 this.addPath(temp, true);
359 temp.delete();
360 return this;
361 };
362
363 CanvasKit.SkPath.prototype.arcTo = function() {
364 // takes 4, 5 or 7 args
365 // - 5 x1, y1, x2, y2, radius
366 // - 4 oval (as Rect), startAngle, sweepAngle, forceMoveTo
Kevin Lubicke384df42019-08-26 15:48:09 -0400367 // - 7 rx, ry, xAxisRotate, useSmallArc, isCCW, x, y
Kevin Lubickf5ea37f2019-02-28 10:06:18 -0500368 var args = arguments;
369 if (args.length === 5) {
370 this._arcTo(args[0], args[1], args[2], args[3], args[4]);
371 } else if (args.length === 4) {
372 this._arcTo(args[0], args[1], args[2], args[3]);
373 } else if (args.length === 7) {
Kevin Lubicke384df42019-08-26 15:48:09 -0400374 this._arcTo(args[0], args[1], args[2], !!args[3], !!args[4], args[5], args[6]);
Kevin Lubickf5ea37f2019-02-28 10:06:18 -0500375 } else {
376 throw 'Invalid args for arcTo. Expected 4, 5, or 7, got '+ args.length;
377 }
378
379 return this;
380 };
381
382 CanvasKit.SkPath.prototype.close = function() {
383 this._close();
384 return this;
385 };
386
387 CanvasKit.SkPath.prototype.conicTo = function(x1, y1, x2, y2, w) {
388 this._conicTo(x1, y1, x2, y2, w);
389 return this;
390 };
391
392 CanvasKit.SkPath.prototype.cubicTo = function(cp1x, cp1y, cp2x, cp2y, x, y) {
393 this._cubicTo(cp1x, cp1y, cp2x, cp2y, x, y);
394 return this;
395 };
396
397 CanvasKit.SkPath.prototype.dash = function(on, off, phase) {
398 if (this._dash(on, off, phase)) {
Kevin Lubick217056c2018-09-20 17:39:31 -0400399 return this;
Kevin Lubickf5ea37f2019-02-28 10:06:18 -0500400 }
401 return null;
402 };
Kevin Lubick217056c2018-09-20 17:39:31 -0400403
Kevin Lubickf5ea37f2019-02-28 10:06:18 -0500404 CanvasKit.SkPath.prototype.lineTo = function(x, y) {
405 this._lineTo(x, y);
406 return this;
407 };
Kevin Lubick217056c2018-09-20 17:39:31 -0400408
Kevin Lubickf5ea37f2019-02-28 10:06:18 -0500409 CanvasKit.SkPath.prototype.moveTo = function(x, y) {
410 this._moveTo(x, y);
411 return this;
412 };
Kevin Lubickb5ae3b52018-11-03 07:51:19 -0400413
Kevin Lubicke384df42019-08-26 15:48:09 -0400414 CanvasKit.SkPath.prototype.offset = function(dx, dy) {
415 this._transform(1, 0, dx,
416 0, 1, dy,
417 0, 0, 1);
418 return this;
419 };
420
Kevin Lubickf5ea37f2019-02-28 10:06:18 -0500421 CanvasKit.SkPath.prototype.quadTo = function(cpx, cpy, x, y) {
422 this._quadTo(cpx, cpy, x, y);
423 return this;
424 };
425
Kevin Lubick79b71342019-11-01 14:36:52 -0400426 CanvasKit.SkPath.prototype.rArcTo = function(rx, ry, xAxisRotate, useSmallArc, isCCW, dx, dy) {
427 this._rArcTo(rx, ry, xAxisRotate, useSmallArc, isCCW, dx, dy);
428 return this;
429 };
430
431 CanvasKit.SkPath.prototype.rConicTo = function(dx1, dy1, dx2, dy2, w) {
432 this._rConicTo(dx1, dy1, dx2, dy2, w);
433 return this;
434 };
435
436 // These params are all relative
437 CanvasKit.SkPath.prototype.rCubicTo = function(cp1x, cp1y, cp2x, cp2y, x, y) {
438 this._rCubicTo(cp1x, cp1y, cp2x, cp2y, x, y);
439 return this;
440 };
441
442 CanvasKit.SkPath.prototype.rLineTo = function(dx, dy) {
443 this._rLineTo(dx, dy);
444 return this;
445 };
446
447 CanvasKit.SkPath.prototype.rMoveTo = function(dx, dy) {
448 this._rMoveTo(dx, dy);
449 return this;
450 };
451
452 // These params are all relative
453 CanvasKit.SkPath.prototype.rQuadTo = function(cpx, cpy, x, y) {
454 this._rQuadTo(cpx, cpy, x, y);
455 return this;
456 };
457
Kevin Lubickf5ea37f2019-02-28 10:06:18 -0500458 CanvasKit.SkPath.prototype.stroke = function(opts) {
459 // Fill out any missing values with the default values.
460 /**
461 * See externs.js for this definition
462 * @type {StrokeOpts}
463 */
464 opts = opts || {};
465 opts.width = opts.width || 1;
466 opts.miter_limit = opts.miter_limit || 4;
467 opts.cap = opts.cap || CanvasKit.StrokeCap.Butt;
468 opts.join = opts.join || CanvasKit.StrokeJoin.Miter;
469 opts.precision = opts.precision || 1;
470 if (this._stroke(opts)) {
471 return this;
472 }
473 return null;
474 };
475
476 CanvasKit.SkPath.prototype.transform = function() {
477 // Takes 1 or 9 args
478 if (arguments.length === 1) {
479 // argument 1 should be a 6 or 9 element array.
480 var a = arguments[0];
481 this._transform(a[0], a[1], a[2],
482 a[3], a[4], a[5],
483 a[6] || 0, a[7] || 0, a[8] || 1);
484 } else if (arguments.length === 6 || arguments.length === 9) {
485 // these arguments are the 6 or 9 members of the matrix
486 var a = arguments;
487 this._transform(a[0], a[1], a[2],
488 a[3], a[4], a[5],
489 a[6] || 0, a[7] || 0, a[8] || 1);
490 } else {
491 throw 'transform expected to take 1 or 9 arguments. Got ' + arguments.length;
492 }
493 return this;
494 };
495 // isComplement is optional, defaults to false
496 CanvasKit.SkPath.prototype.trim = function(startT, stopT, isComplement) {
497 if (this._trim(startT, stopT, !!isComplement)) {
498 return this;
499 }
500 return null;
501 };
502
503 // bones should be a 3d array.
504 // Each bone is a 3x2 transformation matrix in column major order:
505 // | scaleX skewX transX |
506 // | skewY scaleY transY |
507 // and bones is an array of those matrices.
508 // Returns a copy of this (SkVertices) with the bones applied.
509 CanvasKit.SkVertices.prototype.applyBones = function(bones) {
510 var bPtr = copy3dArray(bones, CanvasKit.HEAPF32);
511 var vert = this._applyBones(bPtr, bones.length);
512 CanvasKit._free(bPtr);
513 return vert;
514 }
515
516 CanvasKit.SkImage.prototype.encodeToData = function() {
517 if (!arguments.length) {
518 return this._encodeToData();
Kevin Lubickb5ae3b52018-11-03 07:51:19 -0400519 }
Kevin Lubick53965c92018-10-11 08:51:55 -0400520
Kevin Lubickf5ea37f2019-02-28 10:06:18 -0500521 if (arguments.length === 2) {
522 var a = arguments;
523 return this._encodeToDataWithFormat(a[0], a[1]);
Alexander Khovansky3e119332018-11-15 02:01:19 +0300524 }
525
Kevin Lubickf5ea37f2019-02-28 10:06:18 -0500526 throw 'encodeToData expected to take 0 or 2 arguments. Got ' + arguments.length;
527 }
Kevin Lubick1ba9c4d2019-02-22 10:04:06 -0500528
Kevin Lubicka064c282019-04-04 09:28:53 -0400529 CanvasKit.SkImage.prototype.makeShader = function(xTileMode, yTileMode, localMatrix) {
530 if (localMatrix) {
531 // Add perspective args if not provided.
532 if (localMatrix.length === 6) {
533 localMatrix.push(0, 0, 1);
534 }
535 return this._makeShader(xTileMode, yTileMode, localMatrix);
536 } else {
537 return this._makeShader(xTileMode, yTileMode);
538 }
539 }
540
Kevin Lubickd6b32ed2019-05-06 13:04:03 -0400541 CanvasKit.SkImage.prototype.readPixels = function(imageInfo, srcX, srcY) {
542 var rowBytes;
543 switch (imageInfo.colorType){
544 case CanvasKit.ColorType.RGBA_8888:
545 rowBytes = imageInfo.width * 4; // 1 byte per channel == 4 bytes per pixel in 8888
546 break;
547 case CanvasKit.ColorType.RGBA_F32:
548 rowBytes = imageInfo.width * 16; // 4 bytes per channel == 16 bytes per pixel in F32
549 break;
550 default:
551 SkDebug("Colortype not yet supported");
552 return;
553 }
554 var pBytes = rowBytes * imageInfo.height;
555 var pPtr = CanvasKit._malloc(pBytes);
556
557 if (!this._readPixels(imageInfo, pPtr, rowBytes, srcX, srcY)) {
558 SkDebug("Could not read pixels with the given inputs");
559 return null;
560 }
561
562 // Put those pixels into a typed array of the right format and then
563 // make a copy with slice() that we can return.
564 var retVal = null;
565 switch (imageInfo.colorType){
566 case CanvasKit.ColorType.RGBA_8888:
567 retVal = new Uint8Array(CanvasKit.buffer, pPtr, pBytes).slice();
568 break;
569 case CanvasKit.ColorType.RGBA_F32:
570 retVal = new Float32Array(CanvasKit.buffer, pPtr, pBytes).slice();
571 break;
572 }
573
574 // Free the allocated pixels in the WASM memory
575 CanvasKit._free(pPtr);
576 return retVal;
577
578 }
579
Kevin Lubickee91c072019-03-29 10:39:52 -0400580 // atlas is an SkImage, e.g. from CanvasKit.MakeImageFromEncoded
581 // srcRects and dstXforms should be CanvasKit.SkRectBuilder and CanvasKit.RSXFormBuilder
582 // or just arrays of floats in groups of 4.
583 // colors, if provided, should be a CanvasKit.SkColorBuilder or array of SkColor
584 // (from CanvasKit.Color)
585 CanvasKit.SkCanvas.prototype.drawAtlas = function(atlas, srcRects, dstXforms, paint,
586 /*optional*/ blendMode, colors) {
587 if (!atlas || !paint || !srcRects || !dstXforms) {
588 SkDebug('Doing nothing since missing a required input');
589 return;
590 }
591 if (srcRects.length !== dstXforms.length || (colors && colors.length !== dstXforms.length)) {
592 SkDebug('Doing nothing since input arrays length mismatches');
593 }
594 if (!blendMode) {
595 blendMode = CanvasKit.BlendMode.SrcOver;
596 }
597
598 var srcRectPtr;
599 if (srcRects.build) {
600 srcRectPtr = srcRects.build();
601 } else {
602 srcRectPtr = copy1dArray(srcRects, CanvasKit.HEAPF32);
603 }
604
605 var dstXformPtr;
606 if (dstXforms.build) {
607 dstXformPtr = dstXforms.build();
608 } else {
609 dstXformPtr = copy1dArray(dstXforms, CanvasKit.HEAPF32);
610 }
611
612 var colorPtr = 0; // enscriptem doesn't like undefined for nullptr
613 if (colors) {
614 if (colors.build) {
615 colorPtr = colors.build();
616 } else {
617 colorPtr = copy1dArray(colors, CanvasKit.HEAPU32);
618 }
619 }
620
621 this._drawAtlas(atlas, dstXformPtr, srcRectPtr, colorPtr, dstXforms.length,
622 blendMode, paint);
623
624 if (srcRectPtr && !srcRects.build) {
625 CanvasKit._free(srcRectPtr);
626 }
627 if (dstXformPtr && !dstXforms.build) {
628 CanvasKit._free(dstXformPtr);
629 }
630 if (colorPtr && !colors.build) {
631 CanvasKit._free(colorPtr);
632 }
633
634 }
635
Kevin Lubick37ab53e2019-11-11 10:06:08 -0500636 // points is either an array of [x, y] where x and y are numbers or
637 // a typed array from Malloc where the even indices will be treated
638 // as x coordinates and the odd indices will be treated as y coordinates.
639 CanvasKit.SkCanvas.prototype.drawPoints = function(mode, points, paint) {
640 var ptr;
641 var n;
642 // This was created with CanvasKit.Malloc, so assume the user has
643 // already been filled with data.
644 if (points['_ck']) {
645 ptr = points.byteOffset;
646 n = points.length/2;
647 } else {
648 ptr = copy2dArray(points, CanvasKit.HEAPF32);
649 n = points.length;
650 }
651 this._drawPoints(mode, ptr, n, paint);
652 CanvasKit._free(ptr);
653 }
654
Kevin Lubickf5ea37f2019-02-28 10:06:18 -0500655 // returns Uint8Array
656 CanvasKit.SkCanvas.prototype.readPixels = function(x, y, w, h, alphaType,
657 colorType, dstRowBytes) {
658 // supply defaults (which are compatible with HTMLCanvas's getImageData)
659 alphaType = alphaType || CanvasKit.AlphaType.Unpremul;
660 colorType = colorType || CanvasKit.ColorType.RGBA_8888;
661 dstRowBytes = dstRowBytes || (4 * w);
662
663 var len = h * dstRowBytes
664 var pptr = CanvasKit._malloc(len);
665 var ok = this._readPixels({
666 'width': w,
667 'height': h,
Kevin Lubick52b9f372018-12-04 13:57:36 -0500668 'colorType': colorType,
Kevin Lubickf5ea37f2019-02-28 10:06:18 -0500669 'alphaType': alphaType,
670 }, pptr, dstRowBytes, x, y);
671 if (!ok) {
672 CanvasKit._free(pptr);
673 return null;
674 }
675
676 // The first typed array is just a view into memory. Because we will
677 // be free-ing that, we call slice to make a persistent copy.
Kevin Lubickfa5a1382019-10-09 10:46:14 -0400678 var pixels = new Uint8Array(CanvasKit.buffer, pptr, len).slice();
Kevin Lubickf5ea37f2019-02-28 10:06:18 -0500679 CanvasKit._free(pptr);
680 return pixels;
681 }
682
683 // pixels is a TypedArray. No matter the input size, it will be treated as
684 // a Uint8Array (essentially, a byte array).
685 CanvasKit.SkCanvas.prototype.writePixels = function(pixels, srcWidth, srcHeight,
686 destX, destY, alphaType, colorType) {
687 if (pixels.byteLength % (srcWidth * srcHeight)) {
688 throw 'pixels length must be a multiple of the srcWidth * srcHeight';
689 }
690 var bytesPerPixel = pixels.byteLength / (srcWidth * srcHeight);
691 // supply defaults (which are compatible with HTMLCanvas's putImageData)
692 alphaType = alphaType || CanvasKit.AlphaType.Unpremul;
693 colorType = colorType || CanvasKit.ColorType.RGBA_8888;
694 var srcRowBytes = bytesPerPixel * srcWidth;
695
Kevin Lubick52b9f372018-12-04 13:57:36 -0500696 var pptr = CanvasKit._malloc(pixels.byteLength);
697 CanvasKit.HEAPU8.set(pixels, pptr);
Kevin Lubick52b9f372018-12-04 13:57:36 -0500698
Kevin Lubickf5ea37f2019-02-28 10:06:18 -0500699 var ok = this._writePixels({
700 'width': srcWidth,
701 'height': srcHeight,
702 'colorType': colorType,
703 'alphaType': alphaType,
704 }, pptr, srcRowBytes, destX, destY);
705
706 CanvasKit._free(pptr);
707 return ok;
Kevin Lubick52b9f372018-12-04 13:57:36 -0500708 }
709
Kevin Lubickd3729342019-09-12 11:11:25 -0400710 // colorMatrix is an SkColorMatrix (e.g. Float32Array of length 20)
711 CanvasKit.SkColorFilter.MakeMatrix = function(colorMatrix) {
712 if (!colorMatrix || colorMatrix.length !== 20) {
713 SkDebug('ignoring invalid color matrix');
714 return;
715 }
716 var fptr = copy1dArray(colorMatrix, CanvasKit.HEAPF32);
717 // We know skia memcopies the floats, so we can free our memory after the call returns.
718 var m = CanvasKit.SkColorFilter._makeMatrix(fptr);
719 CanvasKit._free(fptr);
720 return m;
721 }
722
Kevin Lubick62836902019-12-09 09:04:26 -0500723 CanvasKit.SkShader.Blend = function(mode, dst, src, localMatrix) {
724 if (!localMatrix) {
725 return this._Blend(mode, dst, src);
726 }
727 return this._Blend(mode, dst, src, localMatrix);
728 }
729
730 CanvasKit.SkShader.Lerp = function(t, dst, src, localMatrix) {
731 if (!localMatrix) {
732 return this._Lerp(t, dst, src);
733 }
734 return this._Lerp(t, dst, src, localMatrix);
735 }
736
Kevin Lubickcc13fd32019-04-05 13:00:01 -0400737 CanvasKit.SkSurface.prototype.captureFrameAsSkPicture = function(drawFrame) {
738 // Set up SkPictureRecorder
739 var spr = new CanvasKit.SkPictureRecorder();
740 var canvas = spr.beginRecording(
741 CanvasKit.LTRBRect(0, 0, this.width(), this.height()));
742 drawFrame(canvas);
743 var pic = spr.finishRecordingAsPicture();
744 spr.delete();
745 // TODO: do we need to clean up the memory for canvas?
746 // If we delete it here, saveAsFile doesn't work correctly.
747 return pic;
748 }
749
Kevin Lubick359a7e32019-03-19 09:34:37 -0400750 CanvasKit.SkSurface.prototype.requestAnimationFrame = function(callback, dirtyRect) {
751 if (!this._cached_canvas) {
752 this._cached_canvas = this.getCanvas();
753 }
754 window.requestAnimationFrame(function() {
Kevin Lubick39026282019-03-28 12:46:40 -0400755 if (this._context !== undefined) {
756 CanvasKit.setCurrentContext(this._context);
757 }
Kevin Lubick359a7e32019-03-19 09:34:37 -0400758
759 callback(this._cached_canvas);
760
761 this.flush();
762 }.bind(this));
763 }
764
Kevin Lubickf5ea37f2019-02-28 10:06:18 -0500765 // Run through the JS files that are added at compile time.
766 if (CanvasKit._extraInitializations) {
767 CanvasKit._extraInitializations.forEach(function(init) {
768 init();
769 });
Kevin Lubickeb2f6b02018-11-29 15:07:02 -0500770 }
Kevin Lubickf5ea37f2019-02-28 10:06:18 -0500771}; // end CanvasKit.onRuntimeInitialized, that is, anything changing prototypes or dynamic.
Kevin Lubickeb2f6b02018-11-29 15:07:02 -0500772
Kevin Lubickf5ea37f2019-02-28 10:06:18 -0500773CanvasKit.LTRBRect = function(l, t, r, b) {
774 return {
775 fLeft: l,
776 fTop: t,
777 fRight: r,
778 fBottom: b,
779 };
Kevin Lubick1a05fce2018-11-20 12:51:16 -0500780}
781
Kevin Lubickf5ea37f2019-02-28 10:06:18 -0500782CanvasKit.XYWHRect = function(x, y, w, h) {
783 return {
784 fLeft: x,
785 fTop: y,
786 fRight: x+w,
787 fBottom: y+h,
788 };
Kevin Lubick1a05fce2018-11-20 12:51:16 -0500789}
790
Kevin Lubick7d644e12019-09-11 14:22:22 -0400791// RRectXY returns an RRect with the given rect and a radiusX and radiusY for
792// all 4 corners.
793CanvasKit.RRectXY = function(rect, rx, ry) {
794 return {
795 rect: rect,
796 rx1: rx,
797 ry1: ry,
798 rx2: rx,
799 ry2: ry,
800 rx3: rx,
801 ry3: ry,
802 rx4: rx,
803 ry4: ry,
804 };
805}
806
Kevin Lubickf5ea37f2019-02-28 10:06:18 -0500807CanvasKit.MakePathFromCmds = function(cmds) {
808 var ptrLen = loadCmdsTypedArray(cmds);
809 var path = CanvasKit._MakePathFromCmds(ptrLen[0], ptrLen[1]);
810 CanvasKit._free(ptrLen[0]);
811 return path;
812}
813
814CanvasKit.MakeSkDashPathEffect = function(intervals, phase) {
815 if (!phase) {
816 phase = 0;
817 }
818 if (!intervals.length || intervals.length % 2 === 1) {
819 throw 'Intervals array must have even length';
820 }
821 var ptr = copy1dArray(intervals, CanvasKit.HEAPF32);
822 var dpe = CanvasKit._MakeSkDashPathEffect(ptr, intervals.length, phase);
823 CanvasKit._free(ptr);
824 return dpe;
825}
826
827// data is a TypedArray or ArrayBuffer e.g. from fetch().then(resp.arrayBuffer())
Kevin Lubick6b921b72019-09-18 16:18:17 -0400828CanvasKit.MakeAnimatedImageFromEncoded = function(data) {
829 data = new Uint8Array(data);
830
831 var iptr = CanvasKit._malloc(data.byteLength);
832 CanvasKit.HEAPU8.set(data, iptr);
833 var img = CanvasKit._decodeAnimatedImage(iptr, data.byteLength);
834 if (!img) {
835 SkDebug('Could not decode animated image');
836 return null;
837 }
838 return img;
839}
840
841// data is a TypedArray or ArrayBuffer e.g. from fetch().then(resp.arrayBuffer())
Kevin Lubickf5ea37f2019-02-28 10:06:18 -0500842CanvasKit.MakeImageFromEncoded = function(data) {
843 data = new Uint8Array(data);
844
845 var iptr = CanvasKit._malloc(data.byteLength);
846 CanvasKit.HEAPU8.set(data, iptr);
847 var img = CanvasKit._decodeImage(iptr, data.byteLength);
848 if (!img) {
849 SkDebug('Could not decode image');
Kevin Lubickf5ea37f2019-02-28 10:06:18 -0500850 return null;
851 }
Kevin Lubickf5ea37f2019-02-28 10:06:18 -0500852 return img;
853}
854
Kevin Lubickeda0b432019-12-02 08:26:48 -0500855// pixels must be a Uint8Array with bytes representing the pixel values
856// (e.g. each set of 4 bytes could represent RGBA values for a single pixel).
Kevin Lubickf5ea37f2019-02-28 10:06:18 -0500857CanvasKit.MakeImage = function(pixels, width, height, alphaType, colorType) {
Kevin Lubickeda0b432019-12-02 08:26:48 -0500858 var bytesPerPixel = pixels.length / (width * height);
Kevin Lubickf5ea37f2019-02-28 10:06:18 -0500859 var info = {
860 'width': width,
861 'height': height,
862 'alphaType': alphaType,
863 'colorType': colorType,
864 };
Kevin Lubickeda0b432019-12-02 08:26:48 -0500865 var pptr = copy1dArray(pixels, CanvasKit.HEAPU8);
866 // No need to _free pptr, Image takes it with SkData::MakeFromMalloc
Kevin Lubickf5ea37f2019-02-28 10:06:18 -0500867
Kevin Lubickeda0b432019-12-02 08:26:48 -0500868 return CanvasKit._MakeImage(info, pptr, pixels.length, width * bytesPerPixel);
Kevin Lubickf5ea37f2019-02-28 10:06:18 -0500869}
870
871CanvasKit.MakeLinearGradientShader = function(start, end, colors, pos, mode, localMatrix, flags) {
Kevin Lubickee91c072019-03-29 10:39:52 -0400872 var colorPtr = copy1dArray(colors, CanvasKit.HEAPU32);
Kevin Lubickf5ea37f2019-02-28 10:06:18 -0500873 var posPtr = copy1dArray(pos, CanvasKit.HEAPF32);
874 flags = flags || 0;
875
876 if (localMatrix) {
877 // Add perspective args if not provided.
878 if (localMatrix.length === 6) {
879 localMatrix.push(0, 0, 1);
880 }
881 var lgs = CanvasKit._MakeLinearGradientShader(start, end, colorPtr, posPtr,
882 colors.length, mode, flags, localMatrix);
883 } else {
884 var lgs = CanvasKit._MakeLinearGradientShader(start, end, colorPtr, posPtr,
885 colors.length, mode, flags);
886 }
887
888 CanvasKit._free(colorPtr);
889 CanvasKit._free(posPtr);
890 return lgs;
891}
892
893CanvasKit.MakeRadialGradientShader = function(center, radius, colors, pos, mode, localMatrix, flags) {
Kevin Lubickee91c072019-03-29 10:39:52 -0400894 var colorPtr = copy1dArray(colors, CanvasKit.HEAPU32);
Kevin Lubickf5ea37f2019-02-28 10:06:18 -0500895 var posPtr = copy1dArray(pos, CanvasKit.HEAPF32);
896 flags = flags || 0;
897
898 if (localMatrix) {
899 // Add perspective args if not provided.
900 if (localMatrix.length === 6) {
901 localMatrix.push(0, 0, 1);
902 }
903 var rgs = CanvasKit._MakeRadialGradientShader(center, radius, colorPtr, posPtr,
904 colors.length, mode, flags, localMatrix);
905 } else {
906 var rgs = CanvasKit._MakeRadialGradientShader(center, radius, colorPtr, posPtr,
907 colors.length, mode, flags);
908 }
909
910 CanvasKit._free(colorPtr);
911 CanvasKit._free(posPtr);
912 return rgs;
913}
914
915CanvasKit.MakeTwoPointConicalGradientShader = function(start, startRadius, end, endRadius,
916 colors, pos, mode, localMatrix, flags) {
Kevin Lubickee91c072019-03-29 10:39:52 -0400917 var colorPtr = copy1dArray(colors, CanvasKit.HEAPU32);
Kevin Lubickf5ea37f2019-02-28 10:06:18 -0500918 var posPtr = copy1dArray(pos, CanvasKit.HEAPF32);
919 flags = flags || 0;
920
921 if (localMatrix) {
922 // Add perspective args if not provided.
923 if (localMatrix.length === 6) {
924 localMatrix.push(0, 0, 1);
925 }
926 var rgs = CanvasKit._MakeTwoPointConicalGradientShader(
927 start, startRadius, end, endRadius,
928 colorPtr, posPtr, colors.length, mode, flags, localMatrix);
929 } else {
930 var rgs = CanvasKit._MakeTwoPointConicalGradientShader(
931 start, startRadius, end, endRadius,
932 colorPtr, posPtr, colors.length, mode, flags);
933 }
934
935 CanvasKit._free(colorPtr);
936 CanvasKit._free(posPtr);
937 return rgs;
938}
939
940CanvasKit.MakeSkVertices = function(mode, positions, textureCoordinates, colors,
Kevin Lubickb3574c92019-03-06 08:25:36 -0500941 boneIndices, boneWeights, indices, isVolatile) {
Kevin Lubickb3574c92019-03-06 08:25:36 -0500942 // Default isVolitile to true if not set
943 isVolatile = isVolatile === undefined ? true : isVolatile;
Kevin Lubickd6ba7252019-06-03 14:38:05 -0400944 var idxCount = (indices && indices.length) || 0;
945
946 var flags = 0;
947 // These flags are from SkVertices.h and should be kept in sync with those.
948 if (textureCoordinates && textureCoordinates.length) {
949 flags |= (1 << 0);
950 }
951 if (colors && colors.length) {
952 flags |= (1 << 1);
953 }
954 if (boneIndices && boneIndices.length) {
955 flags |= (1 << 2);
956 }
957 if (!isVolatile) {
958 flags |= (1 << 3);
959 }
960
961 var builder = new CanvasKit._SkVerticesBuilder(mode, positions.length, idxCount, flags);
962
963 copy2dArray(positions, CanvasKit.HEAPF32, builder.positions());
964 if (builder.texCoords()) {
965 copy2dArray(textureCoordinates, CanvasKit.HEAPF32, builder.texCoords());
966 }
967 if (builder.colors()) {
968 copy1dArray(colors, CanvasKit.HEAPU32, builder.colors());
969 }
970 if (builder.boneIndices()) {
971 copy2dArray(boneIndices, CanvasKit.HEAP32, builder.boneIndices());
972 }
973 if (builder.boneWeights()) {
974 copy2dArray(boneWeights, CanvasKit.HEAPF32, builder.boneWeights());
975 }
976 if (builder.indices()) {
977 copy1dArray(indices, CanvasKit.HEAPU16, builder.indices());
978 }
Kevin Lubickb3574c92019-03-06 08:25:36 -0500979
Kevin Lubickf5ea37f2019-02-28 10:06:18 -0500980 var idxCount = (indices && indices.length) || 0;
Kevin Lubickd6ba7252019-06-03 14:38:05 -0400981 // Create the vertices, which owns the memory that the builder had allocated.
982 return builder.detach();
Kevin Lubicka4f218d2020-01-14 08:39:09 -0500983};