メインコンテンツにスキップ
高度な Svelte 高度なバインディング this

特別な `bind:this` ディレクティブを使用すると、コンポーネント内の要素への読み取り専用バインディングを取得できます。

この演習の `$effect` はキャンバスコンテキストの作成を試みますが、`canvas` は `undefined` です。コンポーネントのトップレベルで宣言することから始めます...

App
<script>
	import { paint } from './gradient.js';

	let canvas;

	$effect(() => {
		// ...
	});
</script>

...次に、`<canvas>` 要素にディレクティブを追加します

App
<canvas bind:this={canvas} width={32} height={32}></canvas>

`canvas` の値は、コンポーネントがマウントされるまで `undefined` のままになります。つまり、`$effect` が実行されるまでアクセスできません。

GitHub でこのページを編集

前へ 次へ
寸法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<script>
	import { paint } from './gradient.js';
 
	$effect(() => {
		const context = canvas.getContext('2d');
 
		let frame = requestAnimationFrame(function loop(t) {
			frame = requestAnimationFrame(loop);
			paint(context, t);
		});
 
		return () => {
			cancelAnimationFrame(frame);
		};
	});
</script>
 
<canvas width={32} height={32}></canvas>
 
<style>
	canvas {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: #666;
		mask: url(./svelte-logo-mask.svg) 50% 50% no-repeat;
		mask-size: 60vmin;
		-webkit-mask: url(./svelte-logo-mask.svg) 50% 50% no-repeat;
		-webkit-mask-size: 60vmin;
	}
</style>