responsive-design - 如何获得 Canvas paperjs View 的响应

Question

我正在使用 tokbox 注释。我的功能运行良好。

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

但问题是我的 Canvas 宽度在网络中是880x520。但是如何缩放手机的 View 大小呢？如果我在移动设备上使用 100% 宽度。但如何在网络和移动设备上匹配相同的坐标。

Answer 1

做你想做的事最简单的方法就是太依赖 Paper.js内置调整大小处理:

• 添加resize归因于您的<canvas> (请参阅 documentation 中的“ Canvas 配置”部分)
• 将事件处理程序回调设置为 view.onResize值，根据新的 View 大小更新您的项目

// 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>