Open benjamingorman opened 4 months ago
+1
For those who are struggling, here is a simple example for V8.
const app = new Pixi();
await app.init({
backgroundColor: "#FFF5D4",
resizeTo: window,
antialias: true,
autoDensity: true, // !!!
resolution: 2,
});
const viewport = new Viewport({
passiveWheel: false,
events: app.renderer.events
})
// activate plugins
viewport
.drag()
.pinch()
.wheel()
.decelerate()
// add the viewport to the stage
app.stage.addChild(viewport)
@liweicheng00 I am still having some issues with a relativly simple setup. For some reason nothing at all seems to be happening, also no errors, when integrating pixi-viewport with pixi v8 in my Nuxt 3 app. The pixie canvas itself renders just fine, just no viewport:
const initializePixi = async () => {
if (!pixiContainer.value) return;
// Create a new application
const app = new Application();
// Initialize the application
await app.init({
background: '#fff',
resizeTo: window,
antialias: true,
autoDensity: true,
resolution: 2,
});
pixiApp.value = app;
// Append the application canvas to the document body
pixiContainer.value.appendChild(pixiApp.value.canvas);
// create viewport
const viewport = new Viewport({
passiveWheel: false,
events: pixiApp.value.renderer.events,
})
viewport.drag().pinch().wheel().decelerate()
pixiApp.value.stage.addChild(viewport);
// Load scatter plot points
loadScatterPlotPoints(pixiApp.value);
await fetchAndLoadQueryResults();
};
Is there anything I'm missing here? An update full example would be great!
+1
@liweicheng00 I am still having some issues with a relativly simple setup. For some reason nothing at all seems to be happening, also no errors, when integrating pixi-viewport with pixi v8 in my Nuxt 3 app. The pixie canvas itself renders just fine, just no viewport:
It looks almost the same as mine. Not sure what is wrong. Also in Nuxt3 My package versions are: ├─ @pixi/colord@2.9.6 ├─ @pixi/devtools@1.3.0 ├─ pixi-viewport@5.0.3 ├─ pixi.js@8.1.6 │ ├─ @pixi/colord@^2.9.6
import { Application as Pixi, Container, Graphics } from "pixi.js";
import { Viewport } from 'pixi-viewport'
export const drawContainer = new Container()
export class Application {
drawContainer: Container = drawContainer
canvas: Pixi | undefined
constructor() {
const tempG = new Graphics()
// tempG.rect(0, 0, this.node.nodeMeta.width, this.node.nodeMeta.height).stroke({ width: 10, color: "grey" })
tempG.circle(0, 0, 10).fill("red")
this.drawContainer.addChild(tempG)
this.drawContainer.x = 100
this.drawContainer.y = 100
this.drawContainer.scale.y *= 0.3
this.drawContainer.scale.x *= 0.3
}
async init() {
const app = new Pixi();
await app.init({
backgroundColor: "#FFF5D4",
resizeTo: window,
antialias: true,
autoDensity: true, // !!!
resolution: 2,
});
const viewport = new Viewport({
passiveWheel: false,
events: app.renderer.events
})
// activate plugins
viewport
.drag()
.pinch()
.wheel()
.decelerate()
// add the viewport to the stage
app.stage.addChild(viewport)
viewport.addChild(this.drawContainer)
this.canvas = app
return this
}
}
<template>
<div ref="drawCanvas" />
</template>
<script setup>
import { Application } from './draw';
const drawCanvas = ref(null);
const draw = new Application()
await draw.init()
onMounted(async () => {
drawCanvas.value.appendChild(draw.canvas.canvas);
})
</script>
@StefanVDWeide I'm slightly late to the party, but by any chance your scatter point points were added to app.stage
directly instead of the viewport? i've made a beginner mistake with this - the correct order should be:
viewport.addChild(yourComponents)
app.stage.addChild(viewport)
Current examples do not work for pixi v8
For example the live example here uses pixi v6.0.2 which is quite out of date
It's therefore quite difficult to integrate this plugin as someone inexperienced with pixi, because there are a lot of errors when following existing example code