Kevin Lubick | 217056c | 2018-09-20 17:39:31 -0400 | [diff] [blame] | 1 | // 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 Lubick | b5ae3b5 | 2018-11-03 07:51:19 -0400 | [diff] [blame] | 4 | (function(CanvasKit) { |
Kevin Lubick | 217056c | 2018-09-20 17:39:31 -0400 | [diff] [blame] | 5 | // 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. |
| 8 | CanvasKit.onRuntimeInitialized = function() { |
| 9 | // All calls to 'this' need to go in externs.js so closure doesn't minify them away. |
Kevin Lubick | 1a05fce | 2018-11-20 12:51:16 -0500 | [diff] [blame] | 10 | |
| 11 | |
| 12 | // Add some helpers for matrices. This is ported from SkMatrix.cpp |
| 13 | // to save complexity and overhead of going back and forth between |
| 14 | // C++ and JS layers. |
Kevin Lubick | ae9dfc0 | 2018-12-06 10:14:10 -0500 | [diff] [blame] | 15 | // I would have liked to use something like DOMMatrix, except it |
| 16 | // isn't widely supported (would need polyfills) and it doesn't |
| 17 | // have a mapPoints() function (which could maybe be tacked on here). |
| 18 | // If DOMMatrix catches on, it would be worth re-considering this usage. |
Kevin Lubick | 1a05fce | 2018-11-20 12:51:16 -0500 | [diff] [blame] | 19 | CanvasKit.SkMatrix = {}; |
| 20 | function sdot(a, b, c, d, e, f) { |
| 21 | e = e || 0; |
| 22 | f = f || 0; |
| 23 | return a * b + c * d + e * f; |
| 24 | } |
| 25 | |
Kevin Lubick | b9db390 | 2018-11-26 11:47:54 -0500 | [diff] [blame] | 26 | CanvasKit.SkMatrix.identity = function() { |
| 27 | return [ |
| 28 | 1, 0, 0, |
| 29 | 0, 1, 0, |
| 30 | 0, 0, 1, |
| 31 | ]; |
| 32 | }; |
| 33 | |
Kevin Lubick | ae9dfc0 | 2018-12-06 10:14:10 -0500 | [diff] [blame] | 34 | // Return the inverse (if it exists) of this matrix. |
| 35 | // Otherwise, return the identity. |
| 36 | CanvasKit.SkMatrix.invert = function(m) { |
| 37 | var det = m[0]*m[4]*m[8] + m[1]*m[5]*m[6] + m[2]*m[3]*m[7] |
| 38 | - m[2]*m[4]*m[6] - m[1]*m[3]*m[8] - m[0]*m[5]*m[7]; |
| 39 | if (!det) { |
| 40 | SkDebug('Warning, uninvertible matrix'); |
| 41 | return CanvasKit.SkMatrix.identity(); |
| 42 | } |
| 43 | return [ |
| 44 | (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, |
| 45 | (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, |
| 46 | (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, |
| 47 | ]; |
| 48 | }; |
| 49 | |
Kevin Lubick | b9db390 | 2018-11-26 11:47:54 -0500 | [diff] [blame] | 50 | // Maps the given points according to the passed in matrix. |
| 51 | // Results are done in place. |
| 52 | // See SkMatrix.h::mapPoints for the docs on the math. |
| 53 | CanvasKit.SkMatrix.mapPoints = function(matrix, ptArr) { |
| 54 | if (ptArr.length % 2) { |
| 55 | throw 'mapPoints requires an even length arr'; |
| 56 | } |
| 57 | for (var i = 0; i < ptArr.length; i+=2) { |
| 58 | var x = ptArr[i], y = ptArr[i+1]; |
| 59 | // Gx+Hy+I |
| 60 | var denom = matrix[6]*x + matrix[7]*y + matrix[8]; |
| 61 | // Ax+By+C |
| 62 | var xTrans = matrix[0]*x + matrix[1]*y + matrix[2]; |
| 63 | // Dx+Ey+F |
| 64 | var yTrans = matrix[3]*x + matrix[4]*y + matrix[5]; |
| 65 | ptArr[i] = xTrans/denom; |
| 66 | ptArr[i+1] = yTrans/denom; |
| 67 | } |
| 68 | return ptArr; |
| 69 | }; |
| 70 | |
| 71 | CanvasKit.SkMatrix.multiply = function(m1, m2) { |
| 72 | var result = [0,0,0, 0,0,0, 0,0,0]; |
| 73 | for (var r = 0; r < 3; r++) { |
| 74 | for (var c = 0; c < 3; c++) { |
| 75 | // m1 and m2 are 1D arrays pretending to be 2D arrays |
| 76 | result[3*r + c] = sdot(m1[3*r + 0], m2[3*0 + c], |
| 77 | m1[3*r + 1], m2[3*1 + c], |
| 78 | m1[3*r + 2], m2[3*2 + c]); |
| 79 | } |
| 80 | } |
| 81 | return result; |
| 82 | } |
| 83 | |
| 84 | // Return a matrix representing a rotation by n radians. |
Kevin Lubick | 1a05fce | 2018-11-20 12:51:16 -0500 | [diff] [blame] | 85 | // px, py optionally say which point the rotation should be around |
| 86 | // with the default being (0, 0); |
Kevin Lubick | b9db390 | 2018-11-26 11:47:54 -0500 | [diff] [blame] | 87 | CanvasKit.SkMatrix.rotated = function(radians, px, py) { |
Kevin Lubick | 1a05fce | 2018-11-20 12:51:16 -0500 | [diff] [blame] | 88 | px = px || 0; |
| 89 | py = py || 0; |
Kevin Lubick | b9db390 | 2018-11-26 11:47:54 -0500 | [diff] [blame] | 90 | var sinV = Math.sin(radians); |
| 91 | var cosV = Math.cos(radians); |
Kevin Lubick | 1a05fce | 2018-11-20 12:51:16 -0500 | [diff] [blame] | 92 | return [ |
| 93 | cosV, -sinV, sdot( sinV, py, 1 - cosV, px), |
| 94 | sinV, cosV, sdot(-sinV, px, 1 - cosV, py), |
| 95 | 0, 0, 1, |
| 96 | ]; |
| 97 | }; |
Kevin Lubick | 1a05fce | 2018-11-20 12:51:16 -0500 | [diff] [blame] | 98 | |
Kevin Lubick | b9db390 | 2018-11-26 11:47:54 -0500 | [diff] [blame] | 99 | CanvasKit.SkMatrix.scaled = function(sx, sy, px, py) { |
| 100 | px = px || 0; |
| 101 | py = py || 0; |
| 102 | return [ |
| 103 | sx, 0, px - sx * px, |
| 104 | 0, sy, py - sy * py, |
| 105 | 0, 0, 1, |
| 106 | ]; |
| 107 | }; |
| 108 | |
| 109 | CanvasKit.SkMatrix.skewed = function(kx, ky, px, py) { |
| 110 | px = px || 0; |
| 111 | py = py || 0; |
| 112 | return [ |
| 113 | 1, kx, -kx * px, |
| 114 | ky, 1, -ky * py, |
| 115 | 0, 0, 1, |
| 116 | ]; |
| 117 | }; |
| 118 | |
| 119 | CanvasKit.SkMatrix.translated = function(dx, dy) { |
| 120 | return [ |
| 121 | 1, 0, dx, |
| 122 | 0, 1, dy, |
| 123 | 0, 0, 1, |
| 124 | ]; |
| 125 | }; |
Kevin Lubick | 1a05fce | 2018-11-20 12:51:16 -0500 | [diff] [blame] | 126 | |
| 127 | CanvasKit.SkPath.prototype.addArc = function(oval, startAngle, sweepAngle) { |
| 128 | // see arc() for the HTMLCanvas version |
| 129 | // note input angles are degrees. |
| 130 | this._addArc(oval, startAngle, sweepAngle); |
| 131 | return this; |
| 132 | }; |
| 133 | |
Kevin Lubick | 217056c | 2018-09-20 17:39:31 -0400 | [diff] [blame] | 134 | CanvasKit.SkPath.prototype.addPath = function() { |
Kevin Lubick | 1a05fce | 2018-11-20 12:51:16 -0500 | [diff] [blame] | 135 | // Takes 1, 2, 7, or 10 required args, where the first arg is always the path. |
| 136 | // The last arg is optional and chooses between add or extend mode. |
Kevin Lubick | 217056c | 2018-09-20 17:39:31 -0400 | [diff] [blame] | 137 | // The options for the remaining args are: |
Kevin Lubick | 1a05fce | 2018-11-20 12:51:16 -0500 | [diff] [blame] | 138 | // - an array of 6 or 9 parameters (perspective is optional) |
| 139 | // - the 9 parameters of a full matrix or |
Kevin Lubick | b5ae3b5 | 2018-11-03 07:51:19 -0400 | [diff] [blame] | 140 | // the 6 non-perspective params of a matrix. |
Kevin Lubick | 1a05fce | 2018-11-20 12:51:16 -0500 | [diff] [blame] | 141 | var args = Array.prototype.slice.call(arguments); |
| 142 | var path = args[0]; |
| 143 | var extend = false; |
| 144 | if (typeof args[args.length-1] === "boolean") { |
| 145 | extend = args.pop(); |
| 146 | } |
| 147 | if (args.length === 1) { |
| 148 | // Add path, unchanged. Use identity matrix |
| 149 | this._addPath(path, 1, 0, 0, |
| 150 | 0, 1, 0, |
| 151 | 0, 0, 1, |
| 152 | extend); |
| 153 | } else if (args.length === 2) { |
Kevin Lubick | 217056c | 2018-09-20 17:39:31 -0400 | [diff] [blame] | 154 | // User provided the 9 params of a full matrix as an array. |
Kevin Lubick | 1a05fce | 2018-11-20 12:51:16 -0500 | [diff] [blame] | 155 | var a = args[1]; |
| 156 | this._addPath(path, a[0], a[1], a[2], |
| 157 | a[3], a[4], a[5], |
| 158 | a[6] || 0, a[7] || 0, a[8] || 1, |
| 159 | extend); |
| 160 | } else if (args.length === 7 || args.length === 10) { |
Kevin Lubick | 217056c | 2018-09-20 17:39:31 -0400 | [diff] [blame] | 161 | // User provided the 9 params of a (full) matrix directly. |
Kevin Lubick | b5ae3b5 | 2018-11-03 07:51:19 -0400 | [diff] [blame] | 162 | // (or just the 6 non perspective ones) |
Kevin Lubick | 217056c | 2018-09-20 17:39:31 -0400 | [diff] [blame] | 163 | // These are in the same order as what Skia expects. |
Kevin Lubick | 1a05fce | 2018-11-20 12:51:16 -0500 | [diff] [blame] | 164 | var a = args; |
| 165 | this._addPath(path, a[1], a[2], a[3], |
| 166 | a[4], a[5], a[6], |
| 167 | a[7] || 0, a[8] || 0, a[9] || 1, |
| 168 | extend); |
Kevin Lubick | 217056c | 2018-09-20 17:39:31 -0400 | [diff] [blame] | 169 | } else { |
Kevin Lubick | 6fccc9d | 2018-11-20 15:55:10 -0500 | [diff] [blame] | 170 | SkDebug('addPath expected to take 1, 2, 7, or 10 required args. Got ' + args.length); |
Kevin Lubick | 1a05fce | 2018-11-20 12:51:16 -0500 | [diff] [blame] | 171 | return null; |
| 172 | } |
| 173 | return this; |
| 174 | }; |
| 175 | |
| 176 | CanvasKit.SkPath.prototype.addRect = function() { |
| 177 | // Takes 1, 2, 4 or 5 args |
| 178 | // - SkRect |
| 179 | // - SkRect, isCCW |
| 180 | // - left, top, right, bottom |
| 181 | // - left, top, right, bottom, isCCW |
| 182 | if (arguments.length === 1 || arguments.length === 2) { |
| 183 | var r = arguments[0]; |
| 184 | var ccw = arguments[1] || false; |
| 185 | this._addRect(r.fLeft, r.fTop, r.fRight, r.fBottom, ccw); |
| 186 | } else if (arguments.length === 4 || arguments.length === 5) { |
| 187 | var a = arguments; |
| 188 | this._addRect(a[0], a[1], a[2], a[3], a[4] || false); |
| 189 | } else { |
Kevin Lubick | 6fccc9d | 2018-11-20 15:55:10 -0500 | [diff] [blame] | 190 | SkDebug('addRect expected to take 1, 2, 4, or 5 args. Got ' + arguments.length); |
Kevin Lubick | 217056c | 2018-09-20 17:39:31 -0400 | [diff] [blame] | 191 | return null; |
| 192 | } |
| 193 | return this; |
| 194 | }; |
| 195 | |
Alexander Khovansky | 3e11933 | 2018-11-15 02:01:19 +0300 | [diff] [blame] | 196 | CanvasKit.SkPath.prototype.arc = function(x, y, radius, startAngle, endAngle, ccw) { |
Kevin Lubick | 1a05fce | 2018-11-20 12:51:16 -0500 | [diff] [blame] | 197 | // emulates the HTMLCanvas behavior. See addArc() for the SkPath version. |
| 198 | // Note input angles are radians. |
| 199 | var bounds = CanvasKit.LTRBRect(x-radius, y-radius, x+radius, y+radius); |
| 200 | var sweep = radiansToDegrees(endAngle - startAngle) - (360 * !!ccw); |
| 201 | var temp = new CanvasKit.SkPath(); |
| 202 | temp.addArc(bounds, radiansToDegrees(startAngle), sweep); |
| 203 | this.addPath(temp, true); |
| 204 | temp.delete(); |
Alexander Khovansky | 3e11933 | 2018-11-15 02:01:19 +0300 | [diff] [blame] | 205 | return this; |
| 206 | }; |
| 207 | |
Kevin Lubick | 1646e7d | 2018-12-07 13:03:08 -0500 | [diff] [blame] | 208 | CanvasKit.SkPath.prototype.arcTo = function() { |
| 209 | // takes 4, 5 or 7 args |
| 210 | // - 5 x1, y1, x2, y2, radius |
| 211 | // - 4 oval (as Rect), startAngle, sweepAngle, forceMoveTo |
| 212 | // - 7 x1, y1, x2, y2, startAngle, sweepAngle, forceMoveTo |
| 213 | var args = arguments; |
| 214 | if (args.length === 5) { |
| 215 | this._arcTo(args[0], args[1], args[2], args[3], args[4]); |
| 216 | } else if (args.length === 4) { |
| 217 | this._arcTo(args[0], args[1], args[2], args[3]); |
| 218 | } else if (args.length === 7) { |
| 219 | this._arcTo(CanvasKit.LTRBRect(args[0], args[1], args[2], args[3]), |
| 220 | args[4], args[5], args[6]); |
| 221 | } else { |
| 222 | throw 'Invalid args for arcTo. Expected 4, 5, or 7, got '+ args.length; |
| 223 | } |
| 224 | |
Kevin Lubick | 217056c | 2018-09-20 17:39:31 -0400 | [diff] [blame] | 225 | return this; |
| 226 | }; |
| 227 | |
| 228 | CanvasKit.SkPath.prototype.close = function() { |
| 229 | this._close(); |
| 230 | return this; |
| 231 | }; |
| 232 | |
| 233 | CanvasKit.SkPath.prototype.conicTo = function(x1, y1, x2, y2, w) { |
| 234 | this._conicTo(x1, y1, x2, y2, w); |
| 235 | return this; |
| 236 | }; |
| 237 | |
| 238 | CanvasKit.SkPath.prototype.cubicTo = function(cp1x, cp1y, cp2x, cp2y, x, y) { |
| 239 | this._cubicTo(cp1x, cp1y, cp2x, cp2y, x, y); |
| 240 | return this; |
| 241 | }; |
| 242 | |
Kevin Lubick | b5ae3b5 | 2018-11-03 07:51:19 -0400 | [diff] [blame] | 243 | CanvasKit.SkPath.prototype.dash = function(on, off, phase) { |
| 244 | if (this._dash(on, off, phase)) { |
| 245 | return this; |
| 246 | } |
| 247 | return null; |
| 248 | }; |
| 249 | |
Kevin Lubick | 217056c | 2018-09-20 17:39:31 -0400 | [diff] [blame] | 250 | CanvasKit.SkPath.prototype.lineTo = function(x, y) { |
| 251 | this._lineTo(x, y); |
| 252 | return this; |
| 253 | }; |
| 254 | |
| 255 | CanvasKit.SkPath.prototype.moveTo = function(x, y) { |
| 256 | this._moveTo(x, y); |
| 257 | return this; |
| 258 | }; |
| 259 | |
| 260 | CanvasKit.SkPath.prototype.op = function(otherPath, op) { |
| 261 | if (this._op(otherPath, op)) { |
| 262 | return this; |
| 263 | } |
| 264 | return null; |
| 265 | }; |
| 266 | |
| 267 | CanvasKit.SkPath.prototype.quadTo = function(cpx, cpy, x, y) { |
| 268 | this._quadTo(cpx, cpy, x, y); |
| 269 | return this; |
| 270 | }; |
| 271 | |
| 272 | CanvasKit.SkPath.prototype.simplify = function() { |
| 273 | if (this._simplify()) { |
| 274 | return this; |
| 275 | } |
| 276 | return null; |
| 277 | }; |
| 278 | |
Kevin Lubick | b5ae3b5 | 2018-11-03 07:51:19 -0400 | [diff] [blame] | 279 | CanvasKit.SkPath.prototype.stroke = function(opts) { |
| 280 | // Fill out any missing values with the default values. |
| 281 | /** |
| 282 | * See externs.js for this definition |
| 283 | * @type {StrokeOpts} |
| 284 | */ |
| 285 | opts = opts || {}; |
| 286 | opts.width = opts.width || 1; |
| 287 | opts.miter_limit = opts.miter_limit || 4; |
Kevin Lubick | b9db390 | 2018-11-26 11:47:54 -0500 | [diff] [blame] | 288 | opts.cap = opts.cap || CanvasKit.StrokeCap.Butt; |
| 289 | opts.join = opts.join || CanvasKit.StrokeJoin.Miter; |
Kevin Lubick | 1646e7d | 2018-12-07 13:03:08 -0500 | [diff] [blame] | 290 | opts.precision = opts.precision || 1; |
Kevin Lubick | b5ae3b5 | 2018-11-03 07:51:19 -0400 | [diff] [blame] | 291 | if (this._stroke(opts)) { |
| 292 | return this; |
| 293 | } |
| 294 | return null; |
| 295 | }; |
| 296 | |
Kevin Lubick | 217056c | 2018-09-20 17:39:31 -0400 | [diff] [blame] | 297 | CanvasKit.SkPath.prototype.transform = function() { |
| 298 | // Takes 1 or 9 args |
| 299 | if (arguments.length === 1) { |
Kevin Lubick | b5ae3b5 | 2018-11-03 07:51:19 -0400 | [diff] [blame] | 300 | // argument 1 should be a 6 or 9 element array. |
Kevin Lubick | 217056c | 2018-09-20 17:39:31 -0400 | [diff] [blame] | 301 | var a = arguments[0]; |
| 302 | this._transform(a[0], a[1], a[2], |
| 303 | a[3], a[4], a[5], |
Kevin Lubick | b5ae3b5 | 2018-11-03 07:51:19 -0400 | [diff] [blame] | 304 | a[6] || 0, a[7] || 0, a[8] || 1); |
| 305 | } else if (arguments.length === 6 || arguments.length === 9) { |
| 306 | // these arguments are the 6 or 9 members of the matrix |
Kevin Lubick | 217056c | 2018-09-20 17:39:31 -0400 | [diff] [blame] | 307 | var a = arguments; |
| 308 | this._transform(a[0], a[1], a[2], |
| 309 | a[3], a[4], a[5], |
Kevin Lubick | b5ae3b5 | 2018-11-03 07:51:19 -0400 | [diff] [blame] | 310 | a[6] || 0, a[7] || 0, a[8] || 1); |
Kevin Lubick | 217056c | 2018-09-20 17:39:31 -0400 | [diff] [blame] | 311 | } else { |
Kevin Lubick | b5ae3b5 | 2018-11-03 07:51:19 -0400 | [diff] [blame] | 312 | throw 'transform expected to take 1 or 9 arguments. Got ' + arguments.length; |
Kevin Lubick | 217056c | 2018-09-20 17:39:31 -0400 | [diff] [blame] | 313 | } |
| 314 | return this; |
| 315 | }; |
Kevin Lubick | b5ae3b5 | 2018-11-03 07:51:19 -0400 | [diff] [blame] | 316 | // isComplement is optional, defaults to false |
| 317 | CanvasKit.SkPath.prototype.trim = function(startT, stopT, isComplement) { |
| 318 | if (this._trim(startT, stopT, !!isComplement)) { |
| 319 | return this; |
| 320 | } |
| 321 | return null; |
| 322 | }; |
| 323 | |
| 324 | // bones should be a 3d array. |
| 325 | // Each bone is a 3x2 transformation matrix in column major order: |
| 326 | // | scaleX skewX transX | |
| 327 | // | skewY scaleY transY | |
| 328 | // and bones is an array of those matrices. |
| 329 | // Returns a copy of this (SkVertices) with the bones applied. |
| 330 | CanvasKit.SkVertices.prototype.applyBones = function(bones) { |
| 331 | var bPtr = copy3dArray(bones, CanvasKit.HEAPF32); |
| 332 | var vert = this._applyBones(bPtr, bones.length); |
| 333 | CanvasKit._free(bPtr); |
| 334 | return vert; |
| 335 | } |
Kevin Lubick | 53965c9 | 2018-10-11 08:51:55 -0400 | [diff] [blame] | 336 | |
Alexander Khovansky | 3e11933 | 2018-11-15 02:01:19 +0300 | [diff] [blame] | 337 | CanvasKit.SkImage.prototype.encodeToData = function() { |
Kevin Lubick | 52b9f37 | 2018-12-04 13:57:36 -0500 | [diff] [blame] | 338 | if (!arguments.length) { |
Alexander Khovansky | 3e11933 | 2018-11-15 02:01:19 +0300 | [diff] [blame] | 339 | return this._encodeToData(); |
| 340 | } |
| 341 | |
| 342 | if (arguments.length === 2) { |
| 343 | var a = arguments; |
| 344 | return this._encodeToDataWithFormat(a[0], a[1]); |
| 345 | } |
| 346 | |
| 347 | throw 'encodeToData expected to take 0 or 2 arguments. Got ' + arguments.length; |
| 348 | } |
| 349 | |
Kevin Lubick | 52b9f37 | 2018-12-04 13:57:36 -0500 | [diff] [blame] | 350 | // returns Uint8Array |
| 351 | CanvasKit.SkCanvas.prototype.readPixels = function(x, y, w, h, alphaType, |
| 352 | colorType, dstRowBytes) { |
| 353 | // supply defaults (which are compatible with HTMLCanvas's getImageData) |
| 354 | alphaType = alphaType || CanvasKit.AlphaType.Unpremul; |
| 355 | colorType = colorType || CanvasKit.ColorType.RGBA_8888; |
| 356 | dstRowBytes = dstRowBytes || (4 * w); |
| 357 | |
| 358 | var len = h * dstRowBytes |
| 359 | var pptr = CanvasKit._malloc(len); |
| 360 | var ok = this._readPixels({ |
| 361 | 'width': w, |
| 362 | 'height': h, |
| 363 | 'colorType': colorType, |
| 364 | 'alphaType': alphaType, |
| 365 | }, pptr, dstRowBytes, x, y); |
| 366 | if (!ok) { |
| 367 | CanvasKit._free(pptr); |
| 368 | return null; |
| 369 | } |
| 370 | |
| 371 | // The first typed array is just a view into memory. Because we will |
| 372 | // be free-ing that, we call slice to make a persistent copy. |
| 373 | var pixels = new Uint8Array(CanvasKit.HEAPU8.buffer, pptr, len).slice(); |
| 374 | CanvasKit._free(pptr); |
| 375 | return pixels; |
| 376 | } |
| 377 | |
| 378 | // pixels is a TypedArray. No matter the input size, it will be treated as |
| 379 | // a Uint8Array (essentially, a byte array). |
| 380 | CanvasKit.SkCanvas.prototype.writePixels = function(pixels, srcWidth, srcHeight, |
| 381 | destX, destY, alphaType, colorType) { |
| 382 | if (pixels.byteLength % (srcWidth * srcHeight)) { |
| 383 | throw 'pixels length must be a multiple of the srcWidth * srcHeight'; |
| 384 | } |
| 385 | var bytesPerPixel = pixels.byteLength / (srcWidth * srcHeight); |
| 386 | // supply defaults (which are compatible with HTMLCanvas's putImageData) |
| 387 | alphaType = alphaType || CanvasKit.AlphaType.Unpremul; |
| 388 | colorType = colorType || CanvasKit.ColorType.RGBA_8888; |
| 389 | var srcRowBytes = bytesPerPixel * srcWidth; |
| 390 | |
| 391 | var pptr = CanvasKit._malloc(pixels.byteLength); |
| 392 | CanvasKit.HEAPU8.set(pixels, pptr); |
| 393 | |
| 394 | var ok = this._writePixels({ |
| 395 | 'width': srcWidth, |
| 396 | 'height': srcHeight, |
| 397 | 'colorType': colorType, |
| 398 | 'alphaType': alphaType, |
| 399 | }, pptr, srcRowBytes, destX, destY); |
| 400 | |
| 401 | CanvasKit._free(pptr); |
| 402 | return ok; |
| 403 | } |
| 404 | |
Kevin Lubick | ddd0a33 | 2018-12-12 10:35:13 -0500 | [diff] [blame] | 405 | // fontData should be an arrayBuffer |
| 406 | CanvasKit.SkFontMgr.prototype.MakeTypefaceFromData = function(fontData) { |
| 407 | var data = new Uint8Array(fontData); |
| 408 | |
| 409 | var fptr = CanvasKit._malloc(data.byteLength); |
| 410 | CanvasKit.HEAPU8.set(data, fptr); |
| 411 | var font = this._makeTypefaceFromData(fptr, data.byteLength); |
| 412 | if (!font) { |
| 413 | SkDebug('Could not decode font data'); |
| 414 | // We do not need to free the data since the C++ will do that for us |
Kevin Lubick | 8e4a331 | 2018-12-14 15:03:41 -0500 | [diff] [blame^] | 415 | // when the font is deleted (or fails to decode); |
Kevin Lubick | ddd0a33 | 2018-12-12 10:35:13 -0500 | [diff] [blame] | 416 | return null; |
| 417 | } |
Kevin Lubick | ddd0a33 | 2018-12-12 10:35:13 -0500 | [diff] [blame] | 418 | return font; |
| 419 | } |
| 420 | |
Kevin Lubick | 5b90b84 | 2018-10-17 07:57:18 -0400 | [diff] [blame] | 421 | // Run through the JS files that are added at compile time. |
| 422 | if (CanvasKit._extraInitializations) { |
| 423 | CanvasKit._extraInitializations.forEach(function(init) { |
| 424 | init(); |
| 425 | }); |
Kevin Lubick | 217056c | 2018-09-20 17:39:31 -0400 | [diff] [blame] | 426 | } |
Kevin Lubick | 3d99b1e | 2018-10-16 10:15:01 -0400 | [diff] [blame] | 427 | } // end CanvasKit.onRuntimeInitialized, that is, anything changing prototypes or dynamic. |
Kevin Lubick | 53965c9 | 2018-10-11 08:51:55 -0400 | [diff] [blame] | 428 | |
Kevin Lubick | 217056c | 2018-09-20 17:39:31 -0400 | [diff] [blame] | 429 | CanvasKit.LTRBRect = function(l, t, r, b) { |
| 430 | return { |
| 431 | fLeft: l, |
| 432 | fTop: t, |
| 433 | fRight: r, |
| 434 | fBottom: b, |
| 435 | }; |
| 436 | } |
| 437 | |
Kevin Lubick | 0a1293c | 2018-12-03 12:31:04 -0500 | [diff] [blame] | 438 | CanvasKit.XYWHRect = function(x, y, w, h) { |
| 439 | return { |
| 440 | fLeft: x, |
| 441 | fTop: y, |
| 442 | fRight: x+w, |
| 443 | fBottom: y+h, |
| 444 | }; |
| 445 | } |
| 446 | |
Kevin Lubick | b5ae3b5 | 2018-11-03 07:51:19 -0400 | [diff] [blame] | 447 | var nullptr = 0; // emscripten doesn't like to take null as uintptr_t |
| 448 | |
| 449 | // arr can be a normal JS array or a TypedArray |
| 450 | // dest is something like CanvasKit.HEAPF32 |
| 451 | function copy1dArray(arr, dest) { |
| 452 | if (!arr || !arr.length) { |
| 453 | return nullptr; |
| 454 | } |
| 455 | var ptr = CanvasKit._malloc(arr.length * dest.BYTES_PER_ELEMENT); |
| 456 | // In c++ terms, the WASM heap is a uint8_t*, a long buffer/array of single |
| 457 | // byte elements. When we run _malloc, we always get an offset/pointer into |
| 458 | // that block of memory. |
| 459 | // CanvasKit exposes some different views to make it easier to work with |
| 460 | // different types. HEAPF32 for example, exposes it as a float* |
| 461 | // However, to make the ptr line up, we have to do some pointer arithmetic. |
| 462 | // Concretely, we need to convert ptr to go from an index into a 1-byte-wide |
| 463 | // buffer to an index into a 4-byte-wide buffer (in the case of HEAPF32) |
| 464 | // and thus we divide ptr by 4. |
| 465 | dest.set(arr, ptr / dest.BYTES_PER_ELEMENT); |
| 466 | return ptr; |
| 467 | } |
| 468 | |
| 469 | // arr should be a non-jagged 2d JS array (TypeyArrays can't be nested |
| 470 | // inside themselves.) |
| 471 | // dest is something like CanvasKit.HEAPF32 |
| 472 | function copy2dArray(arr, dest) { |
| 473 | if (!arr || !arr.length) { |
| 474 | return nullptr; |
| 475 | } |
| 476 | var ptr = CanvasKit._malloc(arr.length * arr[0].length * dest.BYTES_PER_ELEMENT); |
| 477 | var idx = 0; |
| 478 | var adjustedPtr = ptr / dest.BYTES_PER_ELEMENT; |
| 479 | for (var r = 0; r < arr.length; r++) { |
| 480 | for (var c = 0; c < arr[0].length; c++) { |
| 481 | dest[adjustedPtr + idx] = arr[r][c]; |
| 482 | idx++; |
| 483 | } |
| 484 | } |
| 485 | return ptr; |
| 486 | } |
| 487 | |
| 488 | // arr should be a non-jagged 3d JS array (TypeyArrays can't be nested |
| 489 | // inside themselves.) |
| 490 | // dest is something like CanvasKit.HEAPF32 |
| 491 | function copy3dArray(arr, dest) { |
| 492 | if (!arr || !arr.length || !arr[0].length) { |
| 493 | return nullptr; |
| 494 | } |
| 495 | var ptr = CanvasKit._malloc(arr.length * arr[0].length * arr[0][0].length * dest.BYTES_PER_ELEMENT); |
| 496 | var idx = 0; |
| 497 | var adjustedPtr = ptr / dest.BYTES_PER_ELEMENT; |
| 498 | for (var x = 0; x < arr.length; x++) { |
| 499 | for (var y = 0; y < arr[0].length; y++) { |
| 500 | for (var z = 0; z < arr[0][0].length; z++) { |
| 501 | dest[adjustedPtr + idx] = arr[x][y][z]; |
| 502 | idx++; |
| 503 | } |
| 504 | } |
| 505 | } |
| 506 | return ptr; |
| 507 | } |
| 508 | |
Kevin Lubick | 217056c | 2018-09-20 17:39:31 -0400 | [diff] [blame] | 509 | CanvasKit.MakeSkDashPathEffect = function(intervals, phase) { |
| 510 | if (!phase) { |
| 511 | phase = 0; |
| 512 | } |
| 513 | if (!intervals.length || intervals.length % 2 === 1) { |
| 514 | throw 'Intervals array must have even length'; |
| 515 | } |
Kevin Lubick | b5ae3b5 | 2018-11-03 07:51:19 -0400 | [diff] [blame] | 516 | var ptr = copy1dArray(intervals, CanvasKit.HEAPF32); |
| 517 | var dpe = CanvasKit._MakeSkDashPathEffect(ptr, intervals.length, phase); |
| 518 | CanvasKit._free(ptr); |
| 519 | return dpe; |
| 520 | } |
| 521 | |
Kevin Lubick | d29edd7 | 2018-12-07 08:29:52 -0500 | [diff] [blame] | 522 | // data is a TypedArray or ArrayBuffer e.g. from fetch().then(resp.arrayBuffer()) |
Kevin Lubick | 0a1293c | 2018-12-03 12:31:04 -0500 | [diff] [blame] | 523 | CanvasKit.MakeImageFromEncoded = function(data) { |
| 524 | data = new Uint8Array(data); |
| 525 | |
| 526 | var iptr = CanvasKit._malloc(data.byteLength); |
| 527 | CanvasKit.HEAPU8.set(data, iptr); |
| 528 | var img = CanvasKit._decodeImage(iptr, data.byteLength); |
| 529 | if (!img) { |
| 530 | SkDebug('Could not decode image'); |
| 531 | CanvasKit._free(iptr); |
| 532 | return null; |
| 533 | } |
| 534 | var realDelete = img.delete.bind(img); |
| 535 | img.delete = function() { |
| 536 | CanvasKit._free(iptr); |
| 537 | realDelete(); |
| 538 | } |
| 539 | return img; |
| 540 | } |
| 541 | |
Kevin Lubick | d29edd7 | 2018-12-07 08:29:52 -0500 | [diff] [blame] | 542 | // imgData is an Encoded SkImage, e.g. from MakeImageFromEncoded |
| 543 | CanvasKit.MakeImageShader = function(img, xTileMode, yTileMode, clampUnpremul, localMatrix) { |
| 544 | if (!img) { |
| 545 | return null; |
| 546 | } |
| 547 | clampUnpremul = clampUnpremul || false; |
| 548 | if (localMatrix) { |
| 549 | // Add perspective args if not provided. |
| 550 | if (localMatrix.length === 6) { |
| 551 | localMatrix.push(0, 0, 1); |
| 552 | } |
| 553 | return CanvasKit._MakeImageShader(img, xTileMode, yTileMode, clampUnpremul, localMatrix); |
| 554 | } else { |
| 555 | return CanvasKit._MakeImageShader(img, xTileMode, yTileMode, clampUnpremul); |
| 556 | } |
Kevin Lubick | b5ae3b5 | 2018-11-03 07:51:19 -0400 | [diff] [blame] | 557 | } |
| 558 | |
Kevin Lubick | 52b9f37 | 2018-12-04 13:57:36 -0500 | [diff] [blame] | 559 | // pixels is a Uint8Array |
| 560 | CanvasKit.MakeImage = function(pixels, width, height, alphaType, colorType) { |
| 561 | var bytesPerPixel = pixels.byteLength / (width * height); |
| 562 | var info = { |
| 563 | 'width': width, |
| 564 | 'height': height, |
| 565 | 'alphaType': alphaType, |
| 566 | 'colorType': colorType, |
| 567 | }; |
| 568 | var pptr = CanvasKit._malloc(pixels.byteLength); |
| 569 | CanvasKit.HEAPU8.set(pixels, pptr); |
| 570 | // No need to _free iptr, Image takes it with SkData::MakeFromMalloc |
| 571 | |
| 572 | return CanvasKit._MakeImage(info, pptr, pixels.byteLength, width * bytesPerPixel); |
| 573 | } |
| 574 | |
Kevin Lubick | b5ae3b5 | 2018-11-03 07:51:19 -0400 | [diff] [blame] | 575 | CanvasKit.MakeLinearGradientShader = function(start, end, colors, pos, mode, localMatrix, flags) { |
| 576 | var colorPtr = copy1dArray(colors, CanvasKit.HEAP32); |
| 577 | var posPtr = copy1dArray(pos, CanvasKit.HEAPF32); |
| 578 | flags = flags || 0; |
| 579 | |
| 580 | if (localMatrix) { |
| 581 | // Add perspective args if not provided. |
| 582 | if (localMatrix.length === 6) { |
| 583 | localMatrix.push(0, 0, 1); |
| 584 | } |
| 585 | var lgs = CanvasKit._MakeLinearGradientShader(start, end, colorPtr, posPtr, |
| 586 | colors.length, mode, flags, localMatrix); |
| 587 | } else { |
| 588 | var lgs = CanvasKit._MakeLinearGradientShader(start, end, colorPtr, posPtr, |
| 589 | colors.length, mode, flags); |
Kevin Lubick | 217056c | 2018-09-20 17:39:31 -0400 | [diff] [blame] | 590 | } |
Kevin Lubick | b5ae3b5 | 2018-11-03 07:51:19 -0400 | [diff] [blame] | 591 | |
| 592 | CanvasKit._free(colorPtr); |
| 593 | CanvasKit._free(posPtr); |
| 594 | return lgs; |
| 595 | } |
| 596 | |
| 597 | CanvasKit.MakeRadialGradientShader = function(center, radius, colors, pos, mode, localMatrix, flags) { |
Kevin Lubick | b5ae3b5 | 2018-11-03 07:51:19 -0400 | [diff] [blame] | 598 | var colorPtr = copy1dArray(colors, CanvasKit.HEAP32); |
| 599 | var posPtr = copy1dArray(pos, CanvasKit.HEAPF32); |
| 600 | flags = flags || 0; |
| 601 | |
| 602 | if (localMatrix) { |
| 603 | // Add perspective args if not provided. |
| 604 | if (localMatrix.length === 6) { |
| 605 | localMatrix.push(0, 0, 1); |
| 606 | } |
| 607 | var rgs = CanvasKit._MakeRadialGradientShader(center, radius, colorPtr, posPtr, |
| 608 | colors.length, mode, flags, localMatrix); |
| 609 | } else { |
| 610 | var rgs = CanvasKit._MakeRadialGradientShader(center, radius, colorPtr, posPtr, |
| 611 | colors.length, mode, flags); |
| 612 | } |
| 613 | |
| 614 | CanvasKit._free(colorPtr); |
| 615 | CanvasKit._free(posPtr); |
| 616 | return rgs; |
| 617 | } |
| 618 | |
Kevin Lubick | eb2f6b0 | 2018-11-29 15:07:02 -0500 | [diff] [blame] | 619 | CanvasKit.MakeTwoPointConicalGradientShader = function(start, startRadius, end, endRadius, |
| 620 | colors, pos, mode, localMatrix, flags) { |
| 621 | var colorPtr = copy1dArray(colors, CanvasKit.HEAP32); |
| 622 | var posPtr = copy1dArray(pos, CanvasKit.HEAPF32); |
| 623 | flags = flags || 0; |
| 624 | |
| 625 | if (localMatrix) { |
| 626 | // Add perspective args if not provided. |
| 627 | if (localMatrix.length === 6) { |
| 628 | localMatrix.push(0, 0, 1); |
| 629 | } |
| 630 | var rgs = CanvasKit._MakeTwoPointConicalGradientShader( |
| 631 | start, startRadius, end, endRadius, |
| 632 | colorPtr, posPtr, colors.length, mode, flags, localMatrix); |
| 633 | } else { |
| 634 | var rgs = CanvasKit._MakeTwoPointConicalGradientShader( |
| 635 | start, startRadius, end, endRadius, |
| 636 | colorPtr, posPtr, colors.length, mode, flags); |
| 637 | } |
| 638 | |
| 639 | CanvasKit._free(colorPtr); |
| 640 | CanvasKit._free(posPtr); |
| 641 | return rgs; |
| 642 | } |
| 643 | |
Kevin Lubick | b5ae3b5 | 2018-11-03 07:51:19 -0400 | [diff] [blame] | 644 | CanvasKit.MakeSkVertices = function(mode, positions, textureCoordinates, colors, |
| 645 | boneIndices, boneWeights, indices) { |
| 646 | var positionPtr = copy2dArray(positions, CanvasKit.HEAPF32); |
| 647 | var texPtr = copy2dArray(textureCoordinates, CanvasKit.HEAPF32); |
| 648 | // Since we write the colors to memory as signed integers (JSColor), we can |
| 649 | // read them out on the other side as unsigned ints (SkColor) just fine |
| 650 | // - it's effectively casting. |
| 651 | var colorPtr = copy1dArray(colors, CanvasKit.HEAP32); |
| 652 | |
| 653 | var boneIdxPtr = copy2dArray(boneIndices, CanvasKit.HEAP32); |
| 654 | var boneWtPtr = copy2dArray(boneWeights, CanvasKit.HEAPF32); |
| 655 | var idxPtr = copy1dArray(indices, CanvasKit.HEAPU16); |
| 656 | |
| 657 | var idxCount = (indices && indices.length) || 0; |
| 658 | // _MakeVertices will copy all the values in, so we are free to release |
| 659 | // the memory after. |
| 660 | var vertices = CanvasKit._MakeSkVertices(mode, positions.length, positionPtr, |
| 661 | texPtr, colorPtr, boneIdxPtr, boneWtPtr, |
| 662 | idxCount, idxPtr); |
| 663 | positionPtr && CanvasKit._free(positionPtr); |
| 664 | texPtr && CanvasKit._free(texPtr); |
| 665 | colorPtr && CanvasKit._free(colorPtr); |
| 666 | idxPtr && CanvasKit._free(idxPtr); |
| 667 | boneIdxPtr && CanvasKit._free(boneIdxPtr); |
| 668 | boneWtPtr && CanvasKit._free(boneWtPtr); |
| 669 | return vertices; |
Kevin Lubick | 217056c | 2018-09-20 17:39:31 -0400 | [diff] [blame] | 670 | } |
| 671 | |
Kevin Lubick | 217056c | 2018-09-20 17:39:31 -0400 | [diff] [blame] | 672 | }(Module)); // When this file is loaded in, the high level object is "Module"; |
Kevin Lubick | 1a05fce | 2018-11-20 12:51:16 -0500 | [diff] [blame] | 673 | |
| 674 | // Intentionally added outside the scope to allow usage in canvas2d.js and other |
| 675 | // pre-js files. These names are unlikely to cause emscripten collisions. |
| 676 | function radiansToDegrees(rad) { |
| 677 | return (rad / Math.PI) * 180; |
| 678 | } |
| 679 | |
| 680 | function degreesToRadians(deg) { |
| 681 | return (deg / 180) * Math.PI; |
| 682 | } |
| 683 | |