2021-05-03 17:09:18 -05: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 10:35:43 -05:00
|
|
|
width: 100vw;
|
|
|
|
|
height: 100vh;
|
2021-05-03 17:09:18 -05:00
|
|
|
}
|
2024-12-23 09:25:58 -05:00
|
|
|
body {
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
2021-05-03 17:09:18 -05:00
|
|
|
</style>
|
|
|
|
|
<!-- <script src="https://cdn.rawgit.com/hammerjs/touchemulator/master/touch-emulator.js"></script> -->
|
2025-03-12 07:48:47 -07:00
|
|
|
<script src="https://unpkg.com/gifler@0.1.0/gifler.min.js"></script>
|
2021-05-03 17:09:18 -05:00
|
|
|
<script>
|
2021-08-04 15:28:00 +07:00
|
|
|
// TouchEmulator();
|
2021-05-03 17:09:18 -05: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 10:35:43 -05:00
|
|
|
<!-- <script src="https://unpkg.com/fabric@5.2.1/dist/fabric.js"></script> -->
|
2021-05-03 17:09:18 -05:00
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
2023-08-26 20:36:40 -05:00
|
|
|
<div id="container"></div>
|
2024-12-23 09:25:58 -05:00
|
|
|
<textarea class="test" id="text">Hello</textarea>
|
2022-08-05 10:35:43 -05:00
|
|
|
|
2021-10-22 10:09:34 -05:00
|
|
|
<script type="module">
|
|
|
|
|
import Konva from '../src/index.ts';
|
2022-03-21 13:49:55 -05:00
|
|
|
|
2025-03-12 07:48:47 -07:00
|
|
|
var width = window.innerWidth;
|
|
|
|
|
var height = window.innerHeight;
|
2024-05-20 19:23:37 -05:00
|
|
|
|
2023-07-26 12:10:00 -05:00
|
|
|
var stage = new Konva.Stage({
|
2022-08-05 10:35:43 -05:00
|
|
|
container: 'container',
|
2025-03-12 07:48:47 -07:00
|
|
|
width: width,
|
|
|
|
|
height: height,
|
2022-08-05 10:35:43 -05:00
|
|
|
});
|
2023-07-26 12:10:00 -05:00
|
|
|
|
2025-03-12 07:48:47 -07:00
|
|
|
var layer = new Konva.Layer();
|
2022-08-05 10:35:43 -05:00
|
|
|
stage.add(layer);
|
2023-07-26 12:10:00 -05:00
|
|
|
|
2025-08-09 10:49:46 +09:00
|
|
|
const text = new Konva.Text({
|
|
|
|
|
text: 'Hello, how are you doing today? Would you like to start using konva.js',
|
|
|
|
|
width: 400,
|
|
|
|
|
fontSize: 50,
|
|
|
|
|
x: 100,
|
|
|
|
|
y: 100,
|
|
|
|
|
draggable: true,
|
|
|
|
|
});
|
|
|
|
|
layer.add(text);
|
2024-06-20 09:59:21 -05:00
|
|
|
|
2025-08-09 10:49:46 +09:00
|
|
|
const anim = new Konva.Animation((frame) => {
|
|
|
|
|
text.charRenderFunc(({ char, index, context }) => {
|
|
|
|
|
const animationDuration = 4000;
|
|
|
|
|
const animationTime = frame.time % animationDuration;
|
|
|
|
|
const length = text.text().length;
|
|
|
|
|
const durationPerChar = animationDuration / length;
|
|
|
|
|
const localStartTime = index * durationPerChar;
|
|
|
|
|
const localTime = animationTime - localStartTime;
|
|
|
|
|
const inAnimation = localTime > 0;
|
|
|
|
|
if (!inAnimation) {
|
|
|
|
|
context.setAttr('globalAlpha', 0);
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
const afterAnimation = localTime > durationPerChar;
|
|
|
|
|
if (afterAnimation) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
const animationAlpha = Math.abs(localTime / durationPerChar);
|
|
|
|
|
const oldOpacity = context.globalAlpha;
|
|
|
|
|
context.setAttr('globalAlpha', oldOpacity * animationAlpha * 0.5);
|
|
|
|
|
context.translate(0, -15 + (localTime / durationPerChar) * 15);
|
|
|
|
|
});
|
|
|
|
|
}, layer);
|
|
|
|
|
anim.start();
|
2021-10-22 10:09:34 -05:00
|
|
|
</script>
|
2021-05-03 17:09:18 -05:00
|
|
|
</body>
|
|
|
|
|
</html>
|
