[canvaskit] Remove references to particles.skia.org from demos

We should encourage users to use a real CDN, not a random build of ours.

This also fixes a few broken demos.

Change-Id: I3b607665744b5f481bca0b9b3072aaa25b3d2c57
Reviewed-on: https://skia-review.googlesource.com/c/skia/+/371221
Reviewed-by: Kevin Lubick <kjlubick@google.com>
This commit is contained in:
Kevin Lubick 2021-02-17 11:23:57 -05:00
parent 3607dd4693
commit 7026961111
9 changed files with 19 additions and 14 deletions

View File

@ -3,7 +3,7 @@
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://particles.skia.org/dist/canvaskit.js"></script>
<script type="text/javascript" src="https://unpkg.com/canvaskit-wasm@0.23.0/bin/canvaskit.js"></script>
<style>
canvas {
@ -18,7 +18,7 @@
</body>
<script type="text/javascript" charset="utf-8">
const ckLoaded = CanvasKitInit({ locateFile: (file) => 'https://particles.skia.org/dist/' + file });
const ckLoaded = CanvasKitInit({ locateFile: (file) => 'https://unpkg.com/canvaskit-wasm@0.23.0/bin/' + file });
ckLoaded.then((CanvasKit) => {
const surface = CanvasKit.MakeCanvasSurface('draw');

View File

@ -40,5 +40,5 @@
</div>
</body>
<script type="text/javascript" src="https://particles.skia.org/dist/canvaskit.js"></script>
<script type="text/javascript" src="https://unpkg.com/canvaskit-wasm@0.23.0/bin/canvaskit.js"></script>
<script type="text/javascript" src="main.js"></script>

View File

@ -2,7 +2,7 @@
const worker = new Worker('worker.js');
const canvasKitInitPromise =
CanvasKitInit({locateFile: (file) => 'https://particles.skia.org/dist/'+file});
CanvasKitInit({locateFile: (file) => 'https://unpkg.com/canvaskit-wasm@0.23.0/bin/'+file});
const bigImagePromise =
fetch('https://upload.wikimedia.org/wikipedia/commons/3/30/Large_Gautama_Buddha_statue_in_Buddha_Park_of_Ravangla%2C_Sikkim.jpg')
@ -63,8 +63,13 @@ Promise.all([
worker.addEventListener('message', (e) => {
const decodedBuffer = e.data.decodedArrayBuffer;
const pixels = new Uint8Array(decodedBuffer);
decodedImage = CanvasKit.MakeImage(pixels, e.data.width, e.data.height,
CanvasKit.AlphaType.Unpremul, CanvasKit.ColorType.RGBA_8888, CanvasKit.ColorSpace.SRGB);
decodedImage = CanvasKit.MakeImage({
width: e.data.width,
height: e.data.height,
alphaType: CanvasKit.AlphaType.Unpremul,
colorType: CanvasKit.ColorType.RGBA_8888,
colorSpace: CanvasKit.ColorSpace.SRGB
}, pixels, 4 * e.data.width);
});
document.getElementById('clear-button').addEventListener('click', () => {
if (decodedImage) {

View File

@ -92,6 +92,6 @@
<canvas id="CanvasKit-canvas" height=500 width=500></canvas>
</div>
</body>
<script type="text/javascript" src="https://particles.skia.org/dist/canvaskit.js"></script>
<script type="text/javascript" src="https://unpkg.com/canvaskit-wasm@0.23.0/bin/canvaskit.js"></script>
<script type="text/javascript" src="shared.js"></script>
<script type="text/javascript" src="main.js"></script>

View File

@ -103,7 +103,7 @@ class CanvasKitRenderer {
constructor(svgData, offscreenCanvas, CanvasKit) {
this.CanvasKit = CanvasKit;
this.data = svgData.map(([pathString, fillColor]) => [
CanvasKit.MakePathFromSVGString(pathString),
CanvasKit.Path.MakeFromSVGString(pathString),
CanvasKit.parseColorString(fillColor)
]);

View File

@ -1,8 +1,8 @@
importScripts('https://particles.skia.org/dist/canvaskit.js');
importScripts('https://unpkg.com/canvaskit-wasm@0.23.0/bin/canvaskit.js');
importScripts('shared.js');
const CanvasKitPromise =
CanvasKitInit({locateFile: (file) => 'https://particles.skia.org/dist/'+file});
CanvasKitInit({locateFile: (file) => 'https://unpkg.com/canvaskit-wasm@0.23.0/bin/'+file});
const path2dAnimator = new Animator();
const canvasKitAnimator = new Animator();

View File

@ -33,6 +33,7 @@
<canvas id="offscreen-canvas" width=500 height=500></canvas>
</div>
</body>
<!-- TODO(kjlubick) Remove the particles link when we have skottie in npm again -->
<script type="text/javascript" src="https://particles.skia.org/dist/canvaskit.js"></script>
<script type="text/javascript" src="shared.js"></script>
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript" src="main.js"></script>

View File

@ -31,4 +31,4 @@ document.getElementById('busy-button').addEventListener('click', () => {
// 1300ms was chosen because it causes a visually obvious lag in the lego loader animation.
while (performance.now() - startTime < 1300) {
}
});
});

View File

@ -4,7 +4,6 @@ function SkottieExample(CanvasKit, surface, jsonStr, bounds) {
}
const animation = CanvasKit.MakeAnimation(jsonStr);
const duration = animation.duration() * 1000;
bounds = {fLeft: 0, fTop: 0, fRight: 500, fBottom: 500};
const firstFrame = performance.now();
@ -13,7 +12,7 @@ function SkottieExample(CanvasKit, surface, jsonStr, bounds) {
const seek = ((now - firstFrame) / duration) % 1.0;
animation.seek(seek);
animation.render(skcanvas, bounds);
animation.render(skcanvas, [0, 0, 500, 500]);
surface.requestAnimationFrame(drawFrame);
}