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

[canvaskit] Add docs/types for Paint and Filters/Effects

Browse Source 
This also includes matrices (which I'm reminded I want to test with
TypedArrays and make optional).

Bug: skia:10717
Change-Id: I0f6565a46b766c1f81c28dfc1229d403bff32e69
Reviewed-on: https://skia-review.googlesource.com/c/skia/+/321118
Reviewed-by: Nathaniel Nifong <nifong@google.com>
This commit is contained in:
Kevin Lubick 2020-09-30 15:39:48 -04:00
parent 97440de4b9
commit 2fd08e651c
4 changed files with 773 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
include/core/SkPaint.h
View File

@ -249,7 +249,7 @@ public:
SkColor getColor() const { return fColor4f.toSkColor(); }
/** Retrieves alpha and RGB, unpremultiplied, as four floating point values. RGB are
are extended sRGB values (sRGB gamut, and encoded with the sRGB transfer function).
extended sRGB values (sRGB gamut, and encoded with the sRGB transfer function).
@return unpremultiplied RGBA
*/

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

@ -7,13 +7,18 @@ import {
ShapedText,
SkAnimatedImage,
SkCanvas,
SkImage,
SkImageInfo,
SkColorFilter,
SkFont,
SkSurface,
SkImage,
SkImageFilter,
SkImageInfo,
SkMaskFilter,
SkPaint,
SkPath,
SkPathEffect,
SkPicture,
SkShader,
SkSurface,
SkTextBlob,
SkVertices,
TypedArray,
@ -22,8 +27,14 @@ import {
CanvasKitInit({locateFile: (file: string) => '/node_modules/canvaskit/bin/' + file}).then((CK: CanvasKit) => {
canvasTests(CK);
colorTests(CK);
colorFilterTests(CK);
imageTests(CK);
imageFilterTests(CK);
pathEffectTests(CK);
mallocTests(CK);
maskFilterTests(CK);
matrixTests(CK);
paintTests(CK);
surfaceTests(CK);
rectangleTests(CK);
});
@ -37,7 +48,9 @@ function canvasTests(CK: CanvasKit, canvas?: SkCanvas, paint?: SkPaint, path?: S
skp?: SkPicture, font?: SkFont, shapedText?: ShapedText,
textBlob?: SkTextBlob, verts?: SkVertices, imageInfo?: SkImageInfo) {
if (!canvas || !paint || !path || !img || !aImg || !para || !skp || !font ||
!shapedText || !textBlob || !verts || !imageInfo) return;
!shapedText || !textBlob || !verts || !imageInfo) {
return;
}
const someColor = [0.9, 0.8, 0.7, 0.6]; // Making sure arrays are accepted as colors.
const someRect = [4, 3, 2, 1]; // Making sure arrays are accepted as rects.
// Making sure arrays are accepted as rrects.
@ -88,7 +101,7 @@ function canvasTests(CK: CanvasKit, canvas?: SkCanvas, paint?: SkPaint, path?: S
const matrOne = canvas.findMarkedCTM('thing'); // $ExpectType Float32Array | null
const matrTwo = canvas.getLocalToDevice(); // $ExpectType Float32Array
const sc = canvas.getSaveCount(); // $ExpectType number
const matrThree = canvas.getTotalMatrix(); // $ExpectType Float32Array
const matrThree = canvas.getTotalMatrix(); // $ExpectType number[]
const surface = canvas.makeSurface(imageInfo); // $ExpectType SkSurface | null
canvas.markCTM('more ctm');
const pixels = canvas.readPixels(0, 1, 2, 3); // $ExpectType Uint8Array
@ -120,6 +133,24 @@ function colorTests(CK: CanvasKit) {
const alphaChanged = CK.multiplyByAlpha(colorOne, 0.1);
}
function colorFilterTests(CK: CanvasKit) {
const cf = CK.SkColorFilter; // less typing
const filterOne = cf.MakeBlend(CK.CYAN, CK.BlendMode.ColorBurn); // $ExpectType SkColorFilter
const filterTwo = cf.MakeLinearToSRGBGamma(); // $ExpectType SkColorFilter
const filterThree = cf.MakeSRGBToLinearGamma(); // $ExpectType SkColorFilter
const filterFour = cf.MakeCompose(filterOne, filterTwo); // $ExpectType SkColorFilter
const filterFive = cf.MakeLerp(0.7, filterThree, filterFour); // $ExpectType SkColorFilter
const r = CK.SkColorMatrix.rotated(0, .707, -.707); // $ExpectType Float32Array
const b = CK.SkColorMatrix.rotated(2, .5, .866);
const s = CK.SkColorMatrix.scaled(0.9, 1.5, 0.8, 0.8);
let cm = CK.SkColorMatrix.concat(r, s);
cm = CK.SkColorMatrix.concat(cm, b);
CK.SkColorMatrix.postTranslate(cm, 20, 0, -10, 0);
const filterSix = CK.SkColorFilter.MakeMatrix(cm); // $ExpectType SkColorFilter
}
function imageTests(CK: CanvasKit, img?: SkImage) {
if (!img) return;
const dOne = img.encodeToData(); // $ExpectType SkData
@ -135,6 +166,67 @@ function imageTests(CK: CanvasKit, img?: SkImage) {
alphaType: CK.AlphaType.Unpremul,
colorSpace: CK.SkColorSpace.SRGB,
}, 85, 1000);
img.delete();
}
function imageFilterTests(CK: CanvasKit, colorFilter?: SkColorFilter) {
if (!colorFilter) return;
const imgf = CK.SkImageFilter; // less typing
const filter = imgf.MakeBlur(2, 4, CK.TileMode.Mirror, null); // $ExpectType SkImageFilter
const filter1 = imgf.MakeBlur(2, 4, CK.TileMode.Decal, filter); // $ExpectType SkImageFilter
const filter2 = imgf.MakeColorFilter(colorFilter, null); // $ExpectType SkImageFilter
const filter3 = imgf.MakeColorFilter(colorFilter, filter); // $ExpectType SkImageFilter
const filter4 = imgf.MakeCompose(null, filter2); // $ExpectType SkImageFilter
const filter5 = imgf.MakeCompose(filter3, null); // $ExpectType SkImageFilter
const filter6 = imgf.MakeCompose(filter4, filter2); // $ExpectType SkImageFilter
const filter7 = imgf.MakeMatrixTransform(CK.SkMatrix.scaled(2, 3, 10, 10),
CK.FilterQuality.High, null);
const filter8 = imgf.MakeMatrixTransform(CK.SkM44.identity(),
CK.FilterQuality.None, filter6);
}
function paintTests(CK: CanvasKit, colorFilter?: SkColorFilter, imageFilter?: SkImageFilter,
maskFilter?: SkMaskFilter, pathEffect?: SkPathEffect, shader?: SkShader) {
if (!colorFilter || !colorFilter || !imageFilter || !maskFilter || !pathEffect || !shader) {
return;
}
const paint = new CK.SkPaint(); // $ExpectType SkPaint
const newPaint = paint.copy(); // $ExpectType SkPaint
const bm = paint.getBlendMode();
const color = paint.getColor(); // $ExpectType Float32Array
const fq = paint.getFilterQuality();
const sc = paint.getStrokeCap();
const sj = paint.getStrokeJoin();
const limit = paint.getStrokeMiter(); // $ExpectType number
const width = paint.getStrokeWidth(); // $ExpectType number
paint.setAlphaf(0.8);
paint.setAntiAlias(true);
paint.setBlendMode(bm);
paint.setColor(CK.RED);
paint.setColor([0, 0, 1.2, 0.5], CK.SkColorSpace.DISPLAY_P3);
paint.setColorComponents(0, 0, 0.9, 1.0);
paint.setColorComponents(0, 0, 1.2, 0.5, CK.SkColorSpace.DISPLAY_P3);
paint.setColorFilter(colorFilter);
paint.setColorInt(CK.ColorAsInt(20, 30, 40));
paint.setColorInt(CK.ColorAsInt(20, 30, 40), CK.SkColorSpace.SRGB);
paint.setFilterQuality(CK.FilterQuality.Medium);
paint.setImageFilter(imageFilter);
paint.setMaskFilter(maskFilter);
paint.setPathEffect(pathEffect);
paint.setShader(shader);
paint.setStrokeCap(CK.StrokeCap.Round);
paint.setStrokeJoin(CK.StrokeJoin.Miter);
paint.setStrokeMiter(10);
paint.setStrokeWidth(20);
paint.setStyle(CK.PaintStyle.Fill);
paint.delete();
}
function pathEffectTests(CK: CanvasKit) {
const pe1 = CK.SkPathEffect.MakeCorner(2); // $ExpectType SkPathEffect | null
const pe2 = CK.SkPathEffect.MakeDash([2, 4]); // $ExpectType SkPathEffect
const pe3 = CK.SkPathEffect.MakeDash([2, 4, 6, 8], 10); // $ExpectType SkPathEffect
const pe4 = CK.SkPathEffect.MakeDiscrete(10, 2, 0); // $ExpectType SkPathEffect
}
function mallocTests(CK: CanvasKit) {
@ -146,6 +238,47 @@ function mallocTests(CK: CanvasKit) {
CK.Free(mFoo);
}
function maskFilterTests(CK: CanvasKit) {
const mf = CK.SkMaskFilter.MakeBlur(CK.BlurStyle.Solid, 8, false); // $ExpectType SkMaskFilter
}
function matrixTests(CK: CanvasKit) {
const m33 = CK.SkMatrix; // less typing
const matrA = m33.identity(); // $ExpectType number[]
const matrB = m33.rotated(0.1); // $ExpectType number[]
const matrC = m33.rotated(0.1, 15, 20); // $ExpectType number[]
const matrD = m33.multiply(matrA, matrB); // $ExpectType number[]
const matrE = m33.multiply(matrA, matrB, matrC, matrB, matrA); // $ExpectType number[]
const matrF = m33.scaled(1, 2); // $ExpectType number[]
const matrG = m33.scaled(1, 2, 3, 4); // $ExpectType number[]
const matrH = m33.skewed(1, 2); // $ExpectType number[]
const matrI = m33.skewed(1, 2, 3, 4); // $ExpectType number[]
const matrJ = m33.translated(1, 2); // $ExpectType number[]
const matrK = m33.invert(matrJ);
const m44 = CK.SkM44;
const matr1 = m44.identity(); // $ExpectType number[]
const matr2 = m44.invert(matr1);
const matr3 = m44.lookat([1, 2, 3], [4, 5, 6], [7, 8, 9]); // $ExpectType number[]
const matr4 = m44.multiply(matr1, matr3); // $ExpectType number[]
const matr5 = m44.mustInvert(matr1); // $ExpectType number[]
const matr6 = m44.perspective(1, 8, 0.4); // $ExpectType number[]
const matr7 = m44.rc(matr6, 0, 3); // $ExpectType number
const matr8 = m44.rotated([2, 3, 4], -0.4); // $ExpectType number[]
const matr9 = m44.rotatedUnitSinCos([4, 3, 2], 0.9, 0.1); // $ExpectType number[]
const matr10 = m44.scaled([5, 5, 5]); // $ExpectType number[]
const matr11 = m44.setupCamera(CK.LTRBRect(1, 2, 3, 4), 0.4, {
eye: [0, 0, 1],
coa: [0, 0, 0],
up: [0, 1, 0],
near: 0.2,
far: 4,
angle: Math.PI / 12,
});
const matr12 = m44.translated([3, 2, 1]); // $ExpectType number[]
const matr13 = m44.transpose([4, 5, 8]); // $ExpectType number[]
}
function surfaceTests(CK: CanvasKit) {
const canvasEl = document.querySelector('canvas') as HTMLCanvasElement;
const surfaceOne = CK.MakeCanvasSurface(canvasEl)!; // $ExpectType SkSurface

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

@ -1,5 +1,11 @@
// Minimum TypeScript Version: 3.7
export interface CanvasKitInitOptions {
locateFile: (path: string) => string;
/**
* This callback will be invoked when the CanvasKit loader needs to fetch a file (e.g.
* the blob of WASM code). The correct url prefix should be applied.
* @param file - the name of the file that is about to be loaded.
*/
locateFile(file: string): string;
}
export interface CanvasKit {
@ -198,15 +204,36 @@ export interface CanvasKit {
*/
getSkDataBytes(data: SkData): Uint8Array;
// Constructors, i.e. things made with `new CanvasKit.Foo()`;
readonly SkPaint: SkPaintConstructor;
// Factories, i.e. things made with CanvasKit.Foo.MakeTurboEncapsulator()
readonly SkColorFilter: SkColorFilterFactory;
readonly SkImageFilter: SkImageFilterFactory;
readonly SkMaskFilter: SkMaskFilterFactory;
readonly SkPathEffect: SkPathEffectFactory;
// Misc
readonly SkColorMatrix: ColorMatrixHelpers;
readonly SkMatrix: Matrix3x3Helpers;
readonly SkM44: Matrix4x4Helpers;
// Enums
readonly AlphaType: AlphaTypeEnumValues;
readonly BlendMode: BlendModeEnumValues;
readonly BlurStyle: BlurStyleEnumValues;
readonly ClipOp: ClipOpEnumValues;
readonly ColorType: ColorTypeEnumValues;
readonly ImageFormat: ImageFormatEnumValues;
readonly FilterQuality: FilterQualityEnumValues;
readonly PaintStyle: PaintStyleEnumValues;
readonly PointMode: PointModeEnumValues;
readonly StrokeCap: StrokeCapEnumValues;
readonly StrokeJoin: StrokeJoinEnumValues;
readonly SkColorSpace: ColorSpaceEnumValues;
readonly TileMode: TileModeEnumValues;
// Constants
readonly TRANSPARENT: SkColor;
readonly BLACK: SkColor;
readonly WHITE: SkColor;
@ -218,6 +245,24 @@ export interface CanvasKit {
readonly MAGENTA: SkColor;
}
export interface Camera {
/** a 3d point locating the camera. */
eye: Vector3;
/** center of attention - the 3d point the camera is looking at. */
coa: Vector3;
/**
* A unit vector pointing the cameras up direction. Note that using only eye and coa
* would leave the roll of the camera unspecified.
*/
up: Vector3;
/** near clipping plane distance */
near: number;
/** far clipping plane distance */
far: number;
/** field of view in radians */
angle: angleInRadians;
}
/**
* CanvasKit is built with Emscripten and Embind. Embind adds the following methods to all objects
* that are exposed with it.
@ -279,27 +324,27 @@ export interface MallocObj {
* .toTypedArray().subarray() except the returned TypedArray can also be passed into an API
* and not cause an additional copy.
*/
subarray: (start: number, end: number) => TypedArray;
subarray(start: number, end: number): TypedArray;
/**
* Return a read/write view of the memory. Do not cache the TypedArray this returns, it may be
* invalidated if the WASM heap is resized. If this TypedArray is passed into a CanvasKit API,
* it will not be copied again, only the pointer will be re-used.
*/
toTypedArray: () => TypedArray;
toTypedArray(): TypedArray;
}
/**
* See Paragraph.h for more information on this class. This is only available if Paragraph has
* been compiled in.
*/
export interface Paragraph extends EmbindObject<SkAnimatedImage> {
export interface Paragraph extends EmbindObject<Paragraph> {
todo: number; // TODO(kjlubick)
}
/**
* A simple wrapper around SkTextBlob and the simple Text Shaper.
*/
export interface ShapedText extends EmbindObject<SkAnimatedImage> {
export interface ShapedText extends EmbindObject<ShapedText> {
/**
* Return the bounding area for the given text.
* @param outputArray - if provided, the bounding box will be copied into this array instead of
@ -567,7 +612,7 @@ export interface SkCanvas extends EmbindObject<SkCanvas> {
* @param spotColor - The color of the spot shadow.
* @param flags - See SkShadowFlags.h; 0 means use default options.
*/
drawShadow(path: SkPath, zPlaneParams: Point3, lightPos: Point3, lightRadius: number,
drawShadow(path: SkPath, zPlaneParams: Vector3, lightPos: Vector3, lightRadius: number,
ambientColor: InputColor, spotColor: InputColor, flags: number): void;
/**
@ -628,7 +673,7 @@ export interface SkCanvas extends EmbindObject<SkCanvas> {
* Legacy version of getLocalToDevice(), which strips away any Z information, and
* just returns a 3x3 version.
*/
getTotalMatrix(): Matrix3x3;
getTotalMatrix(): number[];
/**
* Creates SkSurface matching info and props, and associates it with SkCanvas.
@ -737,10 +782,15 @@ export interface SkCanvas extends EmbindObject<SkCanvas> {
colorSpace?: ColorSpace): boolean;
}
/**
* See SkColorFilter.h for more on this class. The objects returned are opaque.
*/
export type SkColorFilter = EmbindObject<SkColorFilter>;
/**
* Represents a blob of memory. See SkData.h for more on this class.
*/
export interface SkData extends EmbindObject<SkImage> {
export interface SkData extends EmbindObject<SkData> {
/**
* Return the number of bytes in this container.
*/
@ -750,7 +800,7 @@ export interface SkData extends EmbindObject<SkImage> {
/**
* See SkFont.h for more on this class.
*/
export interface SkFont extends EmbindObject<SkImage> {
export interface SkFont extends EmbindObject<SkFont> {
todo: number; // TODO(kjlubick)
}
@ -801,6 +851,11 @@ export interface SkImage extends EmbindObject<SkImage> {
width(): number;
}
/**
* See SkImageFilter.h for more on this class. The objects returned are opaque.
*/
export type SkImageFilter = EmbindObject<SkImageFilter>;
export interface SkImageInfo {
alphaType: AlphaType;
colorSpace: ColorSpace;
@ -809,11 +864,173 @@ export interface SkImageInfo {
width: number;
}
/**
* See SkMaskFilter.h for more on this class. The objects returned are opaque.
*/
export type SkMaskFilter = EmbindObject<SkMaskFilter>;
/**
* See SkPaint.h for more information on this class.
*/
export interface SkPaint extends EmbindObject<SkPaint> {
todo: number; // TODO(kjlubick)
/**
* Returns a copy of this paint.
*/
copy(): SkPaint;
/**
* Returns the blend mode, that is, the mode used to combine source color
* with destination color.
*/
getBlendMode(): BlendMode;
/**
* Retrieves the alpha and RGB unpremultiplied. RGB are extended sRGB values
* (sRGB gamut, and encoded with the sRGB transfer function).
*/
getColor(): SkColor;
/**
* Returns the image filtering level.
* [deprecated] This will be removed in an upcoming release.
*/
getFilterQuality(): FilterQuality;
/**
* Returns the geometry drawn at the beginning and end of strokes.
*/
getStrokeCap(): StrokeCap;
/**
* Returns the geometry drawn at the corners of strokes.
*/
getStrokeJoin(): StrokeJoin;
/**
* Returns the limit at which a sharp corner is drawn beveled.
*/
getStrokeMiter(): number;
/**
* Returns the thickness of the pen used to outline the shape.
*/
getStrokeWidth(): number;
/**
* Replaces alpha, leaving RGBA unchanged. 0 means fully transparent, 1.0 means opaque.
* @param alpha
*/
setAlphaf(alpha: number): void;
/**
* Requests, but does not require, that edge pixels draw opaque or with
* partial transparency.
* @param aa
*/
setAntiAlias(aa: boolean): void;
/**
* Sets the blend mode that is, the mode used to combine source color
* with destination color.
* @param mode
*/
setBlendMode(mode: BlendMode): void;
/**
* Sets alpha and RGB used when stroking and filling. The color is four floating
* point values, unpremultiplied. The color values are interpreted as being in
* the provided colorSpace.
* @param color
* @param colorSpace - defaults to sRGB
*/
setColor(color: InputColor, colorSpace?: ColorSpace): void;
/**
* Sets alpha and RGB used when stroking and filling. The color is four floating
* point values, unpremultiplied. The color values are interpreted as being in
* the provided colorSpace.
* @param r
* @param g
* @param b
* @param a
* @param colorSpace - defaults to sRGB
*/
setColorComponents(r: number, g: number, b: number, a: number, colorSpace?: ColorSpace): void;
/**
* Sets the current color filter, replacing the existing one if there was one.
* @param filter
*/
setColorFilter(filter: SkColorFilter): void;
/**
* Sets the color used when stroking and filling. The color values are interpreted as being in
* the provided colorSpace.
* @param color
* @param colorSpace - defaults to sRGB.
*/
setColorInt(color: SkColorInt, colorSpace?: ColorSpace): void;
/**
* Sets the image filtering level.
* [deprecated] This will be removed in an upcoming release.
* @param quality
*/
setFilterQuality(quality: FilterQuality): void;
/**
* Sets the current image filter, replacing the existing one if there was one.
* @param filter
*/
setImageFilter(filter: SkImageFilter): void;
/**
* Sets the current mask filter, replacing the existing one if there was one.
* @param filter
*/
setMaskFilter(filter: SkMaskFilter): void;
/**
* Sets the current path effect, replacing the existing one if there was one.
* @param effect
*/
setPathEffect(effect: SkPathEffect): void;
/**
* Sets the current shader, replacing the existing one if there was one.
* @param shader
*/
setShader(shader: SkShader): void;
/**
* Sets the geometry drawn at the beginning and end of strokes.
* @param cap
*/
setStrokeCap(cap: StrokeCap): void;
/**
* Sets the geometry drawn at the corners of strokes.
* @param join
*/
setStrokeJoin(join: StrokeJoin): void;
/**
* Sets the limit at which a sharp corner is drawn beveled.
* @param limit
*/
setStrokeMiter(limit: number): void;
/**
* Sets the thickness of the pen used to outline the shape.
* @param width
*/
setStrokeWidth(width: number): void;
/**
* Sets whether the geometry is filled or stroked.
* @param style
*/
setStyle(style: PaintStyle): void;
}
/**
@ -823,6 +1040,11 @@ export interface SkPath extends EmbindObject<SkPath> {
todo: number; // TODO(kjlubick)
}
/**
* See SkPathEffect.h for more on this class. The objects returned are opaque.
*/
export type SkPathEffect = EmbindObject<SkPathEffect>;
/**
* See SkPicture.h for more information on this class.
*
@ -910,14 +1132,14 @@ export interface SkSurface extends EmbindObject<SkSurface> {
/**
* See SkTextBlob.h for more on this class.
*/
export interface SkTextBlob extends EmbindObject<SkImage> {
export interface SkTextBlob extends EmbindObject<SkTextBlob> {
todo: number; // TODO(kjlubick)
}
/**
* See SkVertices.h for more on this class.
*/
export interface SkVertices extends EmbindObject<SkImage> {
export interface SkVertices extends EmbindObject<SkVertices> {
todo: number; // TODO(kjlubick)
}
@ -941,12 +1163,361 @@ export interface WebGLOptions {
stencil?: number;
}
export interface SkPaintConstructor {
new (): SkPaint;
}
export interface ColorMatrixHelpers {
/**
* Returns a new SkColorMatrix that is the result of multiplying outer*inner
* @param outer
* @param inner
*/
concat(outer: SkColorMatrix, inner: SkColorMatrix): SkColorMatrix;
/**
* Returns an identity SkColorMatrix.
*/
identity(): SkColorMatrix;
/**
* Sets the 4 "special" params that will translate the colors after they are multiplied
* by the 4x4 matrix.
* @param m
* @param dr - delta red
* @param dg - delta green
* @param db - delta blue
* @param da - delta alpha
*/
postTranslate(m: SkColorMatrix, dr: number, dg: number, db: number, da: number): SkColorMatrix;
/**
* Returns a new SkColorMatrix that is rotated around a given axis.
* @param axis - 0 for red, 1 for green, 2 for blue
* @param sine - sin(angle)
* @param cosine - cos(angle)
*/
rotated(axis: number, sine: number, cosine: number): SkColorMatrix;
/**
* Returns a new SkColorMatrix that scales the colors as specified.
* @param redScale
* @param greenScale
* @param blueScale
* @param alphaScale
*/
scaled(redScale: number, greenScale: number, blueScale: number,
alphaScale: number): SkColorMatrix;
}
/**
* TODO(kjlubick) Make this API return Float32Arrays
*/
export interface Matrix3x3Helpers {
/**
* Returns a new identity 3x3 matrix.
*/
identity(): number[];
/**
* Returns the inverse of the given 3x3 matrix or null if it is not invertible.
* @param m
*/
invert(m: Matrix3x3 | number[]): number[] | null;
/**
* Maps the given 2d points according to the given 3x3 matrix.
* @param m
* @param points - the points to map; the results are computed in place on this array.
*/
mapPoints(m: Matrix3x3 | number[], points: FlattenedPointArray): FlattenedPointArray;
/**
* Multiplies the provided 3x3 matrices together from left to right.
* @param matrices
*/
multiply(...matrices: Array<(Matrix3x3 | number[])>): number[];
/**
* Returns a new 3x3 matrix representing a rotation by n radians.
* @param radians
* @param px - the X value to rotate around, defaults to 0.
* @param py - the Y value to rotate around, defaults to 0.
*/
rotated(radians: angleInRadians, px?: number, py?: number): number[];
/**
* Returns a new 3x3 matrix representing a scale in the x and y directions.
* @param sx - the scale in the X direction.
* @param sy - the scale in the Y direction.
* @param px - the X value to scale from, defaults to 0.
* @param py - the Y value to scale from, defaults to 0.
*/
scaled(sx: number, sy: number, px?: number, py?: number): number[];
/**
* Returns a new 3x3 matrix representing a scale in the x and y directions.
* @param kx - the kurtosis in the X direction.
* @param ky - the kurtosis in the Y direction.
* @param px - the X value to skew from, defaults to 0.
* @param py - the Y value to skew from, defaults to 0.
*/
skewed(kx: number, ky: number, px?: number, py?: number): number[];
/**
* Returns a new 3x3 matrix representing a translation in the x and y directions.
* @param dx
* @param dy
*/
translated(dx: number, dy: number): number[];
}
/**
* See SkM44.h for more details.
*/
export interface Matrix4x4Helpers {
/**
* Returns a new identity 4x4 matrix.
*/
identity(): number[];
/**
* Returns the inverse of the given 4x4 matrix or null if it is not invertible.
* @param matrix
*/
invert(matrix: Matrix4x4 | number[]): number[] | null;
/**
* Return a new 4x4 matrix representing a camera at eyeVec, pointed at centerVec.
* @param eyeVec
* @param centerVec
* @param upVec
*/
lookat(eyeVec: Vector3, centerVec: Vector3, upVec: Vector3): number[];
/**
* Multiplies the provided 4x4 matrices together from left to right.
* @param matrices
*/
multiply(...matrices: Array<(Matrix4x4 | number[])>): number[];
/**
* Returns the inverse of the given 4x4 matrix or throws if it is not invertible.
* @param matrix
*/
mustInvert(matrix: Matrix4x4 | number[]): number[];
/**
* Returns a new 4x4 matrix representing a perspective.
* @param near
* @param far
* @param radians
*/
perspective(near: number, far: number, radians: angleInRadians): number[];
/**
* Returns the value at the specified row and column of the given 4x4 matrix.
* @param matrix
* @param row
* @param col
*/
rc(matrix: Matrix4x4 | number[], row: number, col: number): number;
/**
* Returns a new 4x4 matrix representing a rotation around the provided vector.
* @param axis
* @param radians
*/
rotated(axis: Vector3, radians: angleInRadians): number[];
/**
* Returns a new 4x4 matrix representing a rotation around the provided vector.
* Rotation is provided redundantly as both sin and cos values.
* This rotate can be used when you already have the cosAngle and sinAngle values
* so you don't have to atan(cos/sin) to call roatated() which expects an angle in radians.
* This does no checking! Behavior for invalid sin or cos values or non-normalized axis vectors
* is incorrect. Prefer rotated().
* @param axis
* @param sinAngle
* @param cosAngle
*/
rotatedUnitSinCos(axis: Vector3, sinAngle: number, cosAngle: number): number[];
/**
* Returns a new 4x4 matrix representing a scale by the provided vector.
* @param vec
*/
scaled(vec: Vector3): number[];
/**
* Returns a new 4x4 matrix that sets up a 3D perspective view from a given camera.
* @param area - describes the viewport. (0, 0, canvas_width, canvas_height) suggested.
* @param zScale - describes the scale of the z axis. min(width, height)/2 suggested
* @param cam
*/
setupCamera(area: InputRect, zScale: number, cam: Camera): number[];
/**
* Returns a new 4x4 matrix representing a translation by the provided vector.
* @param vec
*/
translated(vec: Vector3): number[];
/**
* Returns a new 4x4 matrix that is the transpose of this 4x4 matrix.
* @param matrix
*/
transpose(matrix: Matrix4x4 | number[]): number[];
}
/**
* See SkColorFilter.h for more.
*/
export interface SkColorFilterFactory {
/**
* Makes a color filter with the given color and blend mode.
* @param color
* @param mode
*/
MakeBlend(color: InputColor, mode: BlendMode): SkColorFilter;
/**
* Makes a color filter composing two color filters.
* @param outer
* @param inner
*/
MakeCompose(outer: SkColorFilter, inner: SkColorFilter): SkColorFilter;
/**
* Makes a color filter that is linearly interpolated between two other color filters.
* @param t - a float in the range of 0.0 to 1.0.
* @param dst
* @param src
*/
MakeLerp(t: number, dst: SkColorFilter, src: SkColorFilter): SkColorFilter;
/**
* Makes a color filter that converts between linear colors and sRGB colors.
*/
MakeLinearToSRGBGamma(): SkColorFilter;
/**
* Creates a color filter using the provided color matrix.
* @param cMatrix
*/
MakeMatrix(cMatrix: InputColorMatrix): SkColorFilter;
/**
* Makes a color filter that converts between sRGB colors and linear colors.
*/
MakeSRGBToLinearGamma(): SkColorFilter;
}
/**
* See effects/SkImageFilters.h for more.
*/
export interface SkImageFilterFactory {
/**
* Create a filter that blurs its input by the separate X and Y sigmas. The provided tile mode
* is used when the blur kernel goes outside the input image.
*
* @param sigmaX - The Gaussian sigma value for blurring along the X axis.
* @param sigmaY - The Gaussian sigma value for blurring along the Y axis.
* @param mode
* @param input - if null, it will use the dynamic source image (e.g. a saved layer)
*/
MakeBlur(sigmaX: number, sigmaY: number, mode: TileMode,
input: SkImageFilter | null): SkImageFilter;
/**
* Create a filter that applies the color filter to the input filter results.
* @param cf
* @param input - if null, it will use the dynamic source image (e.g. a saved layer)
*/
MakeColorFilter(cf: SkColorFilter, input: SkImageFilter | null): SkImageFilter;
/**
* Create a filter that composes 'inner' with 'outer', such that the results of 'inner' are
* treated as the source bitmap passed to 'outer'.
* If either param is null, the other param will be returned.
* @param outer
* @param inner - if null, it will use the dynamic source image (e.g. a saved layer)
*/
MakeCompose(outer: SkImageFilter | null, inner: SkImageFilter | null): SkImageFilter;
/**
* Create a filter that transforms the input image by 'matrix'. This matrix transforms the
* local space, which means it effectively happens prior to any transformation coming from the
* SkCanvas initiating the filtering.
* @param matr
* @param fq
* @param input - if null, it will use the dynamic source image (e.g. a saved layer)
*/
MakeMatrixTransform(matr: InputMatrix, fq: FilterQuality,
input: SkImageFilter | null): SkImageFilter;
}
/**
* See SkMaskFilter.h for more details.
*/
export interface SkMaskFilterFactory {
/**
* Create a blur maskfilter
* @param style
* @param sigma - Standard deviation of the Gaussian blur to apply. Must be > 0.
* @param respectCTM - if true the blur's sigma is modified by the CTM.
*/
MakeBlur(style: BlurStyle, sigma: number, respectCTM: boolean): SkMaskFilter;
}
/**
* See SkPathEffect.h for more details.
*/
export interface SkPathEffectFactory {
/**
* Returns a PathEffect that can turn sharp corners into rounded corners.
* @param radius - if <=0, returns null
*/
MakeCorner(radius: number): SkPathEffect | null;
/**
* Returns a PathEffect that add dashes to the path.
*
* See SkDashPathEffect.h for more details.
*
* @param intervals - even number of entries with even indicies specifying the length of
* the "on" intervals, and the odd indices specifying the length of "off".
* @param phase - offset length into the intervals array. Defaults to 0.
*/
MakeDash(intervals: number[], phase?: number): SkPathEffect;
/**
* Returns a PathEffect that breaks path into segments of segLength length, and randomly move
* the endpoints away from the original path by a maximum of deviation.
* @param segLength - length of the subsegments.
* @param dev - limit of the movement of the endpoints.
* @param seedAssist - modifies the randomness. See SkDiscretePathEffect.h for more.
*/
MakeDiscrete(segLength: number, dev: number, seedAssist: number): SkPathEffect;
}
/**
* An SkColor is represented by 4 floats, typically with values between 0 and 1.0. In order,
* the floats correspond to red, green, blue, alpha.
*/
export type SkColor = Float32Array;
export type SkColorInt = number; // deprecated, prefer SkColor
/**
* An SkColorMatrix is a 4x4 color matrix that transforms the 4 color channels
* with a 1x4 matrix that post-translates those 4 channels.
* For example, the following is the layout with the scale (S) and post-transform
* (PT) items indicated.
* RS, 0, 0, 0 | RPT
* 0, GS, 0, 0 | GPT
* 0, 0, BS, 0 | BPT
* 0, 0, 0, AS | APT
*/
export type SkColorMatrix = Float32Array;
/**
* An SkIRect is represented by 4 ints. In order, the ints correspond to left, top,
* right, bottom. See SkRect.h for more
@ -966,6 +1537,7 @@ export type SkRRect = Float32Array;
export type WebGLContextHandle = number;
export type angleInDegrees = number;
export type angleInRadians = number;
export type TypedArrayConstructor = Float32ArrayConstructor | Int32ArrayConstructor |
Int16ArrayConstructor | Int8ArrayConstructor | Uint32ArrayConstructor |
@ -993,39 +1565,52 @@ export type Matrix4x4 = Float32Array;
export type Matrix3x3 = Float32Array;
export type Matrix3x2 = Float32Array;
/**
* Point3 represents an x, y, coordinate.
* Vector3 represents an x, y, z coordinate or vector. It has length 3.
*/
export type Point3 = number[]; // TODO(kjlubick) make this include typed array and malloc'd.
export type Vector3 = number[]; // TODO(kjlubick) make this include typed array and malloc'd.
/**
* CanvasKit APIs accept normal arrays, typed arrays, or Malloc'd memory as colors.
* Length 4.
*/
export type InputColor = MallocObj | SkColor | number[];
/**
* CanvasKit APIs accept normal arrays, typed arrays, or Malloc'd memory as color matrices.
* Length 20.
*/
export type InputColorMatrix = MallocObj | SkColorMatrix | number[];
/**
* CanvasKit APIs accept all of these matrix types. Under the hood, we generally use 4x4 matrices.
*/
export type InputMatrix = MallocObj | Matrix4x4 | Matrix3x3 | Matrix3x2 | DOMMatrix | number[];
/**
* CanvasKit APIs accept normal arrays, typed arrays, or Malloc'd memory as rectangles.
* Length 4.
*/
export type InputRect = MallocObj | SkRect | number[];
/**
* CanvasKit APIs accept normal arrays, typed arrays, or Malloc'd memory as rectangles.
* CanvasKit APIs accept normal arrays, typed arrays, or Malloc'd memory as (int) rectangles.
* Length 4.
*/
export type InputIRect = MallocObj | SkRect | number[];
/**
* CanvasKit APIs accept normal arrays, typed arrays, or Malloc'd memory as rectangles with
* rounded corners.
* rounded corners. Length 12.
*/
export type InputRRect = MallocObj | SkRRect | number[];
export type AlphaType = EmbindEnumEntity;
export type BlendMode = EmbindEnumEntity;
export type BlurStyle = EmbindEnumEntity;
export type ClipOp = EmbindEnumEntity;
export type ColorSpace = EmbindSingleton;
export type ColorType = EmbindEnumEntity;
export type EncodedImageFormat = EmbindEnumEntity;
export type FilterQuality = EmbindEnumEntity;
export type PaintStyle = EmbindEnumEntity;
export type PointMode = EmbindEnumEntity;
export type StrokeCap = EmbindEnumEntity;
export type StrokeJoin = EmbindEnumEntity;
export type TileMode = EmbindEnumEntity;
export interface AlphaTypeEnumValues extends EmbindEnum {
@ -1066,6 +1651,13 @@ export interface BlendModeEnumValues extends EmbindEnum {
Luminosity: BlendMode;
}
export interface BlurStyleEnumValues extends EmbindEnum {
Normal: BlurStyle;
Solid: BlurStyle;
Outer: BlurStyle;
Inner: BlurStyle;
}
export interface ClipOpEnumValues extends EmbindEnum {
Difference: ClipOp;
Intersect: ClipOp;
@ -1094,17 +1686,42 @@ export interface ColorTypeEnumValues extends EmbindEnum {
export interface ImageFormatEnumValues extends EmbindEnum {
// TODO(kjlubick) When these are compiled in depending on the availability of the codecs,
// be sure to make these nullable.
PNG: EncodedImageFormat;
JPEG: EncodedImageFormat;
WEBP: EncodedImageFormat;
}
export interface FilterQualityEnumValues extends EmbindEnum {
None: FilterQuality;
Low: FilterQuality;
Medium: FilterQuality;
High: FilterQuality;
}
export interface PaintStyleEnumValues extends EmbindEnum {
Fill: PaintStyle;
Stroke: PaintStyle;
}
export interface PointModeEnumValues extends EmbindEnum {
Points: PointMode;
Lines: PointMode;
Polygon: PointMode;
}
export interface StrokeCapEnumValues extends EmbindEnum {
Butt: StrokeCap;
Round: StrokeCap;
Square: StrokeCap;
}
export interface StrokeJoinEnumValues extends EmbindEnum {
Bevel: StrokeJoin;
Miter: StrokeJoin;
Round: StrokeJoin;
}
export interface TileModeEnumValues extends EmbindEnum {
Clamp: TileMode;
Decal: TileMode;

2
modules/canvaskit/interface.js
View File

@ -551,7 +551,7 @@ CanvasKit.onRuntimeInitialized = function() {
return m;
}
// concat returns a new SkColorMatrix that is the result of multiplying outer*inner;
// concat returns a new SkColorMatrix that is the result of multiplying outer*inner
CanvasKit.SkColorMatrix.concat = function(outer, inner) {
var m = new Float32Array(20);
var index = 0;