skia2/modules/canvaskit/helper.js
Nathaniel Nifong 4e79b6730d Switch to using a Float32Array (bound as value array) for color.
Change-Id: I1bcca931954b1399c79f4074a3d57a68847ac785
Reviewed-on: https://skia-review.googlesource.com/c/skia/+/276757
Commit-Queue: Nathaniel Nifong <nifong@google.com>
Reviewed-by: Kevin Lubick <kjlubick@google.com>
2020-03-24 13:32:55 +00:00

528 lines
16 KiB
JavaScript

// helper JS that could be used anywhere in the glue code
function clamp(c) {
return Math.round(Math.max(0, Math.min(c || 0, 255)));
}
// Constructs a Color with the same API as CSS's rgba(), that is
// r,g,b are 0-255, and a is 0.0 to 1.0.
// if a is omitted, it will be assumed to be 1.0
// Internally, Colors are a TypedArray of four unpremultiplied 32-bit floats: a, r, g, b
// In order to construct one with more precision or in a wider gamut, use
// CanvasKit.Color4f
CanvasKit.Color = function(r, g, b, a) {
if (a === undefined) {
a = 1;
}
return CanvasKit.Color4f(clamp(r)/255, clamp(g)/255, clamp(b)/255, a);
}
// Construct a 4-float color.
// Opaque if opacity is omitted.
CanvasKit.Color4f = function(r, g, b, a) {
if (a === undefined) {
a = 1;
}
return Float32Array.of(r, g, b, a);
}
CanvasKit.TRANSPARENT = CanvasKit.Color4f(0, 0, 0, 0);
CanvasKit.BLACK = CanvasKit.Color4f(0, 0, 0, 1);
CanvasKit.WHITE = CanvasKit.Color4f(1, 1, 1, 1);
CanvasKit.RED = CanvasKit.Color4f(1, 0, 0, 1);
CanvasKit.GREEN = CanvasKit.Color4f(0, 1, 0, 1);
CanvasKit.BLUE = CanvasKit.Color4f(0, 0, 1, 1);
CanvasKit.YELLOW = CanvasKit.Color4f(1, 1, 0, 1);
CanvasKit.CYAN = CanvasKit.Color4f(0, 1, 1, 1);
CanvasKit.MAGENTA = CanvasKit.Color4f(1, 0, 1, 1);
// returns a css style [r, g, b, a] from a CanvasKit.Color
// where r, g, b are returned as ints in the range [0, 255]
// where a is scaled between 0 and 1.0
CanvasKit.getColorComponents = function(color) {
return [
Math.floor(color[0]*255),
Math.floor(color[1]*255),
Math.floor(color[2]*255),
color[3]
];
}
// parseColorString takes in a CSS color value and returns a CanvasKit.Color
// (which is an array of 4 floats in RGBA order). An optional colorMap
// may be provided which maps custom strings to values.
// In the CanvasKit canvas2d shim layer, we provide this map for processing
// canvas2d calls, but not here for code size reasons.
CanvasKit.parseColorString = function(colorStr, colorMap) {
colorStr = colorStr.toLowerCase();
// See https://drafts.csswg.org/css-color/#typedef-hex-color
if (colorStr.startsWith('#')) {
var r, g, b, a = 255;
switch (colorStr.length) {
case 9: // 8 hex chars #RRGGBBAA
a = parseInt(colorStr.slice(7, 9), 16);
case 7: // 6 hex chars #RRGGBB
r = parseInt(colorStr.slice(1, 3), 16);
g = parseInt(colorStr.slice(3, 5), 16);
b = parseInt(colorStr.slice(5, 7), 16);
break;
case 5: // 4 hex chars #RGBA
// multiplying by 17 is the same effect as
// appending another character of the same value
// e.g. e => ee == 14 => 238
a = parseInt(colorStr.slice(4, 5), 16) * 17;
case 4: // 6 hex chars #RGB
r = parseInt(colorStr.slice(1, 2), 16) * 17;
g = parseInt(colorStr.slice(2, 3), 16) * 17;
b = parseInt(colorStr.slice(3, 4), 16) * 17;
break;
}
return CanvasKit.Color(r, g, b, a/255);
} else if (colorStr.startsWith('rgba')) {
// Trim off rgba( and the closing )
colorStr = colorStr.slice(5, -1);
var nums = colorStr.split(',');
return CanvasKit.Color(+nums[0], +nums[1], +nums[2],
valueOrPercent(nums[3]));
} else if (colorStr.startsWith('rgb')) {
// Trim off rgba( and the closing )
colorStr = colorStr.slice(4, -1);
var nums = colorStr.split(',');
// rgb can take 3 or 4 arguments
return CanvasKit.Color(+nums[0], +nums[1], +nums[2],
valueOrPercent(nums[3]));
} else if (colorStr.startsWith('gray(')) {
// TODO
} else if (colorStr.startsWith('hsl')) {
// TODO
} else if (colorMap) {
// Try for named color
var nc = colorMap[colorStr];
if (nc !== undefined) {
return nc;
}
}
SkDebug('unrecognized color ' + colorStr);
return CanvasKit.BLACK;
}
function isCanvasKitColor(ob) {
if (!ob) {
return false;
}
return (ob.constructor === Float32Array && ob.length === 4);
}
// Warning information is lost by this conversion
function toUint32Color(c) {
return ((clamp(c[3]*255) << 24) | (clamp(c[0]*255) << 16) | (clamp(c[1]*255) << 8) | (clamp(c[2]*255) << 0)) >>> 0;
}
function uIntColorToCanvasKitColor(c) {
return CanvasKit.Color(
(c >> 16) & 0xFF,
(c >> 8) & 0xFF,
(c >> 0) & 0xFF,
((c >> 24) & 0xFF) / 255
);
}
function valueOrPercent(aStr) {
if (aStr === undefined) {
return 1; // default to opaque.
}
var a = parseFloat(aStr);
if (aStr && aStr.indexOf('%') !== -1) {
return a / 100;
}
return a;
}
CanvasKit.multiplyByAlpha = function(color, alpha) {
// make a copy of the color so the function remains pure.
var result = color.slice();
result[3] = Math.max(0, Math.min(result[3] * alpha, 1));
return result;
}
function radiansToDegrees(rad) {
return (rad / Math.PI) * 180;
}
function degreesToRadians(deg) {
return (deg / 180) * Math.PI;
}
// See https://stackoverflow.com/a/31090240
// This contraption keeps closure from minifying away the check
// if btoa is defined *and* prevents runtime "btoa" or "window" is not defined.
// Defined outside any scopes to make it available in all files.
var isNode = !(new Function("try {return this===window;}catch(e){ return false;}")());
function almostEqual(floata, floatb) {
return Math.abs(floata - floatb) < 0.00001;
}
var nullptr = 0; // emscripten doesn't like to take null as uintptr_t
// arr can be a normal JS array or a TypedArray
// dest is something like CanvasKit.HEAPF32
// ptr can be optionally provided if the memory was already allocated.
function copy1dArray(arr, dest, ptr) {
if (!arr || !arr.length) {
return nullptr;
}
// This was created with CanvasKit.Malloc, so it's already been copied.
if (arr['_ck']) {
return arr.byteOffset;
}
if (!ptr) {
ptr = CanvasKit._malloc(arr.length * dest.BYTES_PER_ELEMENT);
}
// In c++ terms, the WASM heap is a uint8_t*, a long buffer/array of single
// byte elements. When we run _malloc, we always get an offset/pointer into
// that block of memory.
// CanvasKit exposes some different views to make it easier to work with
// different types. HEAPF32 for example, exposes it as a float*
// However, to make the ptr line up, we have to do some pointer arithmetic.
// Concretely, we need to convert ptr to go from an index into a 1-byte-wide
// buffer to an index into a 4-byte-wide buffer (in the case of HEAPF32)
// and thus we divide ptr by 4.
dest.set(arr, ptr / dest.BYTES_PER_ELEMENT);
return ptr;
}
// arr should be a non-jagged 2d JS array (TypedArrays can't be nested
// inside themselves). A common use case is points.
// dest is something like CanvasKit.HEAPF32
// ptr can be optionally provided if the memory was already allocated.
function copy2dArray(arr, dest, ptr) {
if (!arr || !arr.length) {
return nullptr;
}
if (!ptr) {
ptr = CanvasKit._malloc(arr.length * arr[0].length * dest.BYTES_PER_ELEMENT);
}
var idx = 0;
var adjustedPtr = ptr / dest.BYTES_PER_ELEMENT;
for (var r = 0; r < arr.length; r++) {
for (var c = 0; c < arr[0].length; c++) {
dest[adjustedPtr + idx] = arr[r][c];
idx++;
}
}
return ptr;
}
// arr should be a non-jagged 3d JS array (TypedArrays can't be nested
// inside themselves.)
// dest is something like CanvasKit.HEAPF32
// ptr can be optionally provided if the memory was already allocated.
function copy3dArray(arr, dest, ptr) {
if (!arr || !arr.length || !arr[0].length) {
return nullptr;
}
if (!ptr) {
ptr = CanvasKit._malloc(arr.length * arr[0].length * arr[0][0].length * dest.BYTES_PER_ELEMENT);
}
var idx = 0;
var adjustedPtr = ptr / dest.BYTES_PER_ELEMENT;
for (var x = 0; x < arr.length; x++) {
for (var y = 0; y < arr[0].length; y++) {
for (var z = 0; z < arr[0][0].length; z++) {
dest[adjustedPtr + idx] = arr[x][y][z];
idx++;
}
}
}
return ptr;
}
// Caching the Float32Arrays can save having to reallocate them
// over and over again.
var Float32ArrayCache = {};
// Takes a 2D array of commands and puts them into the WASM heap
// as a 1D array. This allows them to referenced from the C++ code.
// Returns a 2 element array, with the first item being essentially a
// pointer to the array and the second item being the length of
// the new 1D array.
//
// Example usage:
// let cmds = [
// [CanvasKit.MOVE_VERB, 0, 10],
// [CanvasKit.LINE_VERB, 30, 40],
// [CanvasKit.QUAD_VERB, 20, 50, 45, 60],
// ];
function loadCmdsTypedArray(arr) {
var len = 0;
for (var r = 0; r < arr.length; r++) {
len += arr[r].length;
}
var ta;
if (Float32ArrayCache[len]) {
ta = Float32ArrayCache[len];
} else {
ta = new Float32Array(len);
Float32ArrayCache[len] = ta;
}
// Flatten into a 1d array
var i = 0;
for (var r = 0; r < arr.length; r++) {
for (var c = 0; c < arr[r].length; c++) {
var item = arr[r][c];
ta[i] = item;
i++;
}
}
var ptr = copy1dArray(ta, CanvasKit.HEAPF32);
return [ptr, len];
}
function saveBytesToFile(bytes, fileName) {
if (!isNode) {
// https://stackoverflow.com/a/32094834
var blob = new Blob([bytes], {type: 'application/octet-stream'});
url = window.URL.createObjectURL(blob);
var a = document.createElement('a');
document.body.appendChild(a);
a.href = url;
a.download = fileName;
a.click();
// clean up after because FF might not download it synchronously
setTimeout(function() {
URL.revokeObjectURL(url);
a.remove();
}, 50);
} else {
var fs = require('fs');
// https://stackoverflow.com/a/42006750
// https://stackoverflow.com/a/47018122
fs.writeFile(fileName, new Buffer(bytes), function(err) {
if (err) throw err;
});
}
}
/**
* Generic helper for dealing with an array of four floats.
*/
CanvasKit.FourFloatArrayHelper = function() {
this._floats = [];
this._ptr = null;
Object.defineProperty(this, 'length', {
enumerable: true,
get: function() {
return this._floats.length / 4;
},
});
}
/**
* push the four floats onto the end of the array - if build() has already
* been called, the call will return without modifying anything.
*/
CanvasKit.FourFloatArrayHelper.prototype.push = function(f1, f2, f3, f4) {
if (this._ptr) {
SkDebug('Cannot push more points - already built');
return;
}
this._floats.push(f1, f2, f3, f4);
}
/**
* Set the four floats at a given index - if build() has already
* been called, the WASM memory will be written to directly.
*/
CanvasKit.FourFloatArrayHelper.prototype.set = function(idx, f1, f2, f3, f4) {
if (idx < 0 || idx >= this._floats.length/4) {
SkDebug('Cannot set index ' + idx + ', it is out of range', this._floats.length/4);
return;
}
idx *= 4;
var BYTES_PER_ELEMENT = 4;
if (this._ptr) {
// convert this._ptr from uint8_t* to SkScalar* by dividing by 4
var floatPtr = (this._ptr / BYTES_PER_ELEMENT) + idx;
CanvasKit.HEAPF32[floatPtr] = f1;
CanvasKit.HEAPF32[floatPtr + 1] = f2;
CanvasKit.HEAPF32[floatPtr + 2] = f3;
CanvasKit.HEAPF32[floatPtr + 3] = f4;
return;
}
this._floats[idx] = f1;
this._floats[idx + 1] = f2;
this._floats[idx + 2] = f3;
this._floats[idx + 3] = f4;
}
/**
* Copies the float data to the WASM memory and returns a pointer
* to that allocated memory. Once build has been called, this
* float array cannot be made bigger.
*/
CanvasKit.FourFloatArrayHelper.prototype.build = function() {
if (this._ptr) {
return this._ptr;
}
this._ptr = copy1dArray(this._floats, CanvasKit.HEAPF32);
return this._ptr;
}
/**
* Frees the wasm memory associated with this array. Of note,
* the points are not removed, so push/set/build can all
* be called to make a newly allocated (possibly bigger)
* float array.
*/
CanvasKit.FourFloatArrayHelper.prototype.delete = function() {
if (this._ptr) {
CanvasKit._free(this._ptr);
this._ptr = null;
}
}
/**
* Generic helper for dealing with an array of unsigned ints.
*/
CanvasKit.OneUIntArrayHelper = function() {
this._uints = [];
this._ptr = null;
Object.defineProperty(this, 'length', {
enumerable: true,
get: function() {
return this._uints.length;
},
});
}
/**
* push the unsigned int onto the end of the array - if build() has already
* been called, the call will return without modifying anything.
*/
CanvasKit.OneUIntArrayHelper.prototype.push = function(u) {
if (this._ptr) {
SkDebug('Cannot push more points - already built');
return;
}
this._uints.push(u);
}
/**
* Set the uint at a given index - if build() has already
* been called, the WASM memory will be written to directly.
*/
CanvasKit.OneUIntArrayHelper.prototype.set = function(idx, u) {
if (idx < 0 || idx >= this._uints.length) {
SkDebug('Cannot set index ' + idx + ', it is out of range', this._uints.length);
return;
}
idx *= 4;
var BYTES_PER_ELEMENT = 4;
if (this._ptr) {
// convert this._ptr from uint8_t* to SkScalar* by dividing by 4
var uintPtr = (this._ptr / BYTES_PER_ELEMENT) + idx;
CanvasKit.HEAPU32[uintPtr] = u;
return;
}
this._uints[idx] = u;
}
/**
* Copies the uint data to the WASM memory and returns a pointer
* to that allocated memory. Once build has been called, this
* unit array cannot be made bigger.
*/
CanvasKit.OneUIntArrayHelper.prototype.build = function() {
if (this._ptr) {
return this._ptr;
}
this._ptr = copy1dArray(this._uints, CanvasKit.HEAPU32);
return this._ptr;
}
/**
* Frees the wasm memory associated with this array. Of note,
* the points are not removed, so push/set/build can all
* be called to make a newly allocated (possibly bigger)
* uint array.
*/
CanvasKit.OneUIntArrayHelper.prototype.delete = function() {
if (this._ptr) {
CanvasKit._free(this._ptr);
this._ptr = null;
}
}
/**
* Helper for building an array of SkRects (which are just structs
* of 4 floats).
*
* It can be more performant to use this helper, as
* the C++-side array is only allocated once (on the first call)
* to build. Subsequent set() operations operate directly on
* the C++-side array, avoiding having to re-allocate (and free)
* the array every time.
*
* Input points are taken as left, top, right, bottom
*/
CanvasKit.SkRectBuilder = CanvasKit.FourFloatArrayHelper;
/**
* Helper for building an array of RSXForms (which are just structs
* of 4 floats).
*
* It can be more performant to use this helper, as
* the C++-side array is only allocated once (on the first call)
* to build. Subsequent set() operations operate directly on
* the C++-side array, avoiding having to re-allocate (and free)
* the array every time.
*
* An RSXForm is a compressed form of a rotation+scale matrix.
*
* [ scos -ssin tx ]
* [ ssin scos ty ]
* [ 0 0 1 ]
*
* Input points are taken as scos, ssin, tx, ty
*/
CanvasKit.RSXFormBuilder = CanvasKit.FourFloatArrayHelper;
/**
* Helper for building an array of SkColor
*
* It can be more performant to use this helper, as
* the C++-side array is only allocated once (on the first call)
* to build. Subsequent set() operations operate directly on
* the C++-side array, avoiding having to re-allocate (and free)
* the array every time.
*/
CanvasKit.SkColorBuilder = CanvasKit.OneUIntArrayHelper;
/**
* Malloc returns a TypedArray backed by the C++ memory of the
* given length. It should only be used by advanced users who
* can manage memory and initialize values properly. When used
* correctly, it can save copying of data between JS and C++.
* When used incorrectly, it can lead to memory leaks.
*
* const ta = CanvasKit.Malloc(Float32Array, 20);
* // store data into ta
* const cf = CanvasKit.SkColorFilter.MakeMatrix(ta);
* // MakeMatrix cleans up the ptr automatically.
*
* @param {TypedArray} typedArray - constructor for the typedArray.
* @param {number} len - number of elements to store.
*/
CanvasKit.Malloc = function(typedArray, len) {
var byteLen = len * typedArray.BYTES_PER_ELEMENT;
var ptr = CanvasKit._malloc(byteLen);
var ta = new typedArray(CanvasKit.HEAPU8.buffer, ptr, len);
// add a marker that this was allocated in C++ land
ta['_ck'] = true;
return ta;
}