2021-05-04 06:09:18 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<title>KonvaJS Sandbox</title>
|
|
|
|
|
<meta
|
|
|
|
|
name="viewport"
|
|
|
|
|
content="width=device-width, initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0, maximum-scale=1.0"
|
|
|
|
|
/>
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
margin: 0;
|
2022-08-05 23:35:43 +08:00
|
|
|
width: 100vw;
|
|
|
|
|
height: 100vh;
|
2021-05-04 06:09:18 +08:00
|
|
|
}
|
2024-12-23 22:25:58 +08:00
|
|
|
body {
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
2021-05-04 06:09:18 +08:00
|
|
|
</style>
|
|
|
|
|
<!-- <script src="https://cdn.rawgit.com/hammerjs/touchemulator/master/touch-emulator.js"></script> -->
|
2025-03-12 22:48:47 +08:00
|
|
|
<script src="https://unpkg.com/gifler@0.1.0/gifler.min.js"></script>
|
2021-05-04 06:09:18 +08:00
|
|
|
<script>
|
2021-08-04 16:28:00 +08:00
|
|
|
// TouchEmulator();
|
2021-05-04 06:09:18 +08:00
|
|
|
</script>
|
|
|
|
|
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.7/hammer.js"></script> -->
|
|
|
|
|
<!-- <script src="https://cdn.rawgit.com/hammerjs/touchemulator/master/touch-emulator.js"></script> -->
|
|
|
|
|
<!-- <script src="./hammer.js"></script> -->
|
2022-08-05 23:35:43 +08:00
|
|
|
<!-- <script src="https://unpkg.com/fabric@5.2.1/dist/fabric.js"></script> -->
|
2021-05-04 06:09:18 +08:00
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
2023-08-27 09:36:40 +08:00
|
|
|
<div id="container"></div>
|
2024-12-23 22:25:58 +08:00
|
|
|
<textarea class="test" id="text">Hello</textarea>
|
2022-08-05 23:35:43 +08:00
|
|
|
|
2021-10-22 23:09:34 +08:00
|
|
|
<script type="module">
|
|
|
|
|
import Konva from '../src/index.ts';
|
2022-03-22 02:49:55 +08:00
|
|
|
|
2025-03-12 22:48:47 +08:00
|
|
|
var width = window.innerWidth;
|
|
|
|
|
var height = window.innerHeight;
|
2024-05-21 08:23:37 +08:00
|
|
|
|
2023-07-27 01:10:00 +08:00
|
|
|
var stage = new Konva.Stage({
|
2022-08-05 23:35:43 +08:00
|
|
|
container: 'container',
|
2025-03-12 22:48:47 +08:00
|
|
|
width: width,
|
|
|
|
|
height: height,
|
2022-08-05 23:35:43 +08:00
|
|
|
});
|
2023-07-27 01:10:00 +08:00
|
|
|
|
2025-03-12 22:48:47 +08:00
|
|
|
var layer = new Konva.Layer();
|
2022-08-05 23:35:43 +08:00
|
|
|
stage.add(layer);
|
2023-07-27 01:10:00 +08:00
|
|
|
|
2025-03-12 22:48:47 +08:00
|
|
|
var canvas = document.createElement('canvas');
|
|
|
|
|
// use external library to parse and draw gif animation
|
|
|
|
|
function onDrawFrame(ctx, frame) {
|
|
|
|
|
// update canvas size
|
|
|
|
|
canvas.width = frame.width;
|
|
|
|
|
canvas.height = frame.height;
|
|
|
|
|
// update canvas that we are using for Konva.Image
|
|
|
|
|
ctx.drawImage(frame.buffer, 0, 0);
|
|
|
|
|
// redraw the layer
|
|
|
|
|
layer.draw();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
gifler('https://konvajs.org/assets/yoda.gif').frames(canvas, onDrawFrame);
|
|
|
|
|
|
|
|
|
|
function testKonvaImage() {
|
|
|
|
|
setInterval(() => {
|
|
|
|
|
const image = new Konva.Image({
|
|
|
|
|
image: canvas,
|
|
|
|
|
x: Math.random() * width,
|
|
|
|
|
y: Math.random() * height,
|
|
|
|
|
});
|
|
|
|
|
layer.add(image);
|
|
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
image.image(canvas);
|
|
|
|
|
image.destroy();
|
|
|
|
|
}, 500);
|
|
|
|
|
}, 10);
|
|
|
|
|
}
|
2024-06-20 22:59:21 +08:00
|
|
|
|
2025-03-12 22:48:47 +08:00
|
|
|
testKonvaImage();
|
2021-10-22 23:09:34 +08:00
|
|
|
</script>
|
2021-05-04 06:09:18 +08:00
|
|
|
</body>
|
|
|
|
|
</html>
|
