mirror of https://github.com/sveltejs/svelte
Richard Harris
7 years ago
parent
0c6de32217
commit
44ef530c14
@ -0,0 +1,20 @@
|
||||
<script>
|
||||
let w;
|
||||
let h;
|
||||
let size = 42;
|
||||
let text = 'edit me';
|
||||
</script>
|
||||
|
||||
<style>
|
||||
input { display: block; }
|
||||
div { display: inline-block; }
|
||||
</style>
|
||||
|
||||
<input type=range bind:value={size}>
|
||||
<input bind:value={text}>
|
||||
|
||||
<p>size: {w}px x {h}px</p>
|
||||
|
||||
<div>
|
||||
<span style="font-size: {size}px">{text}</span>
|
||||
</div>
|
||||
@ -0,0 +1,20 @@
|
||||
<script>
|
||||
let w;
|
||||
let h;
|
||||
let size = 42;
|
||||
let text = 'edit me';
|
||||
</script>
|
||||
|
||||
<style>
|
||||
input { display: block; }
|
||||
div { display: inline-block; }
|
||||
</style>
|
||||
|
||||
<input type=range bind:value={size}>
|
||||
<input bind:value={text}>
|
||||
|
||||
<p>size: {w}px x {h}px</p>
|
||||
|
||||
<div bind:clientWidth={w} bind:clientHeight={h}>
|
||||
<span style="font-size: {size}px">{text}</span>
|
||||
</div>
|
||||
@ -0,0 +1,17 @@
|
||||
---
|
||||
title: Dimensions
|
||||
---
|
||||
|
||||
Every block-level element has `clientWidth`, `clientHeight`, `offsetWidth` and `offsetHeight` bindings:
|
||||
|
||||
```html
|
||||
<div bind:clientWidth={w} bind:clientHeight={h}>
|
||||
<span style="font-size: {size}px">{text}</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
These bindings are readonly — changing the values of `w` and `h` won't have any effect.
|
||||
|
||||
> Elements are measured using a technique similar to [this one](http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/). There is some overhead involved, so it's not recommended to use this for large numbers of elements.
|
||||
>
|
||||
> `display: inline` elements cannot be measured with this approach; nor can elements that can't contain other elements (such as `<canvas>`). In these cases you will need to measure a wrapper element instead.
|
||||
@ -0,0 +1,58 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let canvas;
|
||||
let ctx;
|
||||
let running = false;
|
||||
|
||||
const r = Math.random();
|
||||
|
||||
onMount(() => {
|
||||
const ctx = canvas.getContext('2d');
|
||||
let frame;
|
||||
|
||||
(function loop() {
|
||||
frame = requestAnimationFrame(loop);
|
||||
|
||||
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
||||
|
||||
for (let p = 0; p < imageData.data.length; p += 4) {
|
||||
const i = p / 4;
|
||||
const x = i % canvas.width;
|
||||
const y = i / canvas.height >>> 0;
|
||||
|
||||
const t = window.performance.now();
|
||||
|
||||
const r = 64 + (128 * x / canvas.width) + (64 * Math.sin(t / 1000));
|
||||
const g = 64 + (128 * y / canvas.height) + (64 * Math.cos(t / 1000));
|
||||
const b = 128;
|
||||
|
||||
imageData.data[p + 0] = r;
|
||||
imageData.data[p + 1] = g;
|
||||
imageData.data[p + 2] = b;
|
||||
imageData.data[p + 3] = 255;
|
||||
}
|
||||
|
||||
ctx.putImageData(imageData, 0, 0);
|
||||
}());
|
||||
|
||||
return () => {
|
||||
cancelAnimationFrame(frame);
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #eee;
|
||||
-webkit-mask: url(logo-mask.svg) 50% 50% no-repeat;
|
||||
mask: url(logo-mask.svg) 50% 50% no-repeat;
|
||||
}
|
||||
</style>
|
||||
|
||||
<canvas
|
||||
width={32}
|
||||
height={32}
|
||||
></canvas>
|
||||
@ -0,0 +1,59 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let canvas;
|
||||
let ctx;
|
||||
let running = false;
|
||||
|
||||
const r = Math.random();
|
||||
|
||||
onMount(() => {
|
||||
const ctx = canvas.getContext('2d');
|
||||
let frame;
|
||||
|
||||
(function loop() {
|
||||
frame = requestAnimationFrame(loop);
|
||||
|
||||
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
||||
|
||||
for (let p = 0; p < imageData.data.length; p += 4) {
|
||||
const i = p / 4;
|
||||
const x = i % canvas.width;
|
||||
const y = i / canvas.height >>> 0;
|
||||
|
||||
const t = window.performance.now();
|
||||
|
||||
const r = 64 + (128 * x / canvas.width) + (64 * Math.sin(t / 1000));
|
||||
const g = 64 + (128 * y / canvas.height) + (64 * Math.cos(t / 1000));
|
||||
const b = 128;
|
||||
|
||||
imageData.data[p + 0] = r;
|
||||
imageData.data[p + 1] = g;
|
||||
imageData.data[p + 2] = b;
|
||||
imageData.data[p + 3] = 255;
|
||||
}
|
||||
|
||||
ctx.putImageData(imageData, 0, 0);
|
||||
}());
|
||||
|
||||
return () => {
|
||||
cancelAnimationFrame(frame);
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #eee;
|
||||
-webkit-mask: url(logo-mask.svg) 50% 50% no-repeat;
|
||||
mask: url(logo-mask.svg) 50% 50% no-repeat;
|
||||
}
|
||||
</style>
|
||||
|
||||
<canvas
|
||||
bind:this={canvas}
|
||||
width={32}
|
||||
height={32}
|
||||
></canvas>
|
||||
@ -0,0 +1,15 @@
|
||||
---
|
||||
title: This
|
||||
---
|
||||
|
||||
The readonly `this` binding applies to every element (and component) and allows to you obtain a reference to rendered elements. For example, we can get a reference to a `<canvas>` element:
|
||||
|
||||
```html
|
||||
<canvas
|
||||
bind:this={canvas}
|
||||
width={256}
|
||||
height={256}
|
||||
></canvas>
|
||||
```
|
||||
|
||||
Note that the value of `canvas` will be `undefined` until the component has mounted, so we put the logic inside the `onMount` [lifecycle function](tutorials/onmount).
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
Loading…
Reference in new issue