Drag has a dark are when resizing
See original GitHub issueI have a full-screen application that has been updated for resizing. Even if resizing works visually well, when I expand the browser window the new area is not reactive to drag, drop, and zoom.
Any suggestion?
Thanks, Dario
import * as PIXI from 'pixi.js'
import { Viewport } from 'pixi-viewport'
export default () => {
// Create and append PIXI
const app = new PIXI.Application({
width: window.innerWidth,
height: window.innerHeight,
antialias: true,
transparent: true,
resolution: 2,
autoDensity: true,
autoResize: true,
resizeTo: window,
})
document.body.prepend(app.view)
// Create and append viewport
const viewport = new Viewport({
screenWidth: window.innerWidth,
screenHeight: window.innerHeight,
interaction: app.renderer.plugins.interaction
})
app.stage.addChild(viewport)
s.pixi = viewport
// Activate plugins
viewport
.drag()
.pinch()
.wheel()
.decelerate()
.clampZoom({ minScale: .3, maxScale: 5 })
.setTransform( window.innerWidth / 2, window.innerHeight / 2, .3, .3)
// Prevent pinch gesture in Chrome
window.addEventListener('wheel', e => {
e.preventDefault();
}, { passive: false });
}
Issue Analytics
- State:
- Created 3 years ago
- Comments:6 (3 by maintainers)
Top Results From Across the Web
Resizing window causes black strips - Stack Overflow
If the user resized the window, you have to recreate the bitmap with the window's new size. There will be a gray fill...
Read more >How to Stop Images Resizing When Placing in Photoshop (Or ...
Dragging an image from the Desktop into an open document If the placed image exceeds the dimensions of the canvas, Photoshop will resize...
Read more >Auto-resizing video and images in Adobe Premiere Pro
Auto- resizing video and images in Adobe Premiere ProThis tutorial shows you the three different settings for resizing imported media and how ...
Read more >resize - CSS: Cascading Style Sheets - MDN Web Docs - Mozilla
The resize CSS property sets whether an element is resizable, and if so, in which directions.
Read more >Move, resize, and organize windows with Stage Manager on ...
Resize any window: Drag from the corner marked with a dark curve, or, if you have a mouse or trackpad, drag from any...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Same thing.
addEventListener
allows more than one event listener on the resize event. For this purpose, they’re both fine.You need to call
viewport.resize()
on the resize event.