Spaces:
Runtime error
Runtime error
File size: 1,939 Bytes
70b8e47 66ed450 560b99e 66ed450 560b99e 66ed450 560b99e 66ed450 560b99e 66ed450 304976c 66ed450 560b99e 304976c 66ed450 560b99e 66ed450 560b99e 66ed450 1d701d3 66ed450 70b8e47 560b99e 66ed450 70b8e47 66ed450 1d701d3 66ed450 560b99e 70b8e47 560b99e 70b8e47 |
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 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<script lang="ts">
import { zoom, type ZoomTransform, zoomIdentity } from 'd3-zoom';
import { select } from 'd3-selection';
import { onMount } from 'svelte';
import { currZoomTransform } from '$lib/store';
const height = 512 * 5;
const width = 512 * 5;
let canvasEl: HTMLCanvasElement;
let containerEl: HTMLDivElement;
let canvasCtx: CanvasRenderingContext2D;
const margin = { top: 100, right: 100, bottom: 100, left: 100 };
const extent = [
[-margin.left, -margin.top],
[width + margin.right, height + margin.bottom]
] as [[number, number], [number, number]];
onMount(() => {
const scale = width / containerEl.clientWidth;
const zoomHandler = zoom()
.scaleExtent([1 / scale, 2])
.translateExtent([
[0, 0],
[width, height]
])
// .translateExtent(extent)
.clickDistance(2)
.on('zoom', zoomed);
select(canvasEl.parentElement)
.call(zoomHandler as any)
// .call(zoomHandler.scaleTo as any, 1 / scale)
.on('pointermove', handlePointerMove)
.on('pointerleave', handlePointerLeave);
canvasCtx = canvasEl.getContext('2d') as CanvasRenderingContext2D;
canvasCtx.fillStyle = 'red';
canvasCtx.rect(10, 10, 160, 90);
canvasCtx.fill();
canvasCtx.strokeStyle = 'blue';
canvasCtx.lineWidth = 10;
canvasCtx.strokeRect(0, 0, width, height);
});
function zoomed(e: Event) {
const transform = ($currZoomTransform = e.transform);
canvasEl.style.transform = `translate(${transform.x}px, ${transform.y}px) scale(${transform.k})`;
}
function handlePointerMove(e: PointerEvent) {
// console.log(e);
}
function handlePointerLeave(e: PointerEvent) {
// console.log(e);
}
</script>
<div
bind:this={containerEl}
class="absolute top-0 left-0 right-0 bottom-0 overflow-hidden border-4 border-black z-0"
>
<canvas bind:this={canvasEl} {width} {height} class="absolute top-0 left-0" />
</div>
<style lang="postcss" scoped>
canvas {
transform-origin: 0 0;
}
</style>
|