使用 Paper.js 在调整大小时重绘

Question

我正在使用 PaperJS。当我调整浏览器 window 大小时，我要求 canvas 重绘。但是，图形不会重新居中，因为我从 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>

我从 Developer Console 确认每次调整浏览器大小时都会调用调整大小功能，但 paper.view.draw(); 不会重新对齐图形。

我错过了什么？

运行 Google Chrome 41，Mac OS X 10.10.2

Answer 1

View.center只是一个常规坐标。将对象锁定在 canvas.

的 "center" 处并没有什么特别之处

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

的左上角

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

使用 Paper.js 在调整大小时重绘

Redraw on Resize with Paper.js

html5-canvas

paperjs