Parse.js onResize() 矩形

Question

我是 Paper.js 的新手，对 JS 不是很熟悉（很高兴，这些是一些简单的代表点！）我想在 canvas 中居中一个矩形，我成功了。问题是我希望在调用 onResize 时这个矩形保持在中间，而文档没有很好地解释，或者至少我没有找到一致的东西。

这是我的代码：

createYearBar(1983, 2015);

function createYearBar(yearStart, yearEnd){
    var yearsToDraw = (yearEnd - yearStart);
    var topLeftX = view.center.x * 0.2;
    var topRightX = view.center.x * 1.8;
    var barSize = topRightX - topLeftX;
    var perYear = (barSize)/yearsToDraw;
    var topleft = new Point(topLeftX, 20);
    var size = new Size(barSize, 30);
    var rect = new Rectangle(topleft, size);
    var barPath = new Path.Rectangle(rect);
    barPath.strokeColor = 'black';
    barPath.fillColor = 'black'
}

所以它绘制了一个我想要的矩形，但是当我调整大小时它什么也没做。我不明白为什么，因为这个 view.center.x 应该来自框架。

如果加上:

就更好了

function onResize(event) {
    createYearBar(1983, 2015);
}

因为我的栏可以变大但不会变小，因为它只是在现有栏上添加栏。

我的问题是：

我是否需要手动删除并重新创建栏，还是我遗漏了一些微不足道的东西（我想我遗漏了什么！）？

Answer 1

您遗漏了几件事，但您的猜测是正确的：最简单的做法是在每个 resize 事件上销毁并重新创建一个栏。

view.center只是return调用时的常规坐标。如果视图是 300x400，view.center 将 return 在 [150, 200] 处创建一个新的 Point 对象。当您调整 window.

大小时，它不是更新对象位置的动态点

问题是您在调整视图大小时没有删除 barPath 对象。如果你的函数 return 是一个对象而不是在函数范围内匿名创建一个对象，那么这样做会容易得多：

var barPath = createYearBar(1983, 2015);

function createYearBar(yearStart, yearEnd){
    var yearsToDraw = (yearEnd - yearStart);
    var topLeftX = view.center.x * 0.2;
    var topRightX = view.center.x * 1.8;
    var barSize = topRightX - topLeftX;
    var perYear = (barSize)/yearsToDraw;
    var topleft = new Point(topLeftX, 20);
    var size = new Size(barSize, 30);
    var rect = new Rectangle(topleft, size);
    barPath = new Path.Rectangle(rect);
    barPath.strokeColor = 'black';
    barPath.fillColor = 'black';
    return barPath;
}

function onResize(event) {
    barPath.remove();
    barPath = createYearBar(1983, 2015);
}

Parse.js onResize() 矩形

Parse.js onResize() with rectangle

javascript

paperjs