Как отреагировать на представление canvas paperjs - PullRequest
Новая
       9

Как отреагировать на представление canvas paperjs

0 голосов
/ 20 ноября 2018

Я использую аннотации tokbox.Моя функциональность работает нормально.

Я использую https://github.com/aullman/opentok-whiteboard

Но проблема в том, что моя ширина холста в сети составляет 880x520.Но как масштабировать размер представления для мобильных телефонов?Если я использую 100% ширину на мобильных устройствах.но как сопоставить координаты так же на веб и мобильных устройствах.

1 Ответ

0 голосов
/ 20 ноября 2018

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

  • добавить атрибут resize к вашему <canvas> (см. Часть «Настройка холста»)в документации )
  • установите обратный вызов обработчика событий как view.onResize , чтобы обновить ваш проект в соответствии с новым размером представления 

// setup paper
paper.setup('canvas');

// draw a circle at view center
var circle = new paper.Path.Circle({
  center: paper.view.center,
  radius: 50,
  fillColor: 'orange'
});

// when view is resized...
paper.view.onResize = function() {
  // ...log new view width
  console.log('view.width is now: ' + paper.view.bounds.width);
  // ...place circle at new view center
  circle.position = paper.view.center;
};

// draw instructions
new paper.PointText({
  content: 'Resize the window and see that view is automatically resized',
  point: paper.view.center.subtract(0, 80),
  justification: 'center'
});
html,
body {
  margin: 0;
  overflow: hidden;
  height: 100%;
}


/* Scale canvas with resize attribute to full size */

canvas[resize] {
  width: 100%;
  height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.8/paper-full.min.js"></script>
<canvas id="canvas" resize></canvas>
...