Open arhariri79 opened 4 years ago
Can your provide an example?
like your example in github i used clamp plugin in my code but when i set the clamp direction to 'all' the picture clamps to the top and left edge but not the right or bottom edge of the screen
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import {Button} from "react-bootstrap"
import * as PIXI from 'pixi.js';
import { Viewport } from 'pixi-viewport'
const TextPixi = () => {
const onClick = async () => {
const app = new PIXI.Application()
document.body.appendChild(app.view)
// create viewport
const viewport = new Viewport({
screenWidth: window.innerWidth,
screenHeight: window.innerHeight,
worldWidth: 2000,
worldHeight: 2000,
interaction: app.renderer.plugins.interaction // the interaction module is important for wheel to work properly when renderer.view is placed or scaled
})
// add the viewport to the stage
app.stage.addChild(viewport)
// activate plugins
viewport
.drag()
.pinch()
.wheel()
.decelerate({friction:0.95,minSpeed:0.01})
.clamp({direction:'all',underflow:'center'})
// add a red box
const sprite = viewport.addChild(new PIXI.Sprite(PIXI.Texture.WHITE))
sprite.tint = 0xff0000
sprite.width = sprite.height = 100
sprite.position.set(100, 100)
}
return (
<>
<div className="text-pixi">
<Button onClick={onClick} variant="primary">Start</Button>
</div>
<div className="d-flex justify-center align-center fill-height">
<div id="pixi-base64-container"/>
</div>
</>
);
};
export default TextPixi;
Is your worldWidth/Height correct? Seems strange.
yes i should change the world width/height as same as picture size but i think it is better to say this point into documention i thank you for view-port
when i use clamp direction="all" but my clamp does not work and i test clamp with another app but does not work or when i use clamp direction ="y" does not work well