diff --git a/modules/canvaskit/CHANGELOG.md b/modules/canvaskit/CHANGELOG.md index a8a5921bc1..9888f78a6e 100644 --- a/modules/canvaskit/CHANGELOG.md +++ b/modules/canvaskit/CHANGELOG.md @@ -6,13 +6,23 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +### Deprecated + - `MakeSkDashPathEffect` will be renamed soon. Calls can be replaced with + `SkPathEffect.MakeDash`. + - `MakeLinearGradientShader` will be renamed soon. Calls can be replaced with + `SkShader.MakeLinearGradient`. + - `MakeRadialGradientShader` will be renamed soon. Calls can be replaced with + `SkShader.MakeRadialGradient`. + - `MakeTwoPointConicalGradientShader` will be renamed soon. Calls can be replaced with + `SkShader.MakeTwoPointConicalGradient`. + ## [0.13.0] - 2020-02-28 ### Deprecated - `MakeSkCornerPathEffect` will be renamed soon. Calls can be replaced with - `PathEffect.MakeCorner`. + `SkPathEffect.MakeCorner`. - `MakeSkDiscretePathEffect` will be renamed soon. Calls can be replaced with - `PathEffect.MakeDiscrete`. + `SkPathEffect.MakeDiscrete`. ### Added - `SkSurface.drawOnce` for drawing a single frame (in addition to already existing diff --git a/modules/canvaskit/canvaskit/example.html b/modules/canvaskit/canvaskit/example.html index cd1a0680e4..09d5e79904 100644 --- a/modules/canvaskit/canvaskit/example.html +++ b/modules/canvaskit/canvaskit/example.html @@ -148,7 +148,7 @@ // Some animations see performance improvements by marking their // paths as volatile. path.setIsVolatile(true); - const dpe = CanvasKit.MakeSkDashPathEffect([15, 5, 5, 10], i/5); + const dpe = CanvasKit.SkPathEffect.MakeDash([15, 5, 5, 10], i/5); i++; paint.setPathEffect(dpe); @@ -882,7 +882,7 @@ vertices = CanvasKit.MakeSkVertices(CanvasKit.VertexMode.TriangleFan, points, texs, colors); - let shader = CanvasKit.MakeLinearGradientShader([0, 0], [250, 0], + let shader = CanvasKit.SkShader.MakeLinearGradient([0, 0], [250, 0], colors, null, CanvasKit.TileMode.Clamp); paint.setShader(shader); @@ -975,7 +975,7 @@ let transform = [2, 0, 0, 0, 2, 0, 0, 0, 1] - let shader = CanvasKit.MakeRadialGradientShader([150,150], 130, colors, + let shader = CanvasKit.SkShader.MakeRadialGradient([150,150], 130, colors, pos, CanvasKit.TileMode.Mirror, transform); paint.setShader(shader); diff --git a/modules/canvaskit/canvaskit/node.example.js b/modules/canvaskit/canvaskit/node.example.js index 3d2277530f..04e7950c24 100644 --- a/modules/canvaskit/canvaskit/node.example.js +++ b/modules/canvaskit/canvaskit/node.example.js @@ -62,7 +62,7 @@ function fancyAPI(CanvasKit) { const textFont = new CanvasKit.SkFont(roboto, 30); const skpath = starPath(CanvasKit); - const dpe = CanvasKit.MakeSkDashPathEffect([15, 5, 5, 10], 1); + const dpe = CanvasKit.SkPathEffect.MakeDash([15, 5, 5, 10], 1); paint.setPathEffect(dpe); paint.setStyle(CanvasKit.PaintStyle.Stroke); diff --git a/modules/canvaskit/externs.js b/modules/canvaskit/externs.js index 19ac563f8b..4be2d7dce0 100644 --- a/modules/canvaskit/externs.js +++ b/modules/canvaskit/externs.js @@ -344,6 +344,10 @@ var CanvasKit = { delete: function() {}, }, + SkPathEffect: { + MakeDash: function() {}, + }, + SkParticleEffect: { // public API (from C++ bindings) draw: function() {}, @@ -458,6 +462,9 @@ var CanvasKit = { Color: function() {}, Empty: function() {}, Lerp: function() {}, + MakeTwoPointConicalGradient: function() {}, + MakeLinearGradient: function() {}, + MakeRadialGradient: function() {}, _Blend: function() {}, _Lerp: function() {}, diff --git a/modules/canvaskit/htmlcanvas/canvas2dcontext.js b/modules/canvaskit/htmlcanvas/canvas2dcontext.js index 30f15bb1d2..86df49ca12 100644 --- a/modules/canvaskit/htmlcanvas/canvas2dcontext.js +++ b/modules/canvaskit/htmlcanvas/canvas2dcontext.js @@ -1048,7 +1048,7 @@ function CanvasRenderingContext2D(skcanvas) { paint.setStrokeWidth(this._strokeWidth); if (this._lineDashList.length) { - var dashedEffect = CanvasKit.MakeSkDashPathEffect(this._lineDashList, this._lineDashOffset); + var dashedEffect = CanvasKit.SkPathEffect.MakeDash(this._lineDashList, this._lineDashOffset); paint.setPathEffect(dashedEffect); } diff --git a/modules/canvaskit/htmlcanvas/lineargradient.js b/modules/canvaskit/htmlcanvas/lineargradient.js index fc75fb3d46..a5866fc2e6 100644 --- a/modules/canvaskit/htmlcanvas/lineargradient.js +++ b/modules/canvaskit/htmlcanvas/lineargradient.js @@ -59,7 +59,7 @@ function LinearCanvasGradient(x1, y1, x2, y2) { var sy2 = pts[3]; this._dispose(); - this._shader = CanvasKit.MakeLinearGradientShader([sx1, sy1], [sx2, sy2], + this._shader = CanvasKit.SkShader.MakeLinearGradient([sx1, sy1], [sx2, sy2], this._colors, this._pos, CanvasKit.TileMode.Clamp); return this._shader; } diff --git a/modules/canvaskit/htmlcanvas/radialgradient.js b/modules/canvaskit/htmlcanvas/radialgradient.js index 431bbc504e..8480ae816b 100644 --- a/modules/canvaskit/htmlcanvas/radialgradient.js +++ b/modules/canvaskit/htmlcanvas/radialgradient.js @@ -69,7 +69,7 @@ function RadialCanvasGradient(x1, y1, r1, x2, y2, r2) { var sr2 = r2 * scaleFactor; this._dispose(); - this._shader = CanvasKit.MakeTwoPointConicalGradientShader( + this._shader = CanvasKit.SkShader.MakeTwoPointConicalGradient( [sx1, sy1], sr1, [sx2, sy2], sr2, this._colors, this._pos, CanvasKit.TileMode.Clamp); return this._shader; diff --git a/modules/canvaskit/interface.js b/modules/canvaskit/interface.js index 842ef8bd54..815335bd4d 100644 --- a/modules/canvaskit/interface.js +++ b/modules/canvaskit/interface.js @@ -1063,6 +1063,94 @@ CanvasKit.onRuntimeInitialized = function() { }.bind(this)); } + CanvasKit.SkPathEffect.MakeDash = function(intervals, phase) { + if (!phase) { + phase = 0; + } + if (!intervals.length || intervals.length % 2 === 1) { + throw 'Intervals array must have even length'; + } + var ptr = copy1dArray(intervals, CanvasKit.HEAPF32); + var dpe = CanvasKit._MakeSkDashPathEffect(ptr, intervals.length, phase); + CanvasKit._free(ptr); + return dpe; + } + + CanvasKit.SkShader.MakeLinearGradient = function(start, end, colors, pos, mode, localMatrix, flags) { + var colorPtr = copy1dArray(colors, CanvasKit.HEAPU32); + var posPtr = copy1dArray(pos, CanvasKit.HEAPF32); + flags = flags || 0; + + if (localMatrix) { + // Add perspective args if not provided. + if (localMatrix.length === 6) { + localMatrix.push(0, 0, 1); + } + var lgs = CanvasKit._MakeLinearGradientShader(start, end, colorPtr, posPtr, + colors.length, mode, flags, localMatrix); + } else { + var lgs = CanvasKit._MakeLinearGradientShader(start, end, colorPtr, posPtr, + colors.length, mode, flags); + } + + CanvasKit._free(colorPtr); + CanvasKit._free(posPtr); + return lgs; + } + + CanvasKit.SkShader.MakeRadialGradient = function(center, radius, colors, pos, mode, localMatrix, flags) { + var colorPtr = copy1dArray(colors, CanvasKit.HEAPU32); + var posPtr = copy1dArray(pos, CanvasKit.HEAPF32); + flags = flags || 0; + + if (localMatrix) { + // Add perspective args if not provided. + if (localMatrix.length === 6) { + localMatrix.push(0, 0, 1); + } + var rgs = CanvasKit._MakeRadialGradientShader(center, radius, colorPtr, posPtr, + colors.length, mode, flags, localMatrix); + } else { + var rgs = CanvasKit._MakeRadialGradientShader(center, radius, colorPtr, posPtr, + colors.length, mode, flags); + } + + CanvasKit._free(colorPtr); + CanvasKit._free(posPtr); + return rgs; + } + + CanvasKit.SkShader.MakeTwoPointConicalGradient = function(start, startRadius, end, endRadius, + colors, pos, mode, localMatrix, flags) { + var colorPtr = copy1dArray(colors, CanvasKit.HEAPU32); + var posPtr = copy1dArray(pos, CanvasKit.HEAPF32); + flags = flags || 0; + + if (localMatrix) { + // Add perspective args if not provided. + if (localMatrix.length === 6) { + localMatrix.push(0, 0, 1); + } + var rgs = CanvasKit._MakeTwoPointConicalGradientShader( + start, startRadius, end, endRadius, + colorPtr, posPtr, colors.length, mode, flags, localMatrix); + } else { + var rgs = CanvasKit._MakeTwoPointConicalGradientShader( + start, startRadius, end, endRadius, + colorPtr, posPtr, colors.length, mode, flags); + } + + CanvasKit._free(colorPtr); + CanvasKit._free(posPtr); + return rgs; + } + + // temporary support for deprecated names. + CanvasKit.MakeSkDashPathEffect = CanvasKit.SkPathEffect.prototype.MakeDash; + CanvasKit.MakeLinearGradientShader = CanvasKit.SkShader.prototype.MakeLinearGradient; + CanvasKit.MakeRadialGradientShader = CanvasKit.SkShader.prototype.MakeRadialGradient; + CanvasKit.MakeTwoPointConicalGradientShader = CanvasKit.SkShader.prototype.MakeTwoPointConicalGradient; + // Run through the JS files that are added at compile time. if (CanvasKit._extraInitializations) { CanvasKit._extraInitializations.forEach(function(init) { @@ -1112,19 +1200,6 @@ CanvasKit.MakePathFromCmds = function(cmds) { return path; } -CanvasKit.MakeSkDashPathEffect = function(intervals, phase) { - if (!phase) { - phase = 0; - } - if (!intervals.length || intervals.length % 2 === 1) { - throw 'Intervals array must have even length'; - } - var ptr = copy1dArray(intervals, CanvasKit.HEAPF32); - var dpe = CanvasKit._MakeSkDashPathEffect(ptr, intervals.length, phase); - CanvasKit._free(ptr); - return dpe; -} - // data is a TypedArray or ArrayBuffer e.g. from fetch().then(resp.arrayBuffer()) CanvasKit.MakeAnimatedImageFromEncoded = function(data) { data = new Uint8Array(data); @@ -1169,75 +1244,6 @@ CanvasKit.MakeImage = function(pixels, width, height, alphaType, colorType) { return CanvasKit._MakeImage(info, pptr, pixels.length, width * bytesPerPixel); } -CanvasKit.MakeLinearGradientShader = function(start, end, colors, pos, mode, localMatrix, flags) { - var colorPtr = copy1dArray(colors, CanvasKit.HEAPU32); - var posPtr = copy1dArray(pos, CanvasKit.HEAPF32); - flags = flags || 0; - - if (localMatrix) { - // Add perspective args if not provided. - if (localMatrix.length === 6) { - localMatrix.push(0, 0, 1); - } - var lgs = CanvasKit._MakeLinearGradientShader(start, end, colorPtr, posPtr, - colors.length, mode, flags, localMatrix); - } else { - var lgs = CanvasKit._MakeLinearGradientShader(start, end, colorPtr, posPtr, - colors.length, mode, flags); - } - - CanvasKit._free(colorPtr); - CanvasKit._free(posPtr); - return lgs; -} - -CanvasKit.MakeRadialGradientShader = function(center, radius, colors, pos, mode, localMatrix, flags) { - var colorPtr = copy1dArray(colors, CanvasKit.HEAPU32); - var posPtr = copy1dArray(pos, CanvasKit.HEAPF32); - flags = flags || 0; - - if (localMatrix) { - // Add perspective args if not provided. - if (localMatrix.length === 6) { - localMatrix.push(0, 0, 1); - } - var rgs = CanvasKit._MakeRadialGradientShader(center, radius, colorPtr, posPtr, - colors.length, mode, flags, localMatrix); - } else { - var rgs = CanvasKit._MakeRadialGradientShader(center, radius, colorPtr, posPtr, - colors.length, mode, flags); - } - - CanvasKit._free(colorPtr); - CanvasKit._free(posPtr); - return rgs; -} - -CanvasKit.MakeTwoPointConicalGradientShader = function(start, startRadius, end, endRadius, - colors, pos, mode, localMatrix, flags) { - var colorPtr = copy1dArray(colors, CanvasKit.HEAPU32); - var posPtr = copy1dArray(pos, CanvasKit.HEAPF32); - flags = flags || 0; - - if (localMatrix) { - // Add perspective args if not provided. - if (localMatrix.length === 6) { - localMatrix.push(0, 0, 1); - } - var rgs = CanvasKit._MakeTwoPointConicalGradientShader( - start, startRadius, end, endRadius, - colorPtr, posPtr, colors.length, mode, flags, localMatrix); - } else { - var rgs = CanvasKit._MakeTwoPointConicalGradientShader( - start, startRadius, end, endRadius, - colorPtr, posPtr, colors.length, mode, flags); - } - - CanvasKit._free(colorPtr); - CanvasKit._free(posPtr); - return rgs; -} - CanvasKit.MakeSkVertices = function(mode, positions, textureCoordinates, colors, indices, isVolatile) { // Default isVolitile to true if not set diff --git a/modules/canvaskit/tests/canvas.spec.js b/modules/canvaskit/tests/canvas.spec.js index 28dadef7e3..d72425de1a 100644 --- a/modules/canvaskit/tests/canvas.spec.js +++ b/modules/canvaskit/tests/canvas.spec.js @@ -72,7 +72,7 @@ describe('CanvasKit\'s Canvas Behavior', function() { const textFont = new CanvasKit.SkFont(null, 30); - const dpe = CanvasKit.MakeSkDashPathEffect([15, 5, 5, 10], 1); + const dpe = CanvasKit.SkPathEffect.MakeDash([15, 5, 5, 10], 1); paint.setPathEffect(dpe); paint.setStyle(CanvasKit.PaintStyle.Stroke); diff --git a/site/user/modules/canvaskit.md b/site/user/modules/canvaskit.md index f9d80c5c00..c354fc0385 100644 --- a/site/user/modules/canvaskit.md +++ b/site/user/modules/canvaskit.md @@ -206,7 +206,7 @@ Samples function drawFrame() { const path = starPath(CanvasKit, X, Y); CanvasKit.setCurrentContext(context); - const dpe = CanvasKit.MakeSkDashPathEffect([15, 5, 5, 10], i/5); + const dpe = CanvasKit.SkPathEffect.MakeDash([15, 5, 5, 10], i/5); i++; paint.setPathEffect(dpe);