1// This file is type-checked by the Typescript definitions. It is not actually executed. 2// Test it by running `npm run dtslint` in the parent directory. 3import { 4 CanvasKitInit, 5 AnimatedImage, 6 Canvas, 7 CanvasKit, 8 ColorFilter, 9 Font, 10 FontMgr, 11 Image, 12 ImageFilter, 13 ImageInfo, 14 MaskFilter, 15 Paint, 16 Paragraph, 17 Path, 18 PathEffect, 19 Shader, 20 SkPicture, 21 TextBlob, 22 Typeface, 23 Vertices, 24} from "canvaskit-wasm"; 25 26CanvasKitInit({locateFile: (file: string) => '/node_modules/canvaskit/bin/' + file}).then((CK: CanvasKit) => { 27 animatedImageTests(CK); 28 canvasTests(CK); 29 canvas2DTests(CK); 30 colorFilterTests(CK); 31 colorTests(CK); 32 contourMeasureTests(CK); 33 imageFilterTests(CK); 34 imageTests(CK); 35 fontTests(CK); 36 fontMgrTests(CK); 37 globalTests(CK); 38 mallocTests(CK); 39 maskFilterTests(CK); 40 matrixTests(CK); 41 paintTests(CK); 42 paragraphTests(CK); 43 paragraphBuilderTests(CK); 44 particlesTests(CK); 45 pathEffectTests(CK); 46 pathTests(CK); 47 pictureTests(CK); 48 rectangleTests(CK); 49 runtimeEffectTests(CK); 50 skottieTests(CK); 51 shaderTests(CK); 52 surfaceTests(CK); 53 textBlobTests(CK); 54 vectorTests(CK); 55 verticesTests(CK); 56}); 57 58function animatedImageTests(CK: CanvasKit) { 59 const buff = new ArrayBuffer(10); 60 const img = CK.MakeAnimatedImageFromEncoded(buff); // $ExpectType AnimatedImage | null 61 if (!img) return; 62 const n = img.decodeNextFrame(); // $ExpectType number 63 const f = img.getFrameCount(); // $ExpectType number 64 const r = img.getRepetitionCount(); // $ExpectType number 65 const h = img.height(); // $ExpectType number 66 const still = img.makeImageAtCurrentFrame(); // $ExpectType Image | null 67 img.reset(); 68 const w = img.width(); // $ExpectType number 69} 70 71// In an effort to keep these type-checking tests easy to read and understand, we can "inject" 72// types instead of actually having to create them from scratch. To inject them, we define them 73// as an optional parameter and then have a null check to make sure that optional-ness does not 74// cause errors. 75function canvasTests(CK: CanvasKit, canvas?: Canvas, paint?: Paint, path?: Path, 76 img?: Image, aImg?: AnimatedImage, para?: Paragraph, 77 skp?: SkPicture, font?: Font, textBlob?: TextBlob, verts?: Vertices, 78 imageInfo?: ImageInfo, imgFilter?: ImageFilter) { 79 if (!canvas || !paint || !path || !img || !aImg || !para || !skp || !font || 80 !textBlob || !verts || !imageInfo || !imgFilter) { 81 return; 82 } 83 const someColor = [0.9, 0.8, 0.7, 0.6]; // Making sure arrays are accepted as colors. 84 const someRect = [4, 3, 2, 1]; // Making sure arrays are accepted as rects. 85 // Making sure arrays are accepted as rrects. 86 const someRRect = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; 87 const someMatrix = CK.Malloc(Float32Array, 16); // Make sure matrixes can be malloc'd. 88 89 canvas.clear(CK.RED); 90 canvas.clipPath(path, CK.ClipOp.Intersect, false); 91 canvas.clipRect(someRect, CK.ClipOp.Intersect, true); 92 canvas.clipRRect(CK.RRectXY(someRect, 10, 20), CK.ClipOp.Difference, true); 93 canvas.concat([1, 0, 0, 0, 1, 0, 0, 0, 1]); 94 canvas.concat(someMatrix); 95 canvas.drawArc(someRect, 0, 90, true, paint); 96 canvas.drawAtlas(img, [1, 2, 3, 4, 5, 6, 7, 8], [8, 7, 6, 5, 4, 3, 2, 1], paint); 97 canvas.drawAtlas(img, [1, 2, 3, 4, 5, 6, 7, 8], [8, 7, 6, 5, 4, 3, 2, 1], paint, 98 CK.BlendMode.Darken, 99 [CK.ColorAsInt(100, 110, 120), CK.ColorAsInt(130, 140, 150)]); 100 canvas.drawAtlas(img, [1, 2, 3, 4, 5, 6, 7, 8], [8, 7, 6, 5, 4, 3, 2, 1], paint, 101 null, null, {B: 0, C: 0.5}); 102 canvas.drawAtlas(img, [1, 2, 3, 4, 5, 6, 7, 8], [8, 7, 6, 5, 4, 3, 2, 1], paint, 103 null, null, {filter: CK.FilterMode.Linear, mipmap: CK.MipmapMode.Nearest}); 104 canvas.drawCircle(20, 20, 20, paint); 105 canvas.drawColor(someColor); 106 canvas.drawColor(someColor, CK.BlendMode.ColorDodge); 107 canvas.drawColorComponents(0.2, 1.0, -0.02, 0.5); 108 canvas.drawColorComponents(0.2, 1.0, -0.02, 0.5, CK.BlendMode.ColorDodge); 109 canvas.drawColorInt(CK.ColorAsInt(100, 110, 120)); 110 canvas.drawColorInt(CK.ColorAsInt(100, 110, 120), CK.BlendMode.ColorDodge); 111 canvas.drawDRRect(someRRect, CK.RRectXY(someRect, 10, 20), paint); 112 canvas.drawImage(img, 0, -43); 113 canvas.drawImage(img, 0, -43, paint); 114 canvas.drawImageAtCurrentFrame(aImg, 0, -43); 115 canvas.drawImageAtCurrentFrame(aImg, 0, -43, paint); 116 canvas.drawImageCubic(img, 0, -43, 1 / 3, 1 / 4, null); 117 canvas.drawImageOptions(img, 0, -43, CK.FilterMode.Nearest, CK.MipmapMode.Nearest, paint); 118 canvas.drawImageNine(img, someRect, someRect, CK.FilterMode.Nearest); 119 canvas.drawImageNine(img, CK.XYWHiRect(10, 20, 40, 40), someRect, CK.FilterMode.Linear, paint); 120 canvas.drawImageRect(img, someRect, someRect, paint); 121 canvas.drawImageRect(img, CK.XYWHRect(90, 90, 40, 40), someRect, paint); 122 canvas.drawImageRect(img, someRect, someRect, paint, true); 123 canvas.drawImageRectCubic(img, someRect, someRect, 1 / 5, 1 / 6); 124 canvas.drawImageRectCubic(img, someRect, someRect, 1 / 5, 1 / 6, paint); 125 canvas.drawImageRectOptions(img, someRect, someRect, CK.FilterMode.Linear, CK.MipmapMode.None); 126 canvas.drawImageRectOptions(img, someRect, someRect, CK.FilterMode.Linear, CK.MipmapMode.None, paint); 127 canvas.drawLine(1, 2, 3, 4, paint); 128 canvas.drawOval(someRect, paint); 129 canvas.drawPaint(paint); 130 canvas.drawParagraph(para, 10, 7); 131 const cubics = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 132 7, 7, 8, 8, 9, 9, 10, 10, 11, 11, 12, 12]; 133 const colors = [CK.RED, CK.BLUE, CK.GREEN, CK.WHITE]; 134 const texs = [1, 1, 2, 2, 3, 3, 4, 4]; 135 canvas.drawPatch(cubics, null, null, null, paint); 136 canvas.drawPatch(cubics, colors, null, CK.BlendMode.Clear, paint); 137 canvas.drawPatch(cubics, null, texs, null, paint); 138 canvas.drawPatch(cubics, colors, texs, CK.BlendMode.SrcOver, paint); 139 canvas.drawPath(path, paint); 140 canvas.drawPicture(skp); 141 canvas.drawPoints(CK.PointMode.Lines, [1, 2, 3, 4, 5, 6], paint); 142 canvas.drawRect(someRect, paint); 143 canvas.drawRect4f(5, 6, 7, 8, paint); 144 canvas.drawRRect(someRRect, paint); 145 canvas.drawShadow(path, [1, 2, 3], [4, 5, 6], 7, someColor, CK.BLUE, 0); 146 const mallocedVector3 = CK.Malloc(Float32Array, 3); 147 canvas.drawShadow(path, mallocedVector3, mallocedVector3, 7, someColor, CK.BLUE, 0); 148 canvas.drawText('foo', 1, 2, paint, font); 149 canvas.drawTextBlob(textBlob, 10, 20, paint); 150 canvas.drawVertices(verts, CK.BlendMode.DstOut, paint); 151 const matrOne = canvas.findMarkedCTM('thing'); // $ExpectType Float32Array | null 152 const matrTwo = canvas.getLocalToDevice(); // $ExpectType Float32Array 153 const sc = canvas.getSaveCount(); // $ExpectType number 154 const matrThree = canvas.getTotalMatrix(); // $ExpectType number[] 155 const surface = canvas.makeSurface(imageInfo); // $ExpectType Surface | null 156 canvas.markCTM('more ctm'); 157 const pixels = canvas.readPixels(85, 1000, {// $Uint8Array | Float32Array | null 158 width: 79, 159 height: 205, 160 colorType: CK.ColorType.RGBA_8888, 161 alphaType: CK.AlphaType.Unpremul, 162 colorSpace: CK.ColorSpace.SRGB, 163 }); 164 const m = CK.Malloc(Uint8Array, 10); 165 img.readPixels(85, 1000, { 166 width: 79, 167 height: 205, 168 colorType: CK.ColorType.RGBA_8888, 169 alphaType: CK.AlphaType.Unpremul, 170 colorSpace: CK.ColorSpace.SRGB, 171 }, m, 4 * 85); 172 canvas.restore(); 173 canvas.restoreToCount(2); 174 canvas.rotate(1, 2, 3); 175 const height = canvas.save(); // $ExpectType number 176 const h2 = canvas.saveLayer(); // $ExpectType number 177 const h3 = canvas.saveLayer(paint); // $ExpectType number 178 const h4 = canvas.saveLayer(paint, someRect); 179 const h5 = canvas.saveLayer(paint, someRect, imgFilter, CK.SaveLayerF16ColorType); 180 const h6 = canvas.saveLayer(paint, someRect, null, CK.SaveLayerInitWithPrevious); 181 canvas.scale(5, 10); 182 canvas.skew(10, 5); 183 canvas.translate(20, 30); 184 const ok = canvas.writePixels([1, 2, 3, 4], 1, 1, 10, 20); // $ExpectType boolean 185 const ok2 = canvas.writePixels([1, 2, 3, 4], 1, 1, 10, 20, CK.AlphaType.Premul, 186 CK.ColorType.Alpha_8, CK.ColorSpace.DISPLAY_P3); 187} 188 189function canvas2DTests(CK: CanvasKit) { 190 const bytes = new ArrayBuffer(10); 191 192 const canvas = CK.MakeCanvas(100, 200); 193 const img = canvas.decodeImage(bytes); 194 const ctx = canvas.getContext('2d'); 195 ctx!.lineTo(2, 4); 196 canvas.loadFont(bytes, { 197 family: 'BungeeNonSystem', 198 style: 'normal', 199 weight: '400', 200 }); 201 const p2d = canvas.makePath2D(); 202 p2d.quadraticCurveTo(1, 2, 3, 4); 203 const iData = new CK.ImageData(40, 50); 204 const imgStr = canvas.toDataURL(); 205} 206 207function colorTests(CK: CanvasKit) { 208 const colorOne = CK.Color(200, 200, 200, 0.8); // $ExpectType Float32Array 209 const colorTwo = CK.Color4f(0.8, 0.8, 0.8, 0.7); // $ExpectType Float32Array 210 const colorThree = CK.ColorAsInt(240, 230, 220); // $ExpectType number 211 const colorFour = CK.parseColorString('#887766'); // $ExpectType Float32Array 212 const colors = CK.computeTonalColors({ // $ExpectType TonalColorsOutput 213 ambient: colorOne, 214 spot: [0.2, 0.4, 0.6, 0.8], 215 }); 216 217 // Deprecated Color functions 218 const [r, g, b, a] = CK.getColorComponents(colorTwo); 219 const alphaChanged = CK.multiplyByAlpha(colorOne, 0.1); 220} 221 222function colorFilterTests(CK: CanvasKit) { 223 const cf = CK.ColorFilter; // less typing 224 const filterOne = cf.MakeBlend(CK.CYAN, CK.BlendMode.ColorBurn); // $ExpectType ColorFilter 225 const filterTwo = cf.MakeLinearToSRGBGamma(); // $ExpectType ColorFilter 226 const filterThree = cf.MakeSRGBToLinearGamma(); // $ExpectType ColorFilter 227 const filterFour = cf.MakeCompose(filterOne, filterTwo); // $ExpectType ColorFilter 228 const filterFive = cf.MakeLerp(0.7, filterThree, filterFour); // $ExpectType ColorFilter 229 230 const r = CK.ColorMatrix.rotated(0, .707, -.707); // $ExpectType Float32Array 231 const b = CK.ColorMatrix.rotated(2, .5, .866); 232 const s = CK.ColorMatrix.scaled(0.9, 1.5, 0.8, 0.8); 233 let cm = CK.ColorMatrix.concat(r, s); 234 cm = CK.ColorMatrix.concat(cm, b); 235 CK.ColorMatrix.postTranslate(cm, 20, 0, -10, 0); 236 237 const filterSix = CK.ColorFilter.MakeMatrix(cm); // $ExpectType ColorFilter 238} 239 240function contourMeasureTests(CK: CanvasKit, path?: Path) { 241 if (!path) return; 242 const iter = new CK.ContourMeasureIter(path, true, 2); // $ExpectType ContourMeasureIter 243 const contour = iter.next(); // $ExpectType ContourMeasure | null 244 if (!contour) return; 245 const pt = contour.getPosTan(2); // $ExpectType Float32Array 246 contour.getPosTan(2, pt); 247 const segment = contour.getSegment(0, 20, true); // $ExpectType Path 248 const closed = contour.isClosed(); // $ExpectType boolean 249 const length = contour.length(); // $ExpectType number 250} 251 252function imageTests(CK: CanvasKit, imgElement?: HTMLImageElement) { 253 if (!imgElement) return; 254 const buff = new ArrayBuffer(10); 255 const img = CK.MakeImageFromEncoded(buff); // $ExpectType Image | null 256 const img2 = CK.MakeImageFromCanvasImageSource(imgElement); // $ExpectType Image 257 const img3 = CK.MakeImage({ // $ExpectType Image | null 258 width: 1, 259 height: 1, 260 alphaType: CK.AlphaType.Premul, 261 colorType: CK.ColorType.RGBA_8888, 262 colorSpace: CK.ColorSpace.SRGB 263 }, Uint8Array.of(255, 0, 0, 250), 4); 264 if (!img) return; 265 const dOne = img.encodeToBytes(); // $ExpectType Uint8Array | null 266 const dTwo = img.encodeToBytes(CK.ImageFormat.JPEG, 97); 267 const h = img.height(); 268 const w = img.width(); 269 const s1 = img.makeShaderCubic(CK.TileMode.Decal, CK.TileMode.Repeat, 1 / 3, 1 / 3); // $ExpectType Shader 270 const mm = img.makeCopyWithDefaultMipmaps(); // $ExpectType Image 271 const s2 = mm.makeShaderOptions(CK.TileMode.Decal, CK.TileMode.Repeat, // $ExpectType Shader 272 CK.FilterMode.Nearest, CK.MipmapMode.Linear, 273 CK.Matrix.identity()); 274 const pixels = img.readPixels(85, 1000, { // $ExpectType Float32Array | Uint8Array | null 275 width: 79, 276 height: 205, 277 colorType: CK.ColorType.RGBA_8888, 278 alphaType: CK.AlphaType.Unpremul, 279 colorSpace: CK.ColorSpace.SRGB, 280 }); 281 const m = CK.Malloc(Uint8Array, 10); 282 img.readPixels(85, 1000, { 283 width: 79, 284 height: 205, 285 colorType: CK.ColorType.RGBA_8888, 286 alphaType: CK.AlphaType.Unpremul, 287 colorSpace: CK.ColorSpace.SRGB, 288 }, m, 4 * 85); 289 const ii = img.getImageInfo(); // $ExpectType PartialImageInfo 290 const cs = img.getColorSpace(); // $ExpectType ColorSpace 291 cs.delete(); 292 img.delete(); 293} 294 295function imageFilterTests(CK: CanvasKit, colorFilter?: ColorFilter) { 296 if (!colorFilter) return; 297 const imgf = CK.ImageFilter; // less typing 298 const filter = imgf.MakeBlur(2, 4, CK.TileMode.Mirror, null); // $ExpectType ImageFilter 299 const filter1 = imgf.MakeBlur(2, 4, CK.TileMode.Decal, filter); // $ExpectType ImageFilter 300 const filter2 = imgf.MakeColorFilter(colorFilter, null); // $ExpectType ImageFilter 301 const filter3 = imgf.MakeColorFilter(colorFilter, filter); // $ExpectType ImageFilter 302 const filter4 = imgf.MakeCompose(null, filter2); // $ExpectType ImageFilter 303 const filter5 = imgf.MakeCompose(filter3, null); // $ExpectType ImageFilter 304 const filter6 = imgf.MakeCompose(filter4, filter2); // $ExpectType ImageFilter 305 const filter7 = imgf.MakeMatrixTransform(CK.Matrix.scaled(2, 3, 10, 10), 306 CK.FilterQuality.High, null); 307 const filter8 = imgf.MakeMatrixTransform(CK.M44.identity(), 308 CK.FilterQuality.None, filter6); 309} 310 311function fontTests(CK: CanvasKit, face?: Typeface, paint?: Paint) { 312 if (!face || !paint) return; 313 const font = new CK.Font(); // $ExpectType Font 314 const f2 = new CK.Font(face); // $ExpectType Font 315 const f3 = new CK.Font(null); // $ExpectType Font 316 const f4 = new CK.Font(face, 20); // $ExpectType Font 317 const f5 = new CK.Font(null, 20); // $ExpectType Font 318 const f6 = new CK.Font(null, 20, 2, 3); // $ExpectType Font 319 const f7 = new CK.Font(face, 20, 4, 5); // $ExpectType Font 320 321 const glyphMalloc = CK.MallocGlyphIDs(20); 322 const someGlyphs = [1, 2, 3, 4, 5]; 323 324 const glyphBounds = font.getGlyphBounds(glyphMalloc, paint); // $ExpectType Float32Array 325 font.getGlyphBounds(someGlyphs, null, glyphBounds); 326 327 const ids = font.getGlyphIDs('abcd'); 328 font.getGlyphIDs('efgh', 4, ids); 329 330 const widths = font.getGlyphWidths(glyphMalloc, paint); 331 font.getGlyphWidths(someGlyphs, null, widths); 332 333 font.getScaleX(); 334 font.getSize(); 335 font.getSkewX(); 336 font.getTypeface(); 337 font.setEdging(CK.FontEdging.Alias); 338 font.setEmbeddedBitmaps(true); 339 font.setHinting(CK.FontHinting.Slight); 340 font.setLinearMetrics(true); 341 font.setScaleX(5); 342 font.setSize(15); 343 font.setSkewX(2); 344 font.setSubpixel(true); 345 font.setTypeface(null); 346 font.setTypeface(face); 347} 348 349function fontMgrTests(CK: CanvasKit) { 350 const fm = CK.FontMgr.RefDefault(); // $ExpectType FontMgr 351 352 const buff1 = new ArrayBuffer(10); 353 const buff2 = new ArrayBuffer(20); 354 355 const fm2 = CK.FontMgr.FromData(buff1, buff2); 356 fm.countFamilies(); 357 fm.getFamilyName(0); 358 359 const tf = fm.makeTypefaceFromData(buff1); // $ExpectType Typeface 360} 361 362function globalTests(CK: CanvasKit, path?: Path) { 363 if (!path) { 364 return; 365 } 366 const ctx = CK.currentContext(); 367 CK.setCurrentContext(ctx); 368 CK.deleteContext(ctx); 369 const n = CK.getDecodeCacheLimitBytes(); 370 const u = CK.getDecodeCacheUsedBytes(); 371 CK.setDecodeCacheLimitBytes(1000); 372 const matr = CK.Matrix.rotated(Math.PI / 6); 373 const p = CK.getShadowLocalBounds(matr, path, [0, 0, 1], [500, 500, 20], 20, 374 CK.ShadowDirectionalLight | CK.ShadowGeometricOnly | CK.ShadowDirectionalLight); 375 const mallocedVector3 = CK.Malloc(Float32Array, 3); 376 const q = CK.getShadowLocalBounds(matr, path, mallocedVector3, mallocedVector3, 20, 377 CK.ShadowDirectionalLight | CK.ShadowGeometricOnly | CK.ShadowDirectionalLight); 378} 379 380function paintTests(CK: CanvasKit, colorFilter?: ColorFilter, imageFilter?: ImageFilter, 381 maskFilter?: MaskFilter, pathEffect?: PathEffect, shader?: Shader) { 382 if (!colorFilter || !colorFilter || !imageFilter || !maskFilter || !pathEffect || !shader) { 383 return; 384 } 385 const paint = new CK.Paint(); // $ExpectType Paint 386 const newPaint = paint.copy(); // $ExpectType Paint 387 const bm = paint.getBlendMode(); 388 const color = paint.getColor(); // $ExpectType Float32Array 389 const sc = paint.getStrokeCap(); 390 const sj = paint.getStrokeJoin(); 391 const limit = paint.getStrokeMiter(); // $ExpectType number 392 const width = paint.getStrokeWidth(); // $ExpectType number 393 paint.setAlphaf(0.8); 394 paint.setAntiAlias(true); 395 paint.setBlendMode(bm); 396 paint.setColor(CK.RED); 397 paint.setColor([0, 0, 1.2, 0.5], CK.ColorSpace.DISPLAY_P3); 398 paint.setColorComponents(0, 0, 0.9, 1.0); 399 paint.setColorComponents(0, 0, 1.2, 0.5, CK.ColorSpace.DISPLAY_P3); 400 paint.setColorFilter(colorFilter); 401 paint.setColorInt(CK.ColorAsInt(20, 30, 40)); 402 paint.setColorInt(CK.ColorAsInt(20, 30, 40), CK.ColorSpace.SRGB); 403 paint.setImageFilter(imageFilter); 404 paint.setMaskFilter(maskFilter); 405 paint.setPathEffect(pathEffect); 406 paint.setShader(shader); 407 paint.setStrokeCap(CK.StrokeCap.Round); 408 paint.setStrokeJoin(CK.StrokeJoin.Miter); 409 paint.setStrokeMiter(10); 410 paint.setStrokeWidth(20); 411 paint.setStyle(CK.PaintStyle.Fill); 412 paint.delete(); 413} 414 415function pathTests(CK: CanvasKit) { 416 const path = new CK.Path(); // $ExpectType Path 417 const p2 = CK.Path.MakeFromCmds([ // $ExpectType Path | null 418 [CK.MOVE_VERB, 0, 10], 419 [CK.LINE_VERB, 30, 40], 420 [CK.QUAD_VERB, 20, 50, 45, 60], 421 ]); 422 const verbs = CK.Malloc(Uint8Array, 10); 423 const points = CK.Malloc(Float32Array, 10); 424 const p3 = CK.Path.MakeFromVerbsPointsWeights(verbs, [1, 2, 3, 4]); // $ExpectType Path 425 const p4 = CK.Path.MakeFromVerbsPointsWeights([CK.CONIC_VERB], points, [2.3]); 426 const p5 = CK.Path.MakeFromOp(p4, p2!, CK.PathOp.ReverseDifference); // $ExpectType Path | null 427 const p6 = CK.Path.MakeFromSVGString('M 205,5 L 795,5 z'); // $ExpectType Path | null 428 429 const someRect = CK.LTRBRect(10, 20, 30, 40); 430 // Making sure arrays are accepted as rrects. 431 const someRRect = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; 432 433 path.addArc(someRect, 0, 270); 434 path.addOval(someRect); 435 path.addOval(someRect, true, 3); 436 path.addPath(p2); 437 path.addPoly([20, 20, 40, 40, 20, 40], true); 438 path.addRect(someRect); 439 path.addRect(someRect, true); 440 path.addRRect(someRRect); 441 path.addRRect(someRRect, true); 442 path.addVerbsPointsWeights(verbs, [1, 2, 3, 4]); 443 path.addVerbsPointsWeights([CK.CONIC_VERB], points, [2.3]); 444 path.arc(0, 0, 10, 0, Math.PI / 2); 445 path.arc(0, 0, 10, 0, Math.PI / 2, true); 446 path.arcToOval(someRect, 15, 60, true); 447 path.arcToRotated(2, 4, 90, false, true, 0, 20); 448 path.arcToTangent(20, 20, 40, 50, 2); 449 path.close(); 450 let bounds = path.computeTightBounds(); // $ExpectType Float32Array 451 path.computeTightBounds(bounds); 452 path.conicTo(1, 2, 3, 4, 5); 453 let ok = path.contains(10, 20); // $ExpectType boolean 454 const pCopy = path.copy(); // $ExpectType Path 455 const count = path.countPoints(); // $ExpectType number 456 path.cubicTo(10, 10, 10, 10, 10, 10); 457 ok = path.dash(8, 4, 1); 458 ok = path.equals(pCopy); 459 bounds = path.getBounds(); // $ExpectType Float32Array 460 path.getBounds(bounds); 461 const ft = path.getFillType(); 462 const pt = path.getPoint(7); // $ExpectType Float32Array 463 path.getPoint(8, pt); 464 ok = path.isEmpty(); 465 ok = path.isVolatile(); 466 path.lineTo(10, -20); 467 path.moveTo(-20, -30); 468 path.offset(100, 100); 469 ok = path.op(p2!, CK.PathOp.Difference); 470 path.quadTo(10, 20, 30, 40); 471 path.rArcTo(10, 10, 90, false, true, 2, 4); 472 path.rConicTo(-1, 2, 4, 9, 3); 473 path.rCubicTo(20, 30, 40, 50, 2, 1); 474 path.reset(); 475 path.rewind(); 476 path.rLineTo(20, 30); 477 path.rMoveTo(40, 80); 478 path.rQuadTo(1, 2, 3, 4); 479 path.setFillType(CK.FillType.EvenOdd); 480 path.setIsVolatile(true); 481 ok = path.simplify(); 482 path.stroke(); 483 path.stroke({}); 484 path.stroke({ 485 width: 20, 486 miter_limit: 9, 487 precision: 0.5, 488 cap: CK.StrokeCap.Butt, 489 join: CK.StrokeJoin.Miter, 490 }); 491 const cmds = path.toCmds(); // $ExpectType PathCommand[] 492 const str = path.toSVGString(); // $ExpectType string 493 path.transform(CK.Matrix.identity()); 494 path.transform(1, 0, 0, 0, 1, 0, 0, 0, 1); 495 path.trim(0.1, 0.7, false); 496} 497 498function paragraphTests(CK: CanvasKit, p?: Paragraph) { 499 if (!p) return; 500 const a = p.didExceedMaxLines(); // $ExpectType boolean 501 const b = p.getAlphabeticBaseline(); // $ExpectType number 502 const c = p.getGlyphPositionAtCoordinate(10, 3); // $ExpectType PositionWithAffinity 503 const d = p.getHeight(); // $ExpectType number 504 const e = p.getIdeographicBaseline(); // $ExpectType number 505 const f = p.getLongestLine(); // $ExpectType number 506 const g = p.getMaxIntrinsicWidth(); // $ExpectType number 507 const h = p.getMaxWidth(); // $ExpectType number 508 const i = p.getMinIntrinsicWidth(); // $ExpectType number 509 const j = p.getRectsForPlaceholders(); // $ExpectType Float32Array 510 const k = p.getRectsForRange(2, 10, CK.RectHeightStyle.Max, // $ExpectType Float32Array 511 CK.RectWidthStyle.Tight); 512 const l = p.getWordBoundary(10); // $ExpectType URange 513 p.layout(300); 514 const m = p.getLineMetrics(); // $ExpectType LineMetrics[] 515 const n = CK.GlyphRunFlags.IsWhiteSpace === 1; 516} 517 518function paragraphBuilderTests(CK: CanvasKit, fontMgr?: FontMgr, paint?: Paint) { 519 if (!fontMgr || !paint) return; 520 const paraStyle = new CK.ParagraphStyle({ // $ExpectType ParagraphStyle 521 textStyle: { 522 color: CK.BLACK, 523 fontFamilies: ['Noto Serif'], 524 fontSize: 20, 525 }, 526 textAlign: CK.TextAlign.Center, 527 maxLines: 8, 528 ellipsis: '.._.', 529 strutStyle: { 530 strutEnabled: true, 531 fontFamilies: ['Roboto'], 532 fontSize: 28, 533 heightMultiplier: 1.5, 534 forceStrutHeight: true, 535 }, 536 disableHinting: true, 537 heightMultiplier: 2.5, 538 textDirection: CK.TextDirection.LTR, 539 textHeightBehavior: CK.TextHeightBehavior.DisableFirstAscent 540 }); 541 const blueText = new CK.TextStyle({ // $ExpectType TextStyle 542 backgroundColor: CK.Color(234, 208, 232), // light pink 543 color: CK.Color(48, 37, 199), 544 fontFamilies: ['Noto Serif'], 545 decoration: CK.LineThroughDecoration, 546 decorationThickness: 1.5, // multiplier based on font size 547 fontSize: 24, 548 fontFeatures: [{name: 'smcp', value: 1}], 549 shadows: [{color: CK.BLACK, blurRadius: 15}, 550 {color: CK.RED, blurRadius: 5, offset: [10, 10]}], 551 }); 552 553 const builder = CK.ParagraphBuilder.Make(paraStyle, fontMgr); // $ExpectType ParagraphBuilder 554 555 builder.pushStyle(blueText); 556 builder.addText('VAVAVAVAVAVAVA\nVAVA\n'); 557 builder.pop(); 558 const paragraph = builder.build(); // $ExpectType Paragraph 559 560 const buf = new ArrayBuffer(10); 561 const fontSrc = CK.TypefaceFontProvider.Make(); // $ExpectType TypefaceFontProvider 562 fontSrc.registerFont(buf, 'sans-serif'); 563 const builder2 = CK.ParagraphBuilder.MakeFromFontProvider(// $ExpectType ParagraphBuilder 564 paraStyle, fontSrc); 565 builder2.pushPaintStyle(blueText, paint, paint); 566 builder2.addPlaceholder(); 567 builder2.addPlaceholder(10, 20, CK.PlaceholderAlignment.Top, CK.TextBaseline.Ideographic, 3); 568} 569 570function particlesTests(CK: CanvasKit, canvas?: Canvas) { 571 if (!canvas) return; 572 573 const par = CK.MakeParticles('some json'); // $ExpectType Particles 574 par.draw(canvas); 575 par.uniforms()[0] = 1.2; 576 const a = par.getUniform(1); // $ExpectType SkSLUniform 577 const b = par.getUniformCount(); // $ExpectType number 578 const c = par.getUniformFloatCount(); // $ExpectType number 579 const d = par.getUniformName(3); // $ExpectType string 580 par.uniforms()[2] = 4.5; 581 par.setPosition([3, 5]); 582 par.setRate(3); 583 par.start(0, true); 584 par.update(2); 585 586 const buff = new ArrayBuffer(10); 587 const par2 = CK.MakeParticles('other json', { // $ExpectType Particles 588 'flightAnim.gif': buff, 589 }); 590} 591 592function pathEffectTests(CK: CanvasKit) { 593 const pe1 = CK.PathEffect.MakeCorner(2); // $ExpectType PathEffect | null 594 const pe2 = CK.PathEffect.MakeDash([2, 4]); // $ExpectType PathEffect 595 const pe3 = CK.PathEffect.MakeDash([2, 4, 6, 8], 10); // $ExpectType PathEffect 596 const pe4 = CK.PathEffect.MakeDiscrete(10, 2, 0); // $ExpectType PathEffect 597} 598 599function mallocTests(CK: CanvasKit) { 600 const mFoo = CK.Malloc(Float32Array, 5); 601 const mArray = mFoo.toTypedArray(); // $ExpectType TypedArray 602 mArray[3] = 1.7; 603 const mSubArray = mFoo.subarray(0, 2); // $ExpectType TypedArray 604 mSubArray[0] = 2; 605 CK.Free(mFoo); 606} 607 608function maskFilterTests(CK: CanvasKit) { 609 const mf = CK.MaskFilter.MakeBlur(CK.BlurStyle.Solid, 8, false); // $ExpectType MaskFilter 610} 611 612function matrixTests(CK: CanvasKit) { 613 const m33 = CK.Matrix; // less typing 614 const matrA = m33.identity(); // $ExpectType number[] 615 const matrB = m33.rotated(0.1); // $ExpectType number[] 616 const matrC = m33.rotated(0.1, 15, 20); // $ExpectType number[] 617 const matrD = m33.multiply(matrA, matrB); // $ExpectType number[] 618 const matrE = m33.multiply(matrA, matrB, matrC, matrB, matrA); // $ExpectType number[] 619 const matrF = m33.scaled(1, 2); // $ExpectType number[] 620 const matrG = m33.scaled(1, 2, 3, 4); // $ExpectType number[] 621 const matrH = m33.skewed(1, 2); // $ExpectType number[] 622 const matrI = m33.skewed(1, 2, 3, 4); // $ExpectType number[] 623 const matrJ = m33.translated(1, 2); // $ExpectType number[] 624 const matrK = m33.invert(matrJ); 625 626 const m44 = CK.M44; 627 const matr1 = m44.identity(); // $ExpectType number[] 628 const matr2 = m44.invert(matr1); 629 const matr3 = m44.lookat([1, 2, 3], [4, 5, 6], [7, 8, 9]); // $ExpectType number[] 630 const matr4 = m44.multiply(matr1, matr3); // $ExpectType number[] 631 const matr5 = m44.mustInvert(matr1); // $ExpectType number[] 632 const matr6 = m44.perspective(1, 8, 0.4); // $ExpectType number[] 633 const matr7 = m44.rc(matr6, 0, 3); // $ExpectType number 634 const matr8 = m44.rotated([2, 3, 4], -0.4); // $ExpectType number[] 635 const matr9 = m44.rotatedUnitSinCos([4, 3, 2], 0.9, 0.1); // $ExpectType number[] 636 const matr10 = m44.scaled([5, 5, 5]); // $ExpectType number[] 637 const matr11 = m44.setupCamera(CK.LTRBRect(1, 2, 3, 4), 0.4, { 638 eye: [0, 0, 1], 639 coa: [0, 0, 0], 640 up: [0, 1, 0], 641 near: 0.2, 642 far: 4, 643 angle: Math.PI / 12, 644 }); 645 const matr12 = m44.translated([3, 2, 1]); // $ExpectType number[] 646 const matr13 = m44.transpose([4, 5, 8]); // $ExpectType number[] 647} 648 649function pictureTests(CK: CanvasKit) { 650 const recorder = new CK.PictureRecorder(); // $ExpectType PictureRecorder 651 const canvas = recorder.beginRecording(CK.LTRBRect(0, 0, 100, 100)); // $ExpectType Canvas 652 const pic = recorder.finishRecordingAsPicture(); // $ExpectType SkPicture 653 const bytes = pic.serialize(); // $ExpectType Uint8Array | null 654 const pic2 = CK.MakePicture(bytes!); 655} 656 657function rectangleTests(CK: CanvasKit) { 658 const rectOne = CK.LTRBRect(5, 10, 20, 30); // $ExpectType Float32Array 659 const rectTwo = CK.XYWHRect(5, 10, 15, 20); // $ExpectType Float32Array 660 const iRectOne = CK.LTRBiRect(105, 110, 120, 130); // $ExpectType Int32Array 661 const iRectTwo = CK.XYWHiRect(105, 110, 15, 20); // $ExpectType Int32Array 662 const rrectOne = CK.RRectXY(rectOne, 3, 7); // $ExpectType Float32Array 663} 664 665function runtimeEffectTests(CK: CanvasKit) { 666 const rt = CK.RuntimeEffect.Make('not real sksl code'); // $ExpectType RuntimeEffect | null 667 if (!rt) return; 668 const rt2 = CK.RuntimeEffect.Make('not real sksl code', (err) => { 669 console.log(err); 670 }); 671 const someMatr = CK.Matrix.translated(2, 60); 672 const s1 = rt.makeShader([0, 1]); // $ExpectType Shader 673 const s2 = rt.makeShader([0, 1], true, someMatr); // $ExpectType Shader 674 const s3 = rt.makeShaderWithChildren([4, 5], true, [s1, s2]); // $ExpectType Shader 675 const s4 = rt.makeShaderWithChildren([4, 5], true, [s1, s2], someMatr); // $ExpectType Shader 676 const a = rt.getUniform(1); // $ExpectType SkSLUniform 677 const b = rt.getUniformCount(); // $ExpectType number 678 const c = rt.getUniformFloatCount(); // $ExpectType number 679 const d = rt.getUniformName(3); // $ExpectType string 680} 681 682function skottieTests(CK: CanvasKit, canvas?: Canvas) { 683 if (!canvas) return; 684 685 const anim = CK.MakeAnimation('some json'); // $ExpectType SkottieAnimation 686 const a = anim.duration(); // $ExpectType number 687 const b = anim.fps(); // $ExpectType number 688 const c = anim.version(); // $ExpectType string 689 const d = anim.size(); // $ExpectType Float32Array 690 anim.size(d); 691 const rect = anim.seek(0.5); 692 anim.seek(0.6, rect); 693 const rect2 = anim.seekFrame(12.3); 694 anim.seekFrame(12.3, rect2); 695 anim.render(canvas); 696 anim.render(canvas, rect); 697 698 const buff = new ArrayBuffer(10); 699 const mAnim = CK.MakeManagedAnimation('other json', { // $ExpectType ManagedSkottieAnimation 700 'flightAnim.gif': buff, 701 }); 702 mAnim.setColor('slider', CK.WHITE); 703 mAnim.setOpacity('slider', 0.8); 704 const e = mAnim.getMarkers(); // $ExpectType object[] 705 const f = mAnim.getColorProps(); // $ExpectType ColorProperty[] 706 const g = mAnim.getOpacityProps(); // $ExpectType OpacityProperty[] 707 const h = mAnim.getTextProps(); // $ExpectType TextProperty[] 708 709 const i = mAnim.setColor('foo', CK.RED); // $ExpectType boolean 710 const j = mAnim.setOpacity('foo', 0.5); // $ExpectType boolean 711 const k = mAnim.setText('foo', 'bar', 12); // $ExpectType boolean 712} 713 714function shaderTests(CK: CanvasKit) { 715 const s1 = CK.Shader.MakeColor([0.8, 0.2, 0.5, 0.9], // $ExpectType Shader 716 CK.ColorSpace.SRGB); 717 const s2 = CK.Shader.MakeBlend(CK.BlendMode.Src, s1, s1); // $ExpectType Shader 718 const s3 = CK.Shader.MakeLerp(0.3, s1, s2); // $ExpectType Shader 719 const s4 = CK.Shader.MakeLinearGradient(// $ExpectType Shader 720 [0, 0], [50, 100], 721 Float32Array.of( 722 0, 1, 0, 0.8, 723 1, 0, 0, 1, 724 0, 0, 1, 0.5, 725 ), 726 [0, 0.65, 1.0], 727 CK.TileMode.Mirror 728 ); 729 const s5 = CK.Shader.MakeLinearGradient(// $ExpectType Shader 730 [0, 0], [50, 100], 731 Float32Array.of( 732 0, 1, 0, 0.8, 733 1, 0, 0, 1, 734 0, 0, 1, 0.5, 735 ), 736 null, 737 CK.TileMode.Clamp, 738 CK.Matrix.rotated(Math.PI / 4, 0, 100), 739 1, 740 CK.ColorSpace.SRGB, 741 ); 742 const s6 = CK.Shader.MakeRadialGradient(// $ExpectType Shader 743 [0, 0], 50, 744 Float32Array.of( 745 0, 1, 0, 0.8, 746 1, 0, 0, 1, 747 0, 0, 1, 0.5, 748 ), 749 [0, 0.65, 1.0], 750 CK.TileMode.Decal, 751 ); 752 const s7 = CK.Shader.MakeRadialGradient(// $ExpectType Shader 753 [0, 0], 50, 754 Float32Array.of( 755 0, 1, 0, 0.8, 756 1, 0, 0, 1, 757 0, 0, 1, 0.5, 758 ), 759 null, 760 CK.TileMode.Clamp, 761 CK.Matrix.skewed(3, -3), 762 1, 763 CK.ColorSpace.SRGB, 764 ); 765 const s8 = CK.Shader.MakeTwoPointConicalGradient(// $ExpectType Shader 766 [0, 0], 20, 767 [50, 100], 60, 768 Float32Array.of( 769 0, 1, 0, 0.8, 770 1, 0, 0, 1, 771 0, 0, 1, 0.5, 772 ), 773 [0, 0.65, 1.0], 774 CK.TileMode.Mirror 775 ); 776 const s9 = CK.Shader.MakeTwoPointConicalGradient(// $ExpectType Shader 777 [0, 0], 20, 778 [50, 100], 60, 779 Float32Array.of( 780 0, 1, 0, 0.8, 781 1, 0, 0, 1, 782 0, 0, 1, 0.5, 783 ), 784 [0, 0.65, 1.0], 785 CK.TileMode.Mirror, 786 CK.Matrix.rotated(Math.PI / 4, 0, 100), 787 1, 788 CK.ColorSpace.SRGB, 789 ); 790 const s10 = CK.Shader.MakeSweepGradient(// $ExpectType Shader 791 0, 20, 792 Float32Array.of( 793 0, 1, 0, 0.8, 794 1, 0, 0, 1, 795 0, 0, 1, 0.5, 796 ), 797 [0, 0.65, 1.0], 798 CK.TileMode.Mirror 799 ); 800 const s11 = CK.Shader.MakeSweepGradient(// $ExpectType Shader 801 0, 20, 802 Float32Array.of( 803 0, 1, 0, 0.8, 804 1, 0, 0, 1, 805 0, 0, 1, 0.5, 806 ), 807 null, 808 CK.TileMode.Mirror, 809 CK.Matrix.rotated(Math.PI / 4, 0, 100), 810 1, 811 15, 275, // start, end angle in degrees. 812 CK.ColorSpace.SRGB, 813 ); 814 const s12 = CK.Shader.MakeFractalNoise(0.1, 0.05, 2, 0, 80, 80); // $ExpectType Shader 815 const s13 = CK.Shader.MakeTurbulence(0.1, 0.05, 2, 0, 80, 80); // $ExpectType Shader 816} 817 818function surfaceTests(CK: CanvasKit) { 819 const canvasEl = document.querySelector('canvas') as HTMLCanvasElement; 820 const surfaceOne = CK.MakeCanvasSurface(canvasEl)!; // $ExpectType Surface 821 const surfaceTwo = CK.MakeCanvasSurface('my_canvas')!; 822 const surfaceThree = CK.MakeSWCanvasSurface(canvasEl)!; // $ExpectType Surface 823 const surfaceFour = CK.MakeSWCanvasSurface('my_canvas')!; 824 const surfaceFive = CK.MakeWebGLCanvasSurface(canvasEl, // $ExpectType Surface 825 CK.ColorSpace.SRGB, { 826 majorVersion: 2, 827 preferLowPowerToHighPerformance: 1, 828 })!; 829 const surfaceSix = CK.MakeWebGLCanvasSurface('my_canvas', CK.ColorSpace.DISPLAY_P3, { 830 enableExtensionsByDefault: 2, 831 })!; 832 const surfaceSeven = CK.MakeSurface(200, 200)!; // $ExpectType Surface 833 const m = CK.Malloc(Uint8Array, 5 * 5 * 4); 834 const surfaceEight = CK.MakeRasterDirectSurface({ 835 width: 5, 836 height: 5, 837 colorType: CK.ColorType.RGBA_8888, 838 alphaType: CK.AlphaType.Premul, 839 colorSpace: CK.ColorSpace.SRGB, 840 }, m, 20); 841 842 surfaceOne.flush(); 843 const canvas = surfaceTwo.getCanvas(); // $ExpectType Canvas 844 const ii = surfaceThree.imageInfo(); // $ExpectType ImageInfo 845 const h = surfaceFour.height(); // $ExpectType number 846 const w = surfaceFive.width(); // $ExpectType number 847 const subsurface = surfaceOne.makeSurface(ii); // $ExpectType Surface 848 const isGPU = subsurface.reportBackendTypeIsGPU(); // $ExpectType boolean 849 const count = surfaceThree.sampleCnt(); // $ExpectType number 850 const img = surfaceFour.makeImageSnapshot([0, 3, 2, 5]); // $ExpectType Image 851 const img2 = surfaceSix.makeImageSnapshot(); // $ExpectType Image 852 853 surfaceSeven.delete(); 854 855 const ctx = CK.GetWebGLContext(canvasEl); // $ExpectType number 856 const grCtx = CK.MakeGrContext(ctx); 857 const surfaceNine = CK.MakeOnScreenGLSurface(grCtx, 100, 400, // $ExpectType Surface 858 CK.ColorSpace.ADOBE_RGB)!; 859 860 const rt = CK.MakeRenderTarget(grCtx, 100, 200); // $ExpectType Surface | null 861 const rt2 = CK.MakeRenderTarget(grCtx, { // $ExpectType Surface | null 862 width: 79, 863 height: 205, 864 colorType: CK.ColorType.RGBA_8888, 865 alphaType: CK.AlphaType.Premul, 866 colorSpace: CK.ColorSpace.SRGB, 867 }); 868} 869 870function textBlobTests(CK: CanvasKit, font?: Font, path?: Path) { 871 if (!font || !path) return; 872 const tb = CK.TextBlob; // less typing 873 const ids = font.getGlyphIDs('abc'); 874 const mXforms = CK.Malloc(Float32Array, ids.length * 4); 875 876 const blob = tb.MakeFromGlyphs([5, 6, 7, 8], font); // $ExpectType TextBlob 877 const blob1 = tb.MakeFromGlyphs(ids, font); // $ExpectType TextBlob 878 const blob2 = tb.MakeFromRSXform('cdf', mXforms, font); // $ExpectType TextBlob 879 const blob3 = tb.MakeFromRSXform('c', [-1, 0, 2, 3], font); // $ExpectType TextBlob 880 const blob4 = tb.MakeFromRSXformGlyphs([3, 6], mXforms, font); // $ExpectType TextBlob 881 const blob5 = tb.MakeFromRSXformGlyphs(ids, [-1, 0, 2, 3], font); // $ExpectType TextBlob 882 const blob6 = tb.MakeFromText('xyz', font); // $ExpectType TextBlob 883 const blob7 = tb.MakeOnPath('tuv', path, font); // $ExpectType TextBlob 884 const blob8 = tb.MakeOnPath('tuv', path, font, 10); // $ExpectType TextBlob 885} 886 887function vectorTests(CK: CanvasKit) { 888 const a = [1, 2, 3]; 889 const b = [4, 5, 6]; 890 891 const vec = CK.Vector; // less typing 892 const v1 = vec.add(a, b); // $ExpectType VectorN 893 const v2 = vec.cross(a, b); // $ExpectType Vector3 894 const n1 = vec.dist(a, b); // $ExpectType number 895 const n2 = vec.dot(a, b); // $ExpectType number 896 const n3 = vec.length(a); // $ExpectType number 897 const n4 = vec.lengthSquared(a); // $ExpectType number 898 const v3 = vec.mulScalar(a, 10); // $ExpectType VectorN 899 const v4 = vec.normalize(a); // $ExpectType VectorN 900 const v5 = vec.sub(a, b); // $ExpectType VectorN 901} 902 903function verticesTests(CK: CanvasKit) { 904 const points = [ 905 70, 170, 40, 90, 130, 150, 100, 50, 906 225, 150, 225, 60, 310, 180, 330, 100, 907 ]; 908 const textureCoordinates = [ 909 0, 240, 0, 0, 80, 240, 80, 0, 910 160, 240, 160, 0, 240, 240, 240, 0, 911 ]; 912 const vertices = CK.MakeVertices(CK.VertexMode.TrianglesStrip, // $ExpectType Vertices 913 points, textureCoordinates); 914 915 const points2 = new Float32Array(points); 916 // 1d float color array 917 const colors = Float32Array.of( 918 1, 0, 0, 1, // red 919 0, 1, 0, 1, // green 920 0, 0, 1, 1, // blue 921 1, 0, 1, 1); // purple 922 const vertices2 = CK.MakeVertices(CK.VertexMode.TriangleFan, 923 points2, null, colors, null, true); 924 925 const rect = vertices.bounds(); // $ExpectType Float32Array 926 vertices.bounds(rect); 927 const id = vertices.uniqueID(); // $ExpectType number 928} 929