[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:
parent
3607dd4693
commit
7026961111
@ -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');
|
||||
|
@ -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>
|
@ -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) {
|
||||
|
@ -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>
|
||||
|
@ -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)
|
||||
]);
|
||||
|
||||
|
@ -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();
|
||||
|
@ -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>
|
||||
|
@ -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) {
|
||||
}
|
||||
});
|
||||
});
|
||||
|
@ -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);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user