Изменение размера растра в соответствии с размером экрана в PaperJS

Я хотел бы изменить размер растра (изображения), когда я изменяю размер холста через PaperJS. Я использую следующие коды:

var last_point = view.center;
var img = new Raster('images/test.png', view.center);
img.onLoad = function() {
    resizeImg();
}
function onResize(event) {
    view.scrollBy(last_point.subtract(view.center));
    last_point = view.center;
    resizeImg();
}
function resizeImg() {
    var width = paper.view.size.width; 
    var scale = (width / img.width) * 0.75;
    img.scale(scale);
}

Однако, пройдя через функцию resizeImg(), изображение исчезнет (закомментированная функция заставит изображение появиться снова).

Что я пропустил в функции? Думаю, это просто ошибка в расчетах


paperjs
person Raptor    schedule 01.04.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

На ширину объекта ссылается его свойство bounds.width, а не только width.

function resizeImg() {
    var width = paper.view.size.width; 
    var scale = (width / img.bounds.width) * 0.75;
    img.scale(scale);
}
person Alex Blackwood    schedule 01.04.2015
comment
Превосходно. Это работает как шарм! Кажется, в официальной документации пропущено много полезных примеров... - person Raptor; 02.04.2015

arrow_upward
0
arrow_downward

Следующее сохраняет соотношение сторон изображения и избавляет вас от необходимости заниматься математикой. fitBounds (документ) и view.onFrame (doc), чтобы все работало автоматически.

…

function resizeImg () {
  img.fitBounds(view.bounds)
}

view.onFrame = function (event) {
  resizeImg()
}
person tjfwalker    schedule 03.09.2017