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