Question

我正在使用tokbox注释。我的功能正常。

我正在使用https://github.com/aullman/opentok-whiteboard

但是问题是我的画布在网络上的宽度是880x520。但是如何缩放手机的视图大小？如果我在移动设备上使用100％的宽度。但是如何在网络和移动设备上匹配坐标。

Answer 1

最简单的方法就是依靠Paper.js内置的调整大小处理：

将resize属性添加到您的<canvas>中（请参阅documentation中的“画布配置”部分）
将事件处理程序回调设置为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>

如何响应画布paper.js视图

1 个答案: