Question

我正在与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>

我从Developer Console检查了每次调整浏览器大小时调用resize函数，但paper.view.draw();没有重新对齐图形。

我错过了什么？

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

Answer 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

使用Paper.js重新调整大小

1 个答案: