CODEWITHSUNDEEP
javascriptpaperjs
Ryan2014
Ryan2014

Reputation: 1

event.point not resizing with paper.js

This will drag my rectangle path. It works perfectly if the window hasn't resized.

function onMouseDrag(event) {
  MyRectanglePath.position = event.point;
}

This will resize my game to be a square at either 100% width or 100% length of the browser window.

    function OnResizeCalled() {
            var gameWidth = window.innerWidth;
            var gameHeight = window.innerHeight;
            var scaleToFitX = gameWidth / 640;
            var scaleToFitY = gameHeight / 640;

            var currentScreenRatio = gameWidth / gameHeight;
            var optimalRatio = Math.min(scaleToFitX, scaleToFitY);
            canvas.style.width = 640 * optimalRatio + "px";
            canvas.style.height = 640 * optimalRatio + "px";
    }

// Resize
window.addEventListener("resize", OnResizeCalled, false);
OnResizeCalled();

The smaller my browser window gets, the farther the rectangle is from my mouse when I drag it. How do I make event.point scale with the rest of the canvas?

Upvotes: 0

Views: 1284

Answers (2)

incognito
incognito

Reputation: 53

Umm as Mr. Jürg Lehni stated before, Paper.js is not designed to support manual resizing of the canvas. when paper.view.setViewSize() extends/ shrink the canvas to that size.

If you want to scale the things inside the canvas (e.g. path), you had to apply transformation to every item (with right Matrix) using .transform();

Upvotes: 0

Jürg Lehni
Jürg Lehni

Reputation: 1826

Paper.js is not designed to support manual resizing of the canvas, since that will blow up the pixels and cause all kind of internal issues. It will also interfere with HiDPI handling on Retina screens.

but you can resize the canvas using:

paper.view.viewSize = [width, height];

I hope this helps!

Upvotes: 4

Related Questions