Question

我对Paper.js很新，而不熟悉JS（很高兴，这些是一些简单的代表！）我想在画布中居中一个矩形，然后我成功了。问题是，我希望当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只需在您调用时返回常规坐标。如果视图为300x400，则view.center将在[150,200]处返回一个新的Point对象。在调整窗口大小时，它不是动态点来更新对象的位置。

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

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（）与矩形

1 个答案: