使用 Paper.js 重绘调整大小答案

【问题标题】：Redraw on Resize with Paper.js使用 Paper.js 重绘调整大小
【发布时间】：2015-03-31 01:39:03
【问题描述】：

我正在使用 PaperJS。当我调整浏览器窗口的大小时，我要求画布重绘。但是，图形不会重新居中，因为我从 view.center 绘制图形：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/paper-full.min.js"></script>
<script type="text/paperscript" canvas="paperjs-canvas">
var center = new Path.Circle(view.center, 450);
center.fillColor = '#000000';

function onResize(event) {
    // redraw canvas
    paper.view.draw();
}
</script>
<style>
html, body {
    padding: 0;
    margin: 0;
    height: 100%;
    overflow: hidden; /* avoid Mac / Chrome overscroll */
}
#paperjs-canvas {
    width: 100%;
    height: 100%;
    background-color: #D0E7D1;
}
</style>
</head>
<body>
<canvas id="paperjs-canvas" class="off" data-paper-resize="true"></canvas>
</body>
</html>

我从开发者控制台检查，每次调整浏览器大小时都会调用调整大小函数，但 paper.view.draw(); 不会重新对齐图形。

我错过了什么？

在 Google Chrome 41、Mac OS X 10.10.2 上运行

【问题讨论】：

标签： html5-canvas paperjs

【解决方案1】：

View.center 只是一个常规坐标。它没有什么特别之处，它可以将定位在那里的对象锁定在画布的“中心”。

如果您想在调整画布大小后保持point 与view.center 相同，可以使用view.scrollBy(point) 转换坐标系。请记住，点 [0,0] 可能不再对应于画布的左上角。

var center = new Path.Circle(view.center, 240);
center.fillColor = '#000000';
var lastPoint = view.center;

function onResize(event) {
    view.scrollBy(lastPoint.subtract(view.center));
    lastPoint = view.center;
}

Here's a sketch on paper.js

【讨论】：

像魅力一样工作；它根据浏览器调整大小重新定位。如何根据画布大小调整图形大小？有可能吗？
您找到解决方案了吗？
如果您有后续问题，最好发一个新帖子，而不是在评论中提问。我很确定这个问题已经回答过几次了。尝试搜索“[paperjs] resize”，看看是否有任何帮助。