diff --git a/packages/vue3-pixi/src/components/application/index.ts b/packages/vue3-pixi/src/components/application/index.ts index 7ce401f..6e046a4 100644 --- a/packages/vue3-pixi/src/components/application/index.ts +++ b/packages/vue3-pixi/src/components/application/index.ts @@ -43,13 +43,12 @@ export const Application = defineComponent({ const pixiApp = ref() let app: App | undefined - function mount() { - + let view: HTMLCanvasElement | OffscreenCanvas | undefined = canvas.value if (props.transferControlToOffscreen) - canvas.value?.transferControlToOffscreen() + view = canvas.value?.transferControlToOffscreen() as OffscreenCanvas - const context = canvas.value?.getContext('webgl', { + const context = view?.getContext('webgl', { alpha: props.alpha, antialias: props.antialias, depth: props.depth, @@ -64,7 +63,14 @@ export const Application = defineComponent({ if (!context) warn('could not crate webgl context') - const inst = new _Application({ view: canvas.value, ...props }) + const params = { ...props } as { [key: string]: any } + // delete params.autoDensity + + const inst = new _Application({ view, ...params }) + + inst.view.width = params.width + inst.view.height = params.height + pixiApp.value = markRaw(inst) app = createApp({ diff --git a/packages/vue3-pixi/src/composables/useScreen.ts b/packages/vue3-pixi/src/composables/useScreen.ts index 6057c38..53b782d 100644 --- a/packages/vue3-pixi/src/composables/useScreen.ts +++ b/packages/vue3-pixi/src/composables/useScreen.ts @@ -5,6 +5,7 @@ import type { Application, ICanvas } from 'pixi.js' import { Rectangle } from 'pixi.js' import { computedWithControl, useResizeObserver } from '@vueuse/core' + import { useApplication } from './useApplication' export function useScreen(app?: Ref>): Ref { @@ -17,7 +18,8 @@ export function useScreen(app?: Ref>): Ref { () => useApp.value?.screen || defaultRectangle, ) - useResizeObserver(view, screen.trigger) + if (view?.value instanceof HTMLCanvasElement) + useResizeObserver(view, screen.trigger) return screen }