Размер event.point не изменяется с помощью paper.js

Это перетащит мой прямоугольный путь. Он отлично работает, если размер окна не изменился.

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

Это изменит размер моей игры на квадрат со 100% шириной или 100% длиной окна браузера.

    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();

Чем меньше становится окно моего браузера, тем дальше находится прямоугольник от мыши, когда я его перетаскиваю. Как мне сделать так, чтобы event.point масштабировался с остальной частью холста?


javascript paperjs
person Ryan2014    schedule 02.01.2014    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Paper.js не предназначен для поддержки ручного изменения размера холста, так как это приведет к увеличению пикселей и вызовет всевозможные внутренние проблемы. Это также будет мешать обработке HiDPI на экранах Retina.

но вы можете изменить размер холста, используя:

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

Надеюсь, это поможет!

person Jürg Lehni    schedule 04.01.2014
comment
Большое спасибо за вашу поддержку, г-н Юрг Лени! Означает ли это, что я должен стереть строки «canvas.style.width = ...» и «canvas.style.height = ...»? Я хотел бы сделать поле на всю ширину или высоту экрана для шахматного приложения. - person Ryan2014; 05.01.2014
comment
См. здесь инструкции о том, как заставить холст Paper.js автоматически изменять свой размер до полного размера окна: paperjs.org/tutorials/getting-started/working-with-paper-js/ - person Jürg Lehni; 06.01.2014
comment
Потрясающий. Я проверю это. Кстати, я отправил запрос на включение в ваш paperjs. Отличная работа по созданию paperjs! - person Ryan2014; 06.01.2014
comment
Да это я видел, спасибо! И не могли бы вы проголосовать / принять мой ответ? Не уверен, как это работает, но я думаю, что это и есть Stackoverflow. Новинки здесь еще... - person Jürg Lehni; 06.01.2014
comment
Я поддержу ваш ответ, но мне все еще не удается решить эту проблему. Может быть, я смогу добавить больше в документацию об этом, когда выясню это. В справочнике нет примеров, что было бы чрезвычайно полезно (я парень, занимающийся взаимодействием UX/человека-компьютера). Как использовать paper.view.viewSize = [?,?] для растяжки на весь экран? Я очень ценю ваше время и усилия, помогающие мне. Вы де-факто эксперт в этом. - person Ryan2014; 07.01.2014
comment
Что ж, самый простой способ — пометить холст как изменяющий размер, добавив к нему атрибут resize. Посмотрите на примеры, которые поставляются с библиотекой, все они делают это и масштабируются вместе с браузером без какого-либо дополнительного кода. Внутри они используют #viewSize и обработчик изменения размера: github.com/paperjs/paper.js/blob/master/src/ui/View.js#L49 - person Jürg Lehni; 08.01.2014

arrow_upward
0
arrow_downward

Хм, как ранее заявлял г-н Юрг Лени, Paper.js не предназначен для поддержки ручного изменения размера холста. когда paper.view.setViewSize() расширяет/уменьшает холст до этого размера.

Если вы хотите масштабировать вещи внутри холста (например, путь), вам нужно было применить преобразование к каждому элементу (с правильной матрицей), используя .transform();

person incognito    schedule 11.06.2015