df398c5552
Assets are served from /demo not /demos
6be53e5cdf/demos/go/demoserver/main.go (L145)
Change-Id: I48b8f1a5c5320c9eb5acda25178b2e080ca17fcd
Reviewed-on: https://skia-review.googlesource.com/c/skia/+/415165
Reviewed-by: Kevin Lubick <kjlubick@google.com>
82 lines
2.3 KiB
HTML
82 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<title>Texture demos</title>
|
|
<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>
|
|
|
|
<style>
|
|
canvas {
|
|
border: 1px dashed grey;
|
|
}
|
|
#sourceImage, #sourceVideo {
|
|
width: 100px;
|
|
height: 100px;
|
|
border: 1px solid red;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
|
|
<body>
|
|
<h1>User Defined Textures</h1>
|
|
|
|
<p>Tap on one of the texture sources to switch to it.</p>
|
|
|
|
<canvas id=draw width=500 height=500></canvas>
|
|
|
|
<img id="sourceImage" src="/demo/textures/testimg.png">
|
|
<video id="sourceVideo" autoplay muted></video>
|
|
</body>
|
|
|
|
<script type="text/javascript" charset="utf-8">
|
|
const ckLoaded = CanvasKitInit({ locateFile: (file) => 'https://particles.skia.org/dist/' + file });
|
|
const canvasEle = document.getElementById('draw');
|
|
const imgEle = document.getElementById('sourceImage');
|
|
const videoEle = document.getElementById('sourceVideo');
|
|
|
|
// Links the web cam to the video element.
|
|
navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
|
|
videoEle.srcObject = stream;
|
|
}).catch((err) => {
|
|
console.error("Could not set up video", err);
|
|
});
|
|
|
|
// Enables switching between texture sources.
|
|
let srcEle = imgEle;
|
|
imgEle.addEventListener('click', () => {
|
|
srcEle = imgEle;
|
|
});
|
|
videoEle.addEventListener('click', () => {
|
|
srcEle = videoEle;
|
|
});
|
|
|
|
Promise.all([
|
|
ckLoaded,
|
|
imgEle.decode(),
|
|
]).then(([
|
|
CanvasKit,
|
|
shouldBeNull,
|
|
]) => {
|
|
const surface = CanvasKit.MakeCanvasSurface('draw');
|
|
if (!surface) {
|
|
throw 'Could not make surface';
|
|
}
|
|
const paint = new CanvasKit.Paint();
|
|
|
|
// This example creates a new texture, loads it into an image, and then deletes the image
|
|
// (which should delete the texture automatically).
|
|
let lastTS = Date.now();
|
|
function drawFrame(canvas) {
|
|
const now = Date.now();
|
|
canvas.rotate(10 * (now - lastTS) / 1000, 250, 250);
|
|
lastTS = now;
|
|
const img = surface.makeImageFromTextureSource(srcEle);
|
|
canvas.clear(CanvasKit.Color(200, 200, 200));
|
|
canvas.drawImage(img, 5, 5, paint);
|
|
img && img.delete();
|
|
surface.requestAnimationFrame(drawFrame);
|
|
}
|
|
surface.requestAnimationFrame(drawFrame);
|
|
});
|
|
|
|
</script> |