AuroraMiddleware/skia2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[canvaskit] Add docs/types for Skottie and Particles

Browse Source 
This should be it. Caught up with 0.18.0

Change-Id: Ibe846d756601e42e315ab510807abd4bbd9cf30d
Bug: skia:10717
Reviewed-on: https://skia-review.googlesource.com/c/skia/+/322323
Reviewed-by: Kevin Lubick <kjlubick@google.com>
This commit is contained in:
Kevin Lubick 2020-10-06 08:34:46 -04:00
parent c488fd3d01
commit aaa2bbe84c
2 changed files with 230 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
modules/canvaskit/canvaskit/types/canvaskit-wasm-tests.ts
View File

@ -4,15 +4,10 @@ import CanvasKitInit from "canvaskit-wasm/bin/canvaskit";
import {
CanvasKit,
Paragraph,
PathCommand,
PositionWithAffinity,
PosTan,
ShapedText,
SkAnimatedImage,
SkCanvas,
SkColorFilter,
SkContourMeasure,
SkContourMeasureIter,
SkFont,
SkFontMgr,
SkImage,
@ -23,18 +18,10 @@ import {
SkPath,
SkPathEffect,
SkPicture,
SkPictureRecorder,
SkPoint,
SkShader,
SkSurface,
SkTextBlob,
SkTypeface,
SkVertices,
TonalColorsOutput,
TypedArray,
URange,
Vector3,
VectorN,
} from "canvaskit-wasm";
CanvasKitInit({locateFile: (file: string) => '/node_modules/canvaskit/bin/' + file}).then((CK: CanvasKit) => {
@ -53,13 +40,15 @@ CanvasKitInit({locateFile: (file: string) => '/node_modules/canvaskit/bin/' + fi
maskFilterTests(CK);
matrixTests(CK);
paintTests(CK);
paragraphBuilderTests(CK);
paragraphTests(CK);
paragraphBuilderTests(CK);
particlesTests(CK);
pathEffectTests(CK);
pathTests(CK);
pictureTests(CK);
rectangleTests(CK);
runtimeEffectTests(CK);
skottieTests(CK);
shaderTests(CK);
shapedTextTests(CK);
surfaceTests(CK);
@ -515,6 +504,32 @@ function paragraphBuilderTests(CK: CanvasKit, fontMgr?: SkFontMgr, paint?: SkPai
builder2.addPlaceholder(10, 20, CK.PlaceholderAlignment.Top, CK.TextBaseline.Ideographic, 3);
}
function particlesTests(CK: CanvasKit, canvas?: SkCanvas) {
if (!canvas) return;
const par = CK.MakeParticles('some json'); // $ExpectType Particles
par.draw(canvas);
par.effectUniforms()[0] = 1.2;
const a = par.getEffectUniform(1); // $ExpectType ParticlesUniform
const b = par.getEffectUniformCount(); // $ExpectType number
const c = par.getEffectUniformFloatCount(); // $ExpectType number
const d = par.getEffectUniformName(3); // $ExpectType string
const e = par.getParticleUniform(3); // $ExpectType ParticlesUniform
const f = par.getParticleUniformCount(); // $ExpectType number
const g = par.getParticleUniformFloatCount(); // $ExpectType number
const h = par.getParticleUniformName(3); // $ExpectType string
par.particleUniforms()[2] = 4.5;
par.setPosition([3, 5]);
par.setRate(3);
par.start(0, true);
par.update(2);
const buff = new ArrayBuffer(10);
const par2 = CK.MakeParticles('other json', { // $ExpectType Particles
'flightAnim.gif': buff,
});
}
function pathEffectTests(CK: CanvasKit) {
const pe1 = CK.SkPathEffect.MakeCorner(2); // $ExpectType SkPathEffect | null
const pe2 = CK.SkPathEffect.MakeDash([2, 4]); // $ExpectType SkPathEffect
@ -599,6 +614,32 @@ function runtimeEffectTests(CK: CanvasKit) {
const s4 = rt.makeShaderWithChildren([4, 5], true, [s1, s2], someMatr); // $ExpectType SkShader
}
function skottieTests(CK: CanvasKit, canvas?: SkCanvas) {
if (!canvas) return;
const anim = CK.MakeAnimation('some json'); // $ExpectType SkottieAnimation
const a = anim.duration(); // $ExpectType number
const b = anim.fps(); // $ExpectType number
const c = anim.version(); // $ExpectType string
const d = anim.size(); // $ExpectType SkPoint
const rect = anim.seek(0.5);
anim.seek(0.6, rect);
const rect2 = anim.seekFrame(12.3);
anim.seekFrame(12.3, rect2);
anim.render(canvas);
anim.render(canvas, rect);
const buff = new ArrayBuffer(10);
const mAnim = CK.MakeManagedAnimation('other json', { // $ExpectType ManagedSkottieAnimation
'flightAnim.gif': buff,
});
mAnim.setColor('slider', CK.WHITE);
mAnim.setOpacity('slider', 0.8);
const e = mAnim.getMarkers(); // $ExpectType object[]
const f = mAnim.getColorProps(); // $ExpectType object[]
const g = mAnim.getOpacityProps(); // $ExpectType object[]
}
function shaderTests(CK: CanvasKit) {
const s1 = CK.SkShader.Color([0.8, 0.2, 0.5, 0.9], // $ExpectType SkShader
CK.SkColorSpace.SRGB);

175
modules/canvaskit/canvaskit/types/index.d.ts vendored
View File

@ -331,6 +331,32 @@ export interface CanvasKit {
colors?: Float32Array | ColorIntArray | null, indices?: number[] | null,
isVolatile?: boolean): SkVertices;
/**
* Returns a Skottie animation built from the provided json string.
* Requires that Skottie be compiled into CanvasKit.
* @param json
*/
MakeAnimation(json: string): SkottieAnimation;
/**
* Returns a managed Skottie animation built from the provided json string and assets.
* Requires that Skottie be compiled into CanvasKit.
* @param json
* @param assets - a dictionary of named blobs: { key: ArrayBuffer, ... }
* @param filterPrefix - an optional string acting as a name filter for selecting "interesting"
* Lottie properties (surfaced in the embedded player controls)
*/
MakeManagedAnimation(json: string, assets?: Record<string, ArrayBuffer>,
filterPrefix?: string): ManagedSkottieAnimation;
/**
* Returns a Particles effect built from the provided json string and assets.
* Requires that Particles be compiled into CanvasKit
* @param json
* @param assets
*/
MakeParticles(json: string, assets?: Record<string, ArrayBuffer>): Particles;
/**
* Returns the underlying data from SkData as a Uint8Array.
* @param data
@ -566,6 +592,14 @@ export interface MallocObj {
toTypedArray(): TypedArray;
}
export interface ManagedSkottieAnimation extends SkottieAnimation {
setColor(key: string, color: InputColor): void;
setOpacity(key: string, opacity: number): void;
getMarkers(): object[];
getColorProps(): object[];
getOpacityProps(): object[];
}
/**
* See Paragraph.h for more information on this class. This is only available if Paragraph has
* been compiled in.
@ -674,6 +708,105 @@ export interface PositionWithAffinity {
affinity: Affinity;
}
/**
* See SkParticleEffect.h for more details.
*/
export interface Particles extends EmbindObject<Particles> {
/**
* Draws the current state of the particles on the given canvas.
* @param canvas
*/
draw(canvas: SkCanvas): void;
/**
* Returns a Float32Array bound to the WASM memory of these uniforms. Changing these
* floats will change the corresponding uniforms instantly.
*/
effectUniforms(): Float32Array;
/**
* Returns the nth uniform from the effect.
* @param index
*/
getEffectUniform(index: number): ParticlesUniform;
/**
* Returns the number of uniforms on the effect.
*/
getEffectUniformCount(): number;
/**
* Returns the number of float uniforms on the effect.
*/
getEffectUniformFloatCount(): number;
/**
* Returns the name of the nth effect uniform.
* @param index
*/
getEffectUniformName(index: number): string;
/**
* Returns the nth uniform on the particles.
* @param index
*/
getParticleUniform(index: number): ParticlesUniform;
/**
* Returns the count of uniforms on the particles.
*/
getParticleUniformCount(): number;
/**
* Returns the number of float uniforms on the particles.
*/
getParticleUniformFloatCount(): number;
/**
* Returns the name of the nth particle uniform.
* @param index
*/
getParticleUniformName(index: number): string;
/**
* Returns a Float32Array bound to the WASM memory of these uniforms. Changing these
* floats will change the corresponding uniforms instantly.
*/
particleUniforms(): Float32Array;
/**
* Sets the base position of the effect.
* @param point
*/
setPosition(point: SkPoint): void;
/**
* Sets the base rate of the effect.
* @param rate
*/
setRate(rate: number): void;
/**
* Starts playing the effect.
* @param now
* @param looping
*/
start(now: number, looping: boolean): void;
/**
* Updates the effect using the new time.
* @param now
*/
update(now: number): void;
}
export interface ParticlesUniform {
columns: number;
rows: number;
/** The index into the uniforms array that this uniform begins. */
slot: number;
}
/**
* A simple wrapper around SkTextBlob and the simple Text Shaper.
*/
@ -2181,6 +2314,48 @@ export interface SkVertices extends EmbindObject<SkVertices> {
uniqueID(): number;
}
export interface SkottieAnimation extends EmbindObject<SkottieAnimation> {
/**
* Returns the animation duration in seconds.
*/
duration(): number;
/**
* Returns the animation frame rate (frames / second).
*/
fps(): number;
/**
* Draws current animation frame. Must call seek or seekFrame first.
* @param canvas
* @param dstRect
*/
render(canvas: SkCanvas, dstRect?: InputRect): void;
/**
* [deprecated] - use seekFrame
* @param t - value from [0.0, 1.0]; 0 is first frame, 1 is final frame.
* @param damageRect - will copy damage frame into this if provided.
*/
seek(t: number, damageRect?: SkRect): SkRect;
/**
* Update the animation state to match |t|, specified as a frame index
* i.e. relative to duration() * fps().
*
* Returns the rectangle that was affected by this animation.
*
* @param frame - Fractional values are allowed and meaningful - e.g.
* 0.0 -> first frame
* 1.0 -> second frame
* 0.5 -> halfway between first and second frame
* @param damageRect - will copy damage frame into this if provided.
*/
seekFrame(frame: number, damageRect?: SkRect): SkRect;
size(): SkPoint;
version(): string;
}
/**
* Options used for SkPath.stroke(). If an option is omitted, a sensible default will be used.
*/