@ue-too/board / index / CanvasPositionDimensionPublisher

類別: CanvasPositionDimensionPublisher

定義於: packages/board/src/utils/canvas-position-dimension.ts:304

Monitors and publishes position and dimension changes for HTML Canvas elements.

備註

Similar to SvgPositionDimensionPublisher but specifically for HTMLCanvasElement. Automatically handles device pixel ratio adjustments to maintain crisp rendering at different screen densities.

Key differences from SVG version:

• Automatically adjusts canvas.width/height attributes based on devicePixelRatio
• Synchronizes CSS dimensions (style.width/height) with canvas buffer size
• Ensures canvas maintains proper resolution on high-DPI displays

The class uses multiple browser APIs for comprehensive change detection:

• ResizeObserver: Detects size changes
• IntersectionObserver: Detects visibility and position changes
• MutationObserver: Detects attribute changes and synchronizes dimensions
• Window scroll/resize events: Detects changes from page layout

範例

const canvas = document.querySelector('canvas');
const publisher = new CanvasPositionDimensionPublisher(canvas);

// Subscribe to updates
publisher.onPositionUpdate((rect) => {
  // Canvas dimensions automatically adjusted for devicePixelRatio
  console.log(`Canvas at (${rect.x}, ${rect.y})`);
  console.log(`Display size: ${rect.width}x${rect.height}`);
});

publisher.dispose();

參閱

SvgPositionDimensionPublisher for SVG elements

建構函式

建構函式

new CanvasPositionDimensionPublisher(canvas?): CanvasPositionDimensionPublisher

定義於: packages/board/src/utils/canvas-position-dimension.ts:326

Creates a new Canvas position/dimension publisher.

參數

canvas?

HTMLCanvasElement

Optional canvas element to immediately attach to

回傳

CanvasPositionDimensionPublisher

備註

If a canvas is provided, observers are immediately attached and monitoring begins. The canvas dimensions are automatically adjusted for devicePixelRatio.

方法

attach()

attach(canvas): void

定義於: packages/board/src/utils/canvas-position-dimension.ts:401

Attaches observers to a canvas element and begins monitoring.

參數

canvas

HTMLCanvasElement

The canvas element to monitor

回傳

void

備註

Automatically calls dispose first to clean up any previous attachments. Sets up all observers, adjusts canvas dimensions for devicePixelRatio, and records the initial position/dimensions.

---

dispose()

dispose(): void

定義於: packages/board/src/utils/canvas-position-dimension.ts:383

Cleans up all observers and event listeners.

回傳

void

備註

Disconnects all observers and removes window event listeners. Always call this method when the publisher is no longer needed to prevent memory leaks.

---

onPositionUpdate()

onPositionUpdate(observer, options?): () => void

定義於: packages/board/src/utils/canvas-position-dimension.ts:493

Subscribes to position and dimension updates.

參數

observer

Observer<[DOMRect]>

Callback function that receives the updated DOMRect

options?

SubscriptionOptions

Optional subscription options (e.g., AbortSignal for cleanup)

回傳

Unsubscribe function to remove this observer

(): void

回傳

void

備註

The observer is called synchronously whenever the canvas position or dimensions change. The DOMRect represents the actual content area (excluding padding and borders). Canvas buffer dimensions are automatically adjusted for devicePixelRatio.